16Feb

Improved Unobtrusive Javascript Image Rollovers

Traditional javascript image rollovers are rather unwieldy to implement - they fill up your image tags with code and require lots of hard coding, which makes maintenance a hassle.

However, if you can separate the Javascript from the HTML - i.e. apply it unobtrusively - implementation and maintenance become much easier. Here's how.

This script is a modified version of Chris Nott's image rollover script which is a great unobtrusive rollover script except that it does not provide for an "on-state" - a key requirement if you want to use unobtrusive Javascript for a web site's navigation.

Example

Here's the rollover script example. The rollover effect is done by swapping any image labelled "_off" with one labelled "_on". The on-state is achieved by checking to see if an image label matches the body id, and if it does, leaving it turned on.

Implementation

Implementation is simple. Download the rollover script and link it to your pages.

Create two versions of each navigation image - one for the off-state and one for the on-state. The name of the off-state image should end with "_off" and the name of the on-state image should end with "_on".

For example:

home_off.gif
home_on.gif

Give the body tag for each page an id which matches the name of the image that will be "turned on" when you are on the page.

For example:

If you want the image about_on.gif to display when you are on the About page, then your body tag should be <body id="about">.

Create your navigation (see the rollover script example for more detail), and you're done!

You can also see a real-world implementation of this script on this web site.

Posted on: February 16, 2006 | 12 Comments

12 Comments Posted

You might be interested in this: MIR CSS Image Rollover. Let me know what you think :)

1. Posted by Christian Montoya on February 16, 2006

Christian - thanks for the link. It's definitely one of the better CSS rollover methods.

However, the problem with this technique - and other 'pure CSS' techniques - is that if someone is browsing your site with images disabled they may not be able to see your navigation properly, if at all.

With the Javascript method, if they have images disabled, they will still be able to see and click on the alt attributes, and if they have Javascript disabled, the navigation will still work.

Thoughts?

2. Posted by Christian Watson on February 16, 2006

I think that CSS image rollovers are superior to JavaScript rollovers. I like to use text links with image backgrounds. That way if images are disabled they still see the text. Also, if they are using a text browser like lynx then they'll see all the links also.

You may say that JavaScript provides an on state for one of the navigation buttons. However, I must say that its no much more work to add an "on" id to the current page link then it is to add the id to the body.

Nice article though. I contemplated the technique, but think I'll stick with what I know.

3. Posted by Nick on February 18, 2006

Nick - good points. I agree that if you're going to use text with a background image, then pure CSS rollovers is probably the way to go; especially because you can use the 'sliding doors' method to make the font-size increase.

Re. your second point about using the body id for the on-state; the advantage to doing it this way is that you can put your navigation in an include, so that you don't have to make page-level edits if you ever want to change your navigation or add new options to it. This is a real time saver on large sites!

4. Posted by Christian Watson on February 18, 2006

This is exactly what I've been needing. In most examples, it's best to stick all nav in a server-side include, but then what happens when certain pages need certain button on-states? This script help solves the problem -- mostly.

I say 'mostly' because what if you are only using one HTML template for a 100-page site -- if the body id is the same on every page, how then does the script know which on-state to deploy?

5. Posted by Darren Hoyt on May 06, 2006

Darren - you are correct; this script won't work with a single HTML template. I'm not sure you can get around that without using a content management system.

You need to be able to identify each page individually, otherwise there is no way to do any kind of 'on-state'.

How are you implementing your template? Are you using a CMS?

6. Posted by Christian Watson on May 09, 2006

Currently just using one wrapper template + a php snippet in the content area which outputs whatever the page calls for -- no CMS at this time.

Maybe the body id could be a variable?

7. Posted by Darren Hoyt on May 09, 2006

Ack - sorry, I'm not really sure where to go from here without knowing more about your situation.

You'd probably do better posting on one of the web design / development forums - have you tried SitePoint? They're usually pretty helpful.

8. Posted by Christian Watson on May 10, 2006

This script is great !! Thanks !!!!!!

9. Posted by Bodo Gabor on June 27, 2006

Just to point out that there is a slight bug in this script. If you don't set an id on the body tag, all the images will highlight. If you are also experiencing this problem, look for the following line in rollover.js:

var bodyId = document.body.id;    // ID of the BODY tag

Replace that line with the following code to fix it:

// Check to see if an ID has been set on BODY tag
var bodyId = document.body.id ? document.body.id : null;

I have checked this out on IE5.01 - IE7, Firefox 1.5 and Opera 8.5 so it should be okay to use!

10. Posted by Peter on August 30, 2006

Peter – thanks so much for your improvement to this script! A perfect example of what I love about blogs as a tool for collaboration and learning.

11. Posted by Christian Watson on August 30, 2006

Don't forget to add onfocus and onblur functions for your keyboard-only users ;)

12. Posted by John Faulds on September 06, 2006