Cut & Paste Image rollover script
|
Description: This is a small, compact JavaScript that lets you easily assign a rollover effect to any image on the page. A rollover effect describes switching an image to another when the mouse rolls over it, then back when out. The script preloads both images involved for a smooth transition.
Example: 
Directions
Step 1: Add the following code to the HEAD section of your page. You should also download imagerollover.js (right click, and select "Save As"), the external file this code references, and upload it to the same directory.
Step 2: Then, to give any image on the page a rollover
effect, insert inside its tag the "data-over" and "data-out"
attributes that's
set to the image paths of the over and out (default) images. For example:
<img src="default.jpg" data-over="out.jpg" data-out="default.jpg" />
or:
<a href="http://www.javascriptkit.com"><img src="http://mysite.com/off.gif" data-over="http://mysite.com/on.gif" data-out="http://mysite.com/off.gif" /></a>
Last but not least, you must call the following code snippet at the very end of your page (ie: right above the <body> tag) to activate the effect:
<script type="text/javascript">
//Following function should be called at the end of the page:
imagerollover()
</script>
HTML Validation
The above script takes advantage of HTML 5's "data" attribute. For pages that use this script, if you wish it to validate, you should insert at the very top of your page the recommended HTML 5 doctype, which is:
<!DOCTYPE HTML>