Accessible Product Rollover in CSS

The following is a test to duplicate Bob Regan's Flash "Accessible Product Rollover" (See part one and part two) with CSS and animated GIFs (and no JavaScript). I've also posted a web log entry about this experiment.

Macromedia MX

• Dreamweaver
• Flash
• Cold Fusion
• Fireworks
• Freehand
• Director
• Contribute
• JRun

Pro/Cons

Pros

• Renders on all standards-compliant browsers without the need for a plug-in. Renders (though unstyled) on every HTML-capable device including text-only devices like Lynx and mobile devices.
• Web standard languages CSS and HTML can be controlled (and viewed as plain text or otherwise) by using a user stylesheet.
• Keyboard access ('tabbing to' each link) provides same visual feedback as mouse rollover.
• Since they are plain links, you can tab through them as normal. Flash doesn't allow you to 'tab out' of the Flash movie without a rather sketchy JavaScript/ActionScript hack.
• More to be added.

Cons

• Depending on cache settings or other browser/firewall/proxy preferences, animation may be jumpy or may not animate at all.
• Flash version retains pixel precision appearance and behavior given that the user has the right plug-in.
• More to be added.

Differences

Although this demo tries to mimic the functionality of Mr. Regan's Flash movie exactly, there are some differences in appearance. I've tried to note them all here. Please email me if you notice more.

Differences for all implementations

• Spacing between icons is slightly larger on this example than the Flash version. Since the icons are all individual image files, I could not overlap them without negatively affecting the rollover behavior.
• You may note that the icons in the Flash version get larger in proportion to the mouse cursor's proximity therefore allowing multiple icons to scale at once. This CSS version does not have that ability. It can only trigger an animtion to start once the mouse has entered or exited the area.

Browser-specific differences

• Internet Explorer 5 for Mac OS X.
  • Works as expected except the images do not animate every time. Instead, they all show last frame of the animation.
  • The title text of each list item displays beneath the "Macromedia MX" title instead of replacing it. Positioning was not an issue, but it would not recognize the background color so the text appeared to overlap. I chose this method as an acceptable degradation.
• Netscape 7.0 for Windows. Works as expected except the images only animate the first time you roll over them. Works fine in previous builds (Netscape 6.2) and later builds (Mozilla 1.4). Perhaps it's a preference setting?
• Opera 7.10 for Windows. Works as expected except the images do not animate. Instead, they all show first frame of the animation.

Previous Bugs

• Internet Explorer 5 for Mac OS X. Massive display errors to be fixed when I get a chance to work on a Mac. Fixed by defining the list-item's display style as inline-block (CSS 2.1 value) instead of inline. (Note: This causes the W3C CSS validator to proclaim an invalid value error.) Thanks to Philippe Wittenbergh for the fix.
• Internet Explorer 5+ for Windows. The product title does not display on rollover though it does display (inconsistently) when tabbing to the link. I am trying to fix this bug using Eric Meyer's CSS popup example. Fixed by adding a null border. See CSS comments for details.

How it was done...

You can view the source to see any and all code used for this, but I'd like to give a brief "plain English" explanation of the steps involved. Refering to the source while reading this will help with the explanation.

First of all the HTML consists of a page division (div) containing a heading (an h2 element containing the text "Macromedia MX") and an unordered list (ul) containing several list-items with links (a elements inside li elements). Each link then contains a span element with the application title (Dreamweaver, Flash, Cold Fusion, etc.) in plain text. Each one of the list-items also has a unique ID value so I could add the correct image to it. You should be able to get a quick understanding of the HTML by viewing toggling the CSS on this page. Note: You'll need JavaScript for this link to work. Reload the page or click the link twice when you want to refresh the styles.

The images folder contains two animated GIFs for each one of the list-items: A "rollover" image and a "rollout" image. The "rollover" image image animates from a small icon to a large icon. The "rollout" image does the opposite.

Now the CSS. There's a lot to the positioning that I won't get into, but the idea is that each link sits side-by-side and has a size proportional to the size of the animated GIFs. Each of these links' default background image is the corresponding "rollout" image. When a user activated the :hover, :active, or :focus states (pseudo-class state) of the links, I switch the background image to the "rollover" image. Since the plain text title is contained within a child element (span). I can control it separately also based on the parent link's pseudo-class state. I position and hide/show the text below the animated images.

Browsers tested

• Windows XP
  • Mozilla 1.4b
  • Netscape 7.0
  • Netscape 6.2
  • Internet Explorer 6.0
  • Opera 7.10
• Windows 2000
  • Mozilla 1.4b
  • Internet Explorer 5.5
• Macintosh 10.2 (Jaguar)
  • Mozilla 1.4b
  • Internet Explorer 5.2
  • Safari 1.0
  • Camino 0.7

Author: James Craig
Created: May 27, 2003
Last updated: August 30th, 2003