[Wsuug] JavaScript Rollovers and New Window Done Right?

[Zach Young]

I've been working out some functions to help keep ugly JavaScript out
of my pretty XHTML markup. I've made two so far, and I wanted to get
some input on them (especially the rollover one) from a Web standards
and usability perspective. These use MooTools, but it shouldn't be
hard to adapt them to any JS framework.

1. Rollovers - Links start as text links. Then with JavaScript, I get
links with a class of 'rollover' and convert them to images. The id of
the link tag ends up being the base of the image and the text that
started out in the link becomes the alt text for the image. Two events
are added for mouseover and mouseout.

This is mostly solid, but I'm wondering what all of you think about
starting with text links and upgrading to images. I'm not attached to
this idea; I just figured since I was already doing all this magic I
might as well go all the way for the demo. It is an interesting
option, but I wanted some other perspectives on it. I'm pretty sure it
would be fine for an SEO standpoint (I'm not duping anyone, the images
and alt text match the link text), but what about for users without
JavaScript? They would just get text whereas before they would have at
least gotten an image. The advantage would be that I could style the
text links so that the user without JavaScript could tell they were
links (with hover,active,visited,etc. CSS styles.) Anyways, thoughts?

2. New window - I'm pretty sure this is fine. The only problem I can
see is that if someone doesn't have JS, the link will open in the same
window. But I'd rather keep any target business out of my XHTML. This
function looks for links with the class of ''newWindow' and adds
onclick events that make them open in a new window.

Demos of both can be found here:
http://www.zachyoung.org/lab/research/rollovers-new-window.html

The first two are just rollovers and the last two are rollovers that
open in a new window. The images load slow if you have your cache
disabled, but I can work that out later. This is just a proof of
concept demo. Last I checked it worked in IE6/7 and FF2, but I'm not
really worried about that yet. I can worry about cross-browser issues
later.


Thanks,

Zach
zachyoung.org