Night of the Image Map

In this free tutorial, Stuart Robertson shows how to make an old-school image map for navigation, using CSS and XHTML:

"When the other designer sent me his concept for the site, I began to despair. He wanted the page to look like an old weathered book, with rough edges and grungy textures. The menu items were scattered about the page. How could I turn a well-structured document into something that looked so organic? I thought about image maps.

They were horribly outdated, but an image map would make things so much easier than chopping the background image into dozens of pieces and trying to use CSS to stitch it back together. It might have been crazy to think about using them again, but the old ways seemed to hold the answer. I decided to go back into the laboratory and see if I could .."

This article was originally published by A List Apart, and is reproduced by kind permission.

Post mortem

Using large background images isn't bandwidth-friendly, but it can produce compelling designs and give high-bandwidth visitors a richer visual experience. Because CSS image maps use standards-based XHTML, we could use a style sheet switcher to offer a low-bandwidth, alternate view of the site.

Special thanks to Nate Piekos and Shane Clark for their work on Dead Ends, Massachusetts, where the image map and other dark things were brought back from the grave.