Description: DOM JavaScript image rollover code makes the process of adding a special image rollover effect to your images easy. This simple cross browser javascript code applies a rollover to any image through just the insertion of a small custom attribute (hsrc) line inside the current image's tag.

Here's an example:  

Tada! The image above just instantly changed between "before.gif" and "after.gif" depending on where your mouse state is!

This JavaScript code works in all DOM (Document Object Model) compliant browsers- IE5+, NS6+, Opera 6+, Mozilla etc. All other browsers will simply see no effect at all. And unlike conventional image rollovers, the image does not have to be hyperlinked in order for the effect to work.

Insert this code into your HEAD of HTML

<script language="JavaScript" type="text/javascript"> /* This Code Free To Use As Long As These Lines Remain */ /* DOM Image Rollover Code */ /* Created by Chris Poole <http://www.chrispoole.com> */ /* Featured at <http://www.DesignerWiz.com> */ /* Development Resource & JavaScript Public Archive Center */ function init() { if (!document.getElementById) return var imgOriginSrc; var imgTemp = new Array(); var imgarr = document.getElementsByTagName('img'); for (var i = 0; i < imgarr.length; i++) { if (imgarr[i].getAttribute('hsrc')) { imgTemp[i] = new Image(); imgTemp[i].src = imgarr[i].getAttribute('hsrc'); imgarr[i].onmouseover = function() { imgOriginSrc = this.getAttribute('src'); this.setAttribute('src',this.getAttribute('hsrc')) } imgarr[i].onmouseout = function() { this.setAttribute('src',imgOriginSrc) } } } } onload=init; </script>

Insert this code into your BODY section

<img src="before.gif" hsrc="after.gif">

How did we do this? We used 2 different images for the mouse over image effect: 

We used this as the before.gif  then we used this as the after.gif

Here's an example: what exactly was added is hsrc line that is second image which is the after.gif (second image)

We then inserted the hsrc code in the image tag that put both tags together to create this rollover:

Step 2: Any image needing a rollover effect simply add the hsrc="after.gif" <-- (which means second image) code line to give the attribute's value to each image needing a rollover effect. Best to use same size images, but not required.

Note that this script accesses the BODY onload event. If your page contains another script that does the same, see dual onload commands here for tips on resolving conflict issues.
Also: It's a good idea to insert preload image command for your second image to be already loaded on viewers browser for instant rollover effect versus on call load command.

Simply Cut and Paste Script code
Be sure to properly place script position in head & body sections of html 

Credit: Chris Poole / Homepage.

This script has been in the DesignerWiz.com Public Library.