Image Rollovers

Mouse over this image and see what happens. To use this tutorial, all you do is make two images: before hovering, and after hovering.

Put this code in your header.

<script type="text/javascript"> /**************************************************** * DOM Image rollover: * by Chris Poole * http://chrispoole.com * Script featured on http://www.dynamicdrive.com * Keep this notice intact to use it :-) ****************************************************/ 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>

Now, for the images. Use this code and replace before hover and after hover with the image names.

<img src="IMAGE BEFORE HOVER" hsrc="IMAGE AFTER HOVER">

<-back