Cut & Paste Image rollover script
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 "
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" />
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:
//Following function should be called at the end of the page:
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: