Post Archive

› January 19, 2003

Img Rollover

  • Reported by Nate

Simon points us to javascript rollover code that does not invalidate markup, and without adding any extra params. The beauty is it's simplicity - you give your images a specific class (imgover), and put the rollover image version in the same dir as the non-rollover image (with a "_o" in the filename), and the script does the rest. Perhaps this is the answer to validation issues with the otherwise soopa excellent soopa rollovers from youngpup?

Comments

1. January 19, 2003 12:01 PM

Quote this comment

huphtur Posted…

wow.. this one is in the "why didnt i think of that" category. good stuffs.

2. January 19, 2003 12:52 PM

Quote this comment

Nate Posted…

You're right huphtur, I think this is a keeper. Another benifit I didn't mention is that (I think) it's backwards compatible, meaning non-javascript or javascript disabled browsers should have no problems with this way of doing rollovers. They won't display the rollover, but they won't break either. I'd be very curious to hear if anyone finds any problems or issues in using this.

3. January 19, 2003 01:30 PM

Quote this comment

Lon Posted…

issues: 1. dynamically created images. Images that are added by setting innerHTML. They won't work 2. images that need onmouseover/out code will loose their original code What I would do is attach mouseover and mouseout eventhandlers to the document.body, check whether event.srcElement.nodeName equals img and set src accordingly. Works like charm, no initialization required. Don't know if it'll work for all browsers though... I remember vaguely IE Mac does not support attachEvent Whatever, the original solution was pretty good.

4. January 19, 2003 02:11 PM

Quote this comment

Nate Posted…

Lon, if you've got an alternate script to suggest, we can do some mac IE testing here and post it. I haven't run into too many places where I needed to use onmouseover/out events above and beyond rollovers, but I can imagine that some folks would benifit from such a script.

5. January 19, 2003 03:49 PM

Quote this comment

Daniel Nolan Posted…

Dynamically created images could support it surely? Currently the script executes on a document load, but if you are creating images dynamically then its not difficult to use a call to the function again when you create your new image, to rebuild the rollovers, including the dynamically created one? Your suggested mouseover/mouseout could work, but the initialisation would always be required as images need to be pre-loaded, otherwise you get a delay in the rollover image appearing.

6. March 27, 2003 02:47 PM

Quote this comment

Erick Posted…

Hello, Found this page through Google. I dont know you guys but hope you canhelp. I tried this code and while it degrades well in Opera 6 (i.e, no rollover) I also lose my links altogether! I mean, apart from the rollover, I have A HREF tags around the IMG tags, but in opera 6 even the A HREF breaks. Why is this? I thought only the rollover would break? If you have any ideas, kindly drop me a CC to my email address too. Thanks! erick_papadakis@yahoo.com