Javascript Image Rollovers

Javascript image rollovers may be used for a variety of creative webpage enhancements. Simple rollvers may be used to make a button change color. Advanced rollovers may be used as imagemaps to provide viewers with colorful picture links.

To implement a simple rollover it is neccessary to understand (at least basicaaly) javascript objects. The object that is used in image rollovers is an image object. The image object contains properties that may be changed by invoking special functions. The function that we will focus upon may be called from within the anchor (<a href="">) HTML tag. Specifically, we will use the onmouseover (and onmouseout) function.

The HTML:

<a href="http://www.somewhere.com/" onmouseover="document.circle.src='over.gif'" onmouseout="document.circle.src='out.gif'">
<img src="out.gif" name="circle" border="0" width="150" height="56">
</a>

would cause a button named circle to swap the images out.gif and over.gif when the mouse rolled over (and out of) an initial graphic.



The first step in creating this rollover would be to create 2 buttons - one for onmouseout and 1 for onmouseover.



The remain step would be to write the HTML (including the above) for a webpage. It is important to remeber that there is (in this instance) an associated URL (link)that should be connected to an appropriate site.

A more advanced version of the image rollover might use an imagemap. Using Javascript with an imagemap is more complex, but the rewards are also proportionately greater...



A tutorial to create a Javascript imagemap may be found at http://www.lightlink.com/coachmol/school/jsinfo/imagemap.html