Re-Visiting the Image Map

in 2007

[rocknbil]

There are many articles discussing why not to use image maps, most of them centering around accessibility. The two simple workarounds are of course using alternate links in the same page and a rich visible sitemap.

Another concern seems to be that SE's don't, or didn't, index the links in the <area> elements. But I've also found conflicting information even on this that says they do.

CSS "image maps" only create rectangular areas. In my recent example, I encountered a very Dionesian, artsy image that did not lend to rectangular interpretation very well.

But still, I tried. :-) I applied CSS image mapping, and the result was something out of Frankenstein's CSS lab with more floats than a soap derby and more clears that an Army demolitions exercise. It worked but the CSS was bloated, and it made very little sense to implement it in this way. A comparative example is the "CSS rounded corners" as opposed to just a few small images to emulate rounded Zen.

So I went back to an old-school client-side image map. This image is not a vital navigation element, there are a number of other ways to access the links and provide food for the SE's, so in my context it's not a problem.

But what is the current state of our pretty and old click-a-ado friend, the image map?

[londrum]

funnily enough i was reading a book about this today. it's quite a new book as well, came out this year - written by some Yahoo guy who works for the team responsible for speeding up their site.

he recommended using an image map in place of multiple images, because it will reduce the number of HTTP requests, speeding up the page display.

you can do that kind of thing with CSS background sprites though, which seems much better to me.

[tedster]

Another concern seems to be that SE's don't, or didn't, index the links in the <area> elements. But I've also found conflicting information even on this that says they do.

They do index, but cautiously. One spam trick for hiding urls has been to place them in an image map at coordinates that are beyond the boundaries of the image. So it's not likely to see backlink juice passed through a image map, but you may see such urls being used for discovery by the search engines.

As long as there is a alternate path to the url (important for accessibility as well as indexing) I would rather use regular html image maps when they're needed (which is rarely) so that I have the option to use the "circ" and "poly" values for the shape attribute.