This code can be a little tricky, so take care when using it. It would be best to try out this code onto a backup copy of your webpage, and test it before using it on your site. This code is a good one, but everything has to be spot on or it will refuse to work
Swapping images on mouseover...
Out of all the scrips that I have seen this is the simplest one. All you have to do is high light the script , copy and paste.
|
<!--This goes outside the head tag--> <SCRIPT LANGUAGE="JavaScript"> <!-- browserName = navigator.appName; version = ""; browserVer = parseInt(navigator.appVersion); if (browserVer >= 3) version = "n3"; if (version == "n3") { img1_on = new Image(); img1_on.src = "image1a.gif"; img2_on = new Image(); img2_on.src = "image2a.gif"; img3_on = new Image(); img3_on.src = "image3a.gif"; img1_off = new Image(); img1_off.src = "image1.gif"; img2_off = new Image(); img2_off.src = "image2.gif"; img3_off = new Image(); img3_off.src = "image3.gif"; } function img_act(imgName) { if (version == "n3") { imgOn = eval(imgName + "_on.src"); document [imgName].src = imgOn; } } function img_inact(imgName) { if (version == "n3") { imgOff = eval(imgName + "_off.src"); document [imgName].src = imgOff; } } //--> </script>
|
Then once you have done that you do th same with these below. and paste them in the body where you want the images go.
Replace the links and images with your own, I have high lighted them in red to make it easy for you.
|
<A HREF="http://url.to.where.you/wanted.html"
onMouseover="img_act('img1')" onMouseout="img_inact('img1')"><IMG NAME="img1" SRC="image1.gif" border=0></A> <A HREF="http://url.to.where.you/wanted/part2.html" onMouseover="img_act('img2')" onMouseout="img_inact('img2')"><IMG NAME="img2" SRC="image2.gif" border=0></A> <A HREF="http://url.to.where.you/wanted/part3.html" onMouseover="img_act('img3')" onMouseout="img_inact('img3')"><IMG NAME="img3" SRC="image3.gif" border=0></A>
|
If you don't particularly want a image to link to anywhere, just make the A HREF tag point that same page it is on. That is what I'm doing in the example above.
Note it is best if the images are the same size, the ones incoming and outgoing, or some really funky stuff will start to happen on mouseover.
This is a clever script, because it preloads the images behind, and doesn't bum on some browsers. It looks for Netscape 3 or Internet Explorer 3 or higher to work, otherwise it just uses the standard images as defined by the IMG SRC tags.