First of all you will
need two images that are similar or will look good when being replaced
by each other. The first image to the right, we will call "blueoff.gif"
and the second one we will call "blueon.gif" . We want it to
appear as though this button (blueoff.gif) is being pressed in when the cursor is placed
over the image.
blueoff.gif
blueon.gif
Now on your web site, somewhere
between the <HEAD> and the </HEAD> tags, place the following
script below. You will only need to change the names of the images. <SCRIPT LANGUAGE =
"JavaScript">
<!--
if (document.images) {
img1on
= new Image();
img1on.src = "blueon.gif";
img1off = new Image();
img1off.src = "blueoff.gif";
}
function imgOn(imgName) {
if (document.images) {
document[imgName].src = eval(imgName + "on.src"); }
}
function imgOff(imgName) { if (document.images) { document[imgName].src
= eval(imgName + "off.src"); } }
// -->
</SCRIPT>
Now you must identify the image
itself in the web page. To do this, copy the link and image insertion HTML
below... 
Now your image replacement should
be working! If you would like to do this with more than one image, then
we concentrate on the blue part of the script in step #2. You will simply
copy the blue part, and then paste it directly below it. Then you must
make changes to the part you just pasted... simply change the 1's to 2's,
and then of course change the images to the ones you want to use for your
second image replacement. For the actual placing of the second image on
the page, copy the same code as you did in step #3, but change all "img1"
to "img2" and then of course make sure to change the IMG SRC
tags to the second image for use. Don't forget to change the link too.
You can keep doing this for as many images as you want, just continue to
replace the numbers and images....