Image Rollover Code

This script is a standards compliant means of adding mouse rollover code to images in a document without the hassle of coding in extra parameters to each image in your document. This code is standards compliant and should not invalidate your document.

Sample

Rollover Sample

Usage

To begin with you need to load the javascript into a page in the head section of your page. If you place the code into a file called rollover.js then you would include the file as follows

<head>
	<title>..</title>
	<script src="rollover.js" type="text/javascript"></script>	
</head>

Next you will need to add the attribute class="imgover" to any image in your document that requires a mouseover effect to be trigger.

<img src="sample.jpg" alt="Some Image" class="imgover">

Finally, for any image in your document you will need to create a rollover state for it, the only requirements for this image is that it is named exactly the same as the original image, but it needs _o on the end of the name. The image should also be in the same directory as the original and should be of the same type. So for example you would have sample.jpg and sample_o.jpg files in the same directory.

Download

File: rollover.js

Back to previous page / Home