Image Changing Mouseover Links

Yes, this is a tutorial on how to make those links when mouseover, changes that image above it. See my Affiliates links at the navigation for a demo of this. This is a JavaScript to let you know that it won’t work when JavaScript is disabled.

Let’s begin.

Place the following code where ever you want the Mouseover Links to appear.

[sourcecode language=”javascript”]
<script type="text/javascript">
<![CDATA[
if (document.images) {
img00 = new Image
img01 = new Image
img02 = new Image
img03 = new Image
img00.src="images/default.gif" src="images/default.gif"
img01.src="images/image01.gif" src="images/image01.gif"
img02.src="images/image02.gif" src="images/image02.gif"
img03.src="images/image03.gif" src="images/image03.gif"
}
]]>
</script>
[/sourcecode]

In the script, there’s a img00 = newimg00 is a new image. And so goes that img00.src = “images/default.gif” implies that img00.src should contain the image located at images/default.gif.

This same steps applies to the rest of the img00 = new Image and the img00.src = “images/default.gif” although the img00 is for the default.

The next set of codes would be added inside html tags like this:

[sourcecode language=”javascript”]
<a onmouseover="document.images.src=img01.src" onmouseout="document.images.src=img00.src" href="http://www.link.com" target="_blank">Image 1</a>
<a onmouseover="document.images.src=img02.src" onmouseout="document.images.src=img00.src" href="http://www.link.com" target="_blank">Image 2</a>
<a onmouseover="document.images.src=img03.src" onmouseout="document.images.src=img00.src" href="http://www.link.com" target="_blank">Image 3</a>
[/sourcecode]

When you mouseover the link, it goes to img01.src on which contain the link button you specified. And upon mouseout, it goes back to img00.src on which is the default image.

If you need to add more, all you have to do is increment img03 = new Image to img04 = new Image and change the image that corresponds it like img04.src = “images/image04.gif” and so on.

In the case of the codes on the links, you don’t have to change this part: onmouseout=”document.images.src=img00.src”. Just change this one also increasing the number: onmouseover=”document.images.src=img03.src”.

I hope, by this, I would get lesser e-mails regarding this topic. 😛 I’m not a good teacher (and I do not plan on being one) so if you do not get it, let me know and I’ll try to explain it more. 😉