Neatly Sliced

Courtesy of Daniel Nolan, I found this handy little rollover JS to add rollovers for all your images. It is standards compliant and will not invalidate your HTML. It also majorly cuts down on the bulkiness of your HTML, eliminating the inline JS that is so common on sites nowadays for image rollovers.

Why not just use pure CSS?

CSS allows use of the :hover pseudo-class to swap images. This eliminates nasty inline javascript nonsense to accomplish the same thing and even works with JavaScript disabled. Why not use this method?

I asked myself the same question. There are two answers:

1. Safari does not support image replacement on form elements. Thus, the solution would only work some of the time.
2. IE6 only supports :hover on anchor tags. “Who cares?” you ask. Well, clients who pay money for their sites to work for the largest audience possible care. And, people who don’t upgrade their machines care. So, anyone with IE6 would lose the image rollover. Isn’t that sad? Especially when you can include them so simply?

How to use it

1. Have a consistent naming convention for your image (and its rollover)

   For example, name your image myimage.jpg, and your rollover myimage_o.jpg. The JS function handles the rest. It even handles the image preloads. Isn’t that nice?

2. Add the class “imgover” to the image which you would like the rollover applied.
3. Include the rollover.js file in your site template. If you have a whole bunch of functions executing on the window.onload, delete that line from the bottom of rollover.js and add initRollovers(); to your preload function.

I made a minor addition to include inputs of type “image”, as it was hugely cumbersome to me on a site that already had these implemented. My addition is copied below:

var aInputs = document.getElementsByTagName(’input’);

for (var i = 0; i < aInputs.length; i++){
if(aInputs[i].className == ‘imgover’){
if(aInputs[i].getAttribute(’type’) == ‘image’){
var src = aInputs[i].getAttribute(’src’);
var ftype = src.substring(src.lastIndexOf(’.'), src.length);
var hsrc = src.replace(ftype, ‘-over’+ftype);

aInputs[i].setAttribute(’hsrc’, hsrc);

aPreLoad[i] = new Image();
aPreLoad[i].src = hsrc;

aInputs[i].onmouseover = function() {
sTempSrc = this.getAttribute(’src’);
this.setAttribute(’src’, this.getAttribute(’hsrc’));
}

aInputs[i].onmouseout = function() {
if (!sTempSrc) sTempSrc = this.getAttribute(’src’).replace(’-over’+ftype, ftype);
this.setAttribute(’src’, sTempSrc);
}

}
}
}

This entry was posted on Saturday, January 6th, 2007 at 1:41 am and is filed under CSS, JavaScript, Web Dev. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.