XHTML compliant JavaScript rollovers

I recently ran into an annoying JavaScript problem when redesigning webspiffy so I thought I’d share. You see the nice icons to the left of this article that displays text that changes depending on what icon you are hovering over? Well, that little feature took me a while.

Yes it’s a normal JavaScript rollover like you’ve probably seen on a bunch of other web sites. However, mine validates in XHTML 1.1. That’s because I use a new JavaScript trick that most people don’t think to incorporate. I use the getElementById method, which relies upon the “id” tag instead of the “name” tag. This is great because “name” is deprecated in XHTML 1.1.

If you take a look at the source code under “Center Column” you’ll see a JavaScript command navbar(). Refer to /navbar.js and you’ll see how this script works on the site. If you are interested in putting DOM compliant image rollovers on your own site, I recommend you use this modified script.

I’ve since updated the layout of the web site and no longer use the Center Column navbar as described above. However, I’ll soon post the code to aid my fellow webdesigners. The only problem is that the code is at my apartment in Los Angeles and I’m currently in Mill Valley. That will be fixed on Friday.

Related articles

• W3C Archive: www-html: Baris Sahin: ID and Name.
• A List Apart: CSS Rollovers.
• DHTML Kitchen: Swapping Images.
• Jeffrey Zeldman Presents: The Daily Report. “When in doubt, refresh this page…enough about CSS.”

Or, modify the famous Adobe PhotoShop / ImageReady JavaScript to use getElementById(), like below [and use the standard call to changeImages() and preloadImages() on the front-end like we've all been doing for 3 years]:

// RussBrooks.com Rollover Functions
// with XHTML Strict compliancy using getElementById()

// by: Russell Brooks

function newImage(arg) {
    if (document.images) {
        rslt = new Image();
        rslt.src = arg;
        return rslt;
    }
}

function changeImages() {
    if (document.images && (preloadFlag == true)) {
        for (var i=0; i

var preloadFlag = false;
function preloadImages() {
    if (document.images) {
        nav_life_on = newImage("/images/nav_life_on.gif");
        nav_photos_on = newImage("images/nav_photos_on.gif");
        nav_art_on = newImage("/images/nav_art_on.gif");
        nav_work_on = newImage("/images/nav_work_on.gif");
        nav_books_on = newImage("/images/nav_books_on.gif");
        nav_links_on = newImage("/images/nav_links_on.gif");
        preloadFlag = true;
    }
}

I just used you idea for using “getElementById”. I know nothing about javascript, but i used a script for a calender, that i downloaded years ago, in a page i am doing for an assignment. Our page has to validate xhtml1.0, but i kept getting an action error for:

but by putting it as

the page validated and the script still worked.

Many thanks

Mike, I’ve run into the exact same problem: I realize that ID replaces name attribute in strict XHTML, but if I just replace the name tag with ID tag, then the Javascript rollover won’t work.

Have you posted the code that you refer to, in the original post about XHTML-compliant javascript rollovers?

Much thanks!!!

(I’ve only posted a temporary index page to above URL, so, if anyone is interested, you can see what the problem is — the javascript is on the thumbnails on the bottom, on thumbnail 2 and 3 i.e. the grey ones after the colourful 1st one).

by the way, just thought I’d tell you while I’m at it: I love the design of your site!!!

Just an open question? Are there ever occasions when using Javascript for image rollovers might be preferable to CSS? For what particular situations?

Yes. When you want to rollover multiple images at once. This currently can’t be done with CSS.

I’ve started to rely on CSS instead of JavaScript for rollovers. I’ll look into it though.

Yes, I use CSS for rollovers for the main and global navigation.

But, in this case, I thought it could perhaps make it unwieldy: I have got these different thumbnail images, for each section of a large portfolio – so there are lots and lots of thumbnails. Each thumbnail has a black and white version, and a coloured version.

I was planning on having separate javascript rollovers files for each section. On the other hand, I guess I could do the same thing for CSS and have a separate rollovers CSS file for each section.

Which would be better? see: http://www.subminimal.ca (just one page is here i.e. no linking to other pages yet, although the CSS effect is there)

My current rule of thumb is that if it can be done with CSS instead of JavaScript, then that’s the way to go.