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:
- Safari does not support image replacement on form elements. Thus, the solution would only work some of the time.
- 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
- 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?
- Add the class “imgover” to the image which you would like the rollover applied.
- 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);
}
}
}
}
November 5th, 2007 at 4:35 pm
Nice little script… though I usually just add some hover:anything support (http://www.xs4all.nl/~peterned/csshover.html) script in an IE conditional comment.
Also, rather than swapping images, sometimes it can be easier to combine the two images into one that is twice the height (or width) and simply adjusting the background-position property — saves having to preload.
July 18th, 2008 at 2:59 am
Hello,
I really don’t see the use of it, as long as you can do it in at least 2 ways with CSS..
1. …is the :hover you already mentioned, and frankly IE6 is soon to be replaced (as IE8 is on it’s way; also, in Safari you cannot make a form out of graphics, so it’ll show up like that anyway)
2. as Al said, use one single image for the rollover, and adjust it’s background-position. Fairly easy and with better support.
And less code, too
Anyway, I apreciate your time for sharing this with us :), thanks.
October 7th, 2008 at 6:30 am
these JS rollovers are useful because you can’t add alt info to a css rollover image. That’s why they’re compliant… technically you shouldn’t use image rollovers; this method lets you get around that
cheers.
Dan
November 18th, 2008 at 5:50 am
Cosmin Says: “I really don’t see the use of it, as long as you can do it in at least 2 ways with CSS..”
If you’re building a product image gallery, do you really want to be editing a verbose css file every time you need to alter the gallery content? Or do you think it makes more sense that your CONTENT (the images in this case) live within the webpage / database set-up?
Use css where it belongs, for styling your site layout. Unless your nav needs javascript transitions, specify nav rollovers in css (using a single image and background positioning on the hover state to aleviate the need for preloading). If an image is CONTENT as opposed to a styling asset, use javascript for its rollover.
November 18th, 2008 at 1:16 pm
Thanks for your thoughts, Dan and aljuk. I concur that an IMG tag is appropriate for content based images. CSS rollovers, although cool and “fancypants”, aren’t really semantic.
I never use the rollover anymore, I use the jQuery library and wrote my own rollover script implementing that. I will be posting that soon, and I will update this post when I do so.
November 18th, 2008 at 1:24 pm
I look forward to that.
November 18th, 2008 at 2:57 pm
Hi again
Indeed, aljuk, you have a point.
However, getting back to the IE6 support…if us, the developers, don’t show the users how bad it is, then who will?
Don’t you think it’s time we supported standards compliant browsers, that will make both our and our clinet’s lifes a lot easier?
All the best!
November 18th, 2008 at 3:36 pm
Don’t get me wrong cosmin - I’m a standards advocate. I think long and hard about semantics and always try for clean and lean. And I hate all flavours of IE with a passion; it’s the bane of my life. IE had me at my desk til 3am this morning writing conditional css statements, replacing my delicious poetic floats with saccharine position absolutes and trying to track down javascript “errors” when my real browsers were happily tucked up in the land of nod.
When I’m working on a personal site or a vanity project I couldn’t care less for IE and I sing it from the rooftops. But I earn my bread as a gun for hire, and my clients have, quite rightly, a different view. For example, I run a site for a European commercial radio station with an 83% IE visitorship, and a site in the Middle East, where the only people with Macs are printers and designers, and everyone uses the browser that comes with their PC.
Now, I can tell those clients how utterly crap their copy of IE5.5 (yes, you read that right) 6 or 7 is and that the code I’ve written is “perfect”, standards compliant, semantic and sexy, but nobody’s interested, and they’ll laugh at me and think to themselves “heh heh funny internet guy, now fix it and make it work…” And the thing is, for each of “us” that feels like this, there are a thousand of “them” who couldn’t care less as long as they can send an email. “But I like IE, it comes with my PC” etc. And, in a sense, they’re right. Why should they care at my distress at having to butcher my code just so IE works…
A pox on your crappy browser(s) Mr Gates.
All the best Cosmin, and pardon my rant Jennifer. Sleep deprivation, the inability to rationalise last night’s css nightmare, and a client asking “is it finished yet?” gets me every time.
November 18th, 2008 at 3:49 pm
I know this got off-topic, but please, just one more comment from my side
aljuk, when I start a project, I clearly specify that I am in charge of the development, and that I decide what’s best for user experience.
This and the right price (which is higher than many others) + quality work, shows that I value my business, I don’t mock it. And the portfolio standing behind me is an argument to what I demand from the customer: understand that he doesn’t know these things as well as I do;
“trust me, I’m here to get you clients, not just to build you a website, or a brand.”
If they still don’t understand, I get to the final solution : conditional JS that pops up a div stating you should upgrade your browser, with link to Firefox
(I know I’m evil :)) )
cosmin_gizmo@yahoo.com is my email, would be glad to keep in touch.
Jennifer, thank you so much for sharing this with us.
It’s not only useful, it also connects people with same frustrations
Cheers from Romania,
Cosmin.