Yes, it’s an Image Map

Twitter Updates

HashTags

#PKNsf
San Francisco PechaKucha Night
#IXDAsf
San Francisco IxDA

Blogroll

Given that I’m such a standards zealot that I am debating to even support IE, it might surprise you to notice that the primary navigation on my site is an image map.

Well, it’s true, but this isn’t your father’s image map. First, the image is in an object tag. Second, the image map does not use the area tag, instead it lives as a paragraph with each link marked up as an a tag with the coords attribute. For now, it lives outside of the object tag to remain more accessible to browsers that can’t handle such image maps, but ideally it should be inside—so that it only appears if the image fails to load, according to the object fallback rules of XHTML.

You’ll notice, that Opera 7.23 doesn’t get it (probably due to it missing the change in type for usempa from a URI to an IDREF). And when the page is served to IE as HTML, the image itself is missing, and none of the nested fallback content appears.

And can anyone explain to me how to use :hover effects on this image? I fear the fixed positioning may be screwing it up, but the complex selector that must surely be needed also escapes me. Contat me using editor at this domain—trying to find a spam-proof method of posting my e-mail address will have to wait for next weekend.

2004-03-03 Update: The image map appears to work correctly only on Mozilla. IE fails horribly (as described above), and not even Safari 1.1 gets it.

Author: Peter Sheerin

Peter Sheerin is best known for the decade he spent as the Technical Editor of CADENCE magazine, where he was the acknowledged expert in Computer-Aided Design hardware and software. He has a long-standing passion for improving usability of software, hardware, and everyday objects that is always interwoven in his articles. Peter is available for freelance technical writing and product reviews, and is exploring career opportunities in interaction design. His pet personal project is exploring the best ways to harmonize visual, tactile, and audible symbols for improving the effectiveness of alerting systems.

Leave a Reply