Categories:

Home / Free JavaScripts / Images & Music / Here

Cut & Paste Image rollover script

Credit: JavaScript Kit

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>

JavaScript Tools:
Site Info

CopyRight 1998-2012 JavaScript Kit. NO PART may be reproduced without author's permission.