JAVASCRIPT

HOW TO MAKE A SIMPLE IMAGE ROLLOVER BUTTON WITH JAVASCRIPT

Image rollover buttons add great visual appeal to your webpages. This tutorial shows you how to make a simple rollover image button like the one below. Move your mouse over and then out of the button image below to see the effect.

Here's how it's done:

First you will the need two images. I have chosen the two below. They are img1.gif and img2.gif respectively:

   

img1.gif is our normal state so we do as follows:

<img src="img1.gif" border="0" name="example" />

Note that we gave the image tag above a name of example. This is very important as we will need the javascript to reference it. We then add the link as below. Since this is a demo, we don't really want the link to go anywhere, so we set href="#". Obviously, you will set this to a destination of your choice.

<a href="#" ><img src="img1.gif" border="0" name="example" /></a>

Finally, we add the onmouseover and onmouseout event handler to the <a> tag as follows:

<a href="#" onmouseover="document.images.example.src='img2.gif';" onmouseout="document.images.example.src='img1.gif';" ><img src="img1.gif" border="0" name="example" /></a>

And that's it!

onmouseover="document.images.example.src='img2.gif';"

What we are saying with the above is that when the mouse is over the image, this document's images tag named example will be display src='img2.gif'.

onmouseout="document.images.example.src='img1.gif';"

What we are saying with the above is that when the mouse is out of the image, this document's images tag named example will be display src='img1.gif'.