/*
Standards Compliant Rollover Script
Author : Daniel Nolan
http://www.bleedingego.co.uk/webdev.php
To begin with you need to load the javascript into a page in the head section of your page. If you place the code into a file called rollover.js then you would include the file as follows
..
Next you will need to add the attribute class="imgover" to any image in your document that requires a mouseover effect to be trigger.
Finally, for any image in your document you will need to create a rollover state for it, the only requirements for this image is that it is named exactly the same as the original image, but it needs _o on the end of the name. The image should also be in the same directory as the original and should be of the same type. So for example you would have sample.jpg and sample_o.jpg files in the same directory.
*/
function initRollovers() {
if (!document.getElementById) return
var aPreLoad = new Array();
var sTempSrc;
var aImages = document.getElementsByTagName('img');
for (var i = 0; i < aImages.length; i++) {
if (aImages[i].className == 'imgover') {
var src = aImages[i].getAttribute('src');
var ftype = src.substring(src.lastIndexOf('.'), src.length);
var hsrc = src.replace(ftype, '_o'+ftype);
aImages[i].setAttribute('hsrc', hsrc);
aPreLoad[i] = new Image();
aPreLoad[i].src = hsrc;
aImages[i].onmouseover = function() {
sTempSrc = this.getAttribute('src');
this.setAttribute('src', this.getAttribute('hsrc'));
}
aImages[i].onmouseout = function() {
if (!sTempSrc) sTempSrc = this.getAttribute('src').replace('_o'+ftype, ftype);
this.setAttribute('src', sTempSrc);
}
}
}
}
window.onload = initRollovers;