Anne van Kesteren

Image maps

I'm too busy to post everyday, like I used to do a couple of months ago. It seems to me that less interesting stuff happens on the internet, although I think that is just me, being less interested in the web. Now, going on with the writing I start yesterday, I feel that I don't find it necessary to post anymore, which is quite a relieve, since I can start to read more interesting stuff in my free time, instead of looking for something to post. (I don't stop posting.)

Back on subject: image maps. The web needs them, but they should probably be moved towards CSS. Think of an unordered list of links (preferable in XHTML 2.0 format :-P), which can become an image map by applying some easy styles to it. Trying:

nl{
 image-map:url(map.svg);
}
nl>li#about:link{
 shape:circle;
 coords:2em 2em 5em;
}
nl>li#about:link:hover{
 content:url(about_h.svg);
}
/* etc. */

It would be as easy to use as the HTML syntax and fully backwards compatible. Current browsers would display it like Netscape Navigator 4.x (forgetting about the fact that no browser supports the HREF attribute on other elements).

Comments

  1. Yes, you don't need imagemaps, and yes, you can replace them with lists. Yet you do not have to wait for href to be supported for any element. If you are willing to live with anchors within list items, you have imagemap-less imagemaps today, just as you had them yesterday.

    M.

    Posted by Moose at

  2. Addendum:

    I wish you elaborated more on why the web needs imagemaps. What was so funny, or even useful, about images where you knew (if you were lucky) that there were some anchors hidden, but had to chase a wild goose to guess where each was hidden.

    Perhaps imagemaps have a minimal requirement of low blood pressure that I never satisfied...

    M.

    Posted by Moose at

  3. Well, I think that designers need them for decoration. The biggest advantage of the image map is that you can decide the clickable region.

    Having a map, which I think is a perfect example for an image map it will be impossible today doing that with a normal list. You can 'position:absolute' every single LI element, but the clickable region of the different countries or cities will overlap each other, something that won't happen using image maps.

    But maybe we should just have a property to declare the clickable region of an element instead of image maps.

    Posted by Anne at

  4. Not quite. If we speak of absolute positioning, it is trivial to disentangle them, and besides, anchors within list items can be further disentangled without the possibility of overlap.

    More, there is a unique possibility of visually marking clickable areas. With imagemaps, this is hard. I made one experiment about this once, and you can color and style areas to some extend, and position them using CSS, but only if you agree with rectangular shapes being the only survivors of CSS attack.

    You can use tiny image flags as backgrounds of cleverly positioned anchors, or use image generated content. A map of Austerlitz battlefield would be easy to do. And the user would know where the darned areas are.

    I was a little calf when I last saw an example of a legitimate imagemap. To me, navigation menus with imagemaps are about as attractive as a pile of cheddar...

    M.

    Posted by Moose at

  5. I agree that image maps can be improved, but I think there is use for some equivalent in CSS. Being able to define what is clickable would be enough I think. And if image maps will be "converted", they certainly need some upgrades, like :hover!

    I just noticed this really cool think: Rollover Map.

    Posted by Anne at

  6. Yes, that rollover map is exactly what I had in mind. Very clever! It's so nicely done that I'll abandon my attempt at a demo :)

    There is one weird server-side imagemap I know of that is useful: my friend's Stonegnome Acousmatic Selector. It is not easy to use, but then such was the intent...

    M.

    Posted by Moose at