scary image map alternative

Over at A List Apart Stuart Robertson presents a CSS alternative to image maps which you can see in use at Dead Ends (featuring a choose your own adventure, yeah!)

It's clearly the first take on a new way of thinking about coding artistic experience oriented websites. The design is superb which is why a breakthrough technique was called for, but the implementation falls short on several counts.

First, the XHTML is pretty weak. There are a bunch of anchors left to fend for themselves within unnecessarily nested divs. And those anchors have within themselves <i> tags.

I think the root of the problems comes from not thinking about what structure this list of links should have independent of what it was going to look like. It is, clichéd as it may be these days, an unordered list. The elaborate drawing of a book is the background. The div's are just meaningless containers, we don't need them. The links could have span tags inside them if an image replacement technique was strictly required (it is a nice thought to be different and use <i>, but if you really need a meaningless tag use one). Personally, I would have talked it out with the artist to see if they would compromise on the 2 or so link words that are slightly askew and go with HTML text. Plain text has many advantages. It is re-sizable, selectable, loads first (!important with a heavy site like this), and is readily editable. I'd give it the text-transform: uppercase; treatment, pick a font that anti-aliases in most modern browsers, and do the hover effect with background images. It would be a comprimise, but very worth it.

On to the CSS. My biggest beef here is in the shortcuts used in the positioning of the anchors. All anchors are top: 31px; except for these two which are top: 531px;. The anchors are then individually given their left: properties. This means that when you want to figure out the placement of a single link you have to reverse engineer how it is being positioned. I don't think people have been actually working with and maintaining CSS based layouts for long enough to know which shortcuts will be clear to others (or oneself a month later), and which are overkill attempts at efficiency. Shorthand hex is fine, using 3 rather than 6 digits. Shorthand properties defining top, right, bottom, and left in one declaration are also perfectly usable long term. But spreading the layout aspects of a single element throughout the document just isn't helpful when somebody has to go back in and move something.

There, rant done. Über cool idea, could use a little cleanup before I would show it to the folks back home in Maine on their dial-up connection.