Here's a simple "mouse over script you can always use somewhere on your site.  You can have as many images as you want, just remember the more images you use the longer it takes for your page to load.  If you're going to use 8 images, all eight have to load completely...so use it wisely.
 
Here's a "Mouse Over" Script from the guys at Bravenet...pretty neat!!
Here it is reversed...
 

* MOUSE-OVER IMAGES

Do you want to make your images change on mouseover? Add this
code in between the <head> tag and </head> tag (this code is for
one image only; you can alter this code to make more images by
adding numerical values in place of the "0" in this code):

<script language="JavaScript">
<!-- Hide the script from old browsers --
 
img0_on = new Image(100,30);
img0_on.src="image2.gif";
img0_off = new Image(100,30);
img0_off.src="image1.gif";

function over_image(parm_name)
    {
        document[parm_name].src = eval(parm_name + "_on.src");
    }
function off_image(parm_name)
    {
        document[parm_name].src = eval(parm_name + "_off.src");
    }
 
// --End Hiding Here -->
</script>

Image 1 is the image you want showing all the time. Image 2 is the
image you want to show on mouseover ... remember to substitute
your image filename and width and height attributes. Next add the
code below for every mouseover image you insert in your page.
This is inserted in the body section of your page:

<a href="test.htm"
onmouseover="over_image('img0');"
onmouseout="off_image('img0')">
<img src="image1.gif"  border="0" name="img0"></a>
 

If you add more images, remember to rename img0 to img1
or whatever you have coded in the head portion of this script.

Good Luck