Imagemap magic

I’ve always found HTML imagemaps to be a curiously neglected technology. They seem somehow to evoke the Web of the mid-to-late 90s, to be terribly ‘1.0’. But there’s glue in the old horse yet…

A client-side HTML imagemap lets you associate links (and via Javascript, behaviour) with regions of an image. As such, they’re a form of image metadata that can have applications including image search, Web accessibility and social networking. They’re also a poor cousin to the Web’s new vector image format, SVG. This morning I dug out some old work on this (much of which from Max, Libby, Jim all of whom btw are currently working at Joost; as am I, albeit part-time).

The first hurdle you hit when you want to play with HTML imagemaps is finding an editor that produces them. The fact that my blog post asking for MacOSX HTML imagemap editors is now top Google hit for “MacOSX HTML imagemap” pretty much says it all. Eventually I found (and paid for) one called YokMak that seems OK.

So the first experiment here, was to take a picture (of me) and make a simple HTML imagemap.

danbri being imagemapped

As a step towards treating this as re-usable metadata, here’s imagemap2svg.xslt from Max back in 2002. The results of running it with xsltproc are online: _output.svg (you need an SVG-happy browser). Firefox, Safari and Opera seem more or less happy with it (ie. they show the selected area against a pink background). This shows that imagemap data can be freed from the clutches of HTML, and repurposed. You can do similar things server-side using Apache Batik, a Java SVG toolkit. There are still a few 2002 examples floating around, showing how bits of the image can be described in RDF that includes imagemap info, and then manipulated using SVG tools driven from metadata.

Once we have this ability to pick out a region of an image (eg. photo) and tag it, it opens up a few fun directions. In the FOAF scene a few years ago, we had fun using RDF to tag image region parts with information about the things they depicted. But we didn’t really get into questions of surface-syntax, ie. how to maker rich claims about the image area directly within the HTML markup. These days, some combination of RDFa or microformats would probably be the thing to use (or perhaps GRDDL). I’ve sent mail to the RDFa group looking for help with this (see that message for various further related-work links too).

Specifically, I’d love to have some clean HTML markup that said, not just “this area of the photo is associated with the URI”, but “this area is the Person whose openid is, … and this area depicts the thing that is the primary topic of”. If we had this, I think we’d have some nice tools for finding images, for explaining images to people who can’t see them, and for connecting people and social networks through codepiction.


Published by danbri

Click here to type

Join the Conversation


  1. I think imagemaps are neglected because people don’t see the relevance to the things they mainly want to talk about.

    Visual language is hard to input into computers, even with the GIMP, Inkscape, Tablet PCs, and scanners. Engineers naturally draw diagrams onto paper, but it gets time consuming when you sit at the computer.

    (A word about Tablet PCs: They simply do not have enough resolution. Take something you’ve hand written, or hand-drawn, and then try to reproduce it on a Tablet PC. You simply can’t do it, without drawing big. And you discover that writing big takes longer, and dramatically interrupts the flow of thought. It basically doesn’t work, for visual language. It works for art, because you have the time to zoom in, zoom out, and do detail work. But writing is different.)

    Since Christmas I have been writing “Paper Annotator,” with the idea that I can show people what I mean by “visual language.”

    You can download a slightly old version, and open up the wxPython example.

    I am indeed implementing semantic regions.

    I have a lot to say on this subject; If you’d like to talk, feel free to email me, or call me up (206.427.2545.)

Leave a comment