DOM Image Annotation
Flickr, the online photo
organiser application, has some very neat tricks up its sleeve.
Perhaps the neatest is its process of annotating an image by
highlighting specific areas of that image and attaching notes
to them. Very neat. It's done with a combination of DHTML and Flash
stuff. Gina at scribbling.net has put together an
example of how to
do something similar using DHTML. However, her outlined approach,
while nice, requires you to build a special rollover image with the
annotated areas clearly highlighted, and it uses
onmouseout attributes on lots of bits of the code. While
this works, it's not really following the
unobtrusive DHTML that make a script easy to implement. Perhaps we
can slightly improve upon it.
Gina did hit upon the key point, though: marking out various bits of an image has been possible in HTML for ages, using a client-side image map. We've moved away from them to a certain extent these days (well, the CSS-and-web-standards lobby have; they seem to be a mainstay of graphics-heavy commercial table-driven sites still), but they're specifically designed for this purpose. Just to refresh your memory (if such a refresher is needed), this is how an image map works:
The image tag can take a
usemap attribute, like so:
<img src="myimg.png" alt="My image" usemap="#mapname">
usemap attribute points to a map which
demarcates parts of the image:
<map name="imgmap"> <area alt="" title="Buffy mug" nohref="nohref" shape="rect" coords="170,150,210,180"> <area alt="" title="Crap books" nohref="nohref" shape="rect" coords="170,10,320,80"> </map>
Note that the
name of the
<map> is the
same name as that in the
usemap attribute of the original
<img>, except that the
usemap takes a
preceding # symbol.
<map> is composed of
coords and a
can be esoteric things like
concern ourselves only with rectangular
areas here, which have
takes four numbers, comma-separated:
the four numbers are left, top,
right, and bottom: pixel positions,
measured relative to the top-left of the image. Note that this is
not CSS: these are not in the CSS top-right-bottom-left order!
There are plenty of resources out there on the web about setting up
image maps, and indeed programs specifically to construct them given
So, what we want is to have those
areas appear on an image
when we mouse over it.
Like this, in fact:
How do we use it
Much like all the other unobtrusive scripts, you don't need to
do very much to make this happen. You do need to embed the
<img> tag in your page as normal, and construct an
image map and put that in the document too, as described above. Your
image should also have a class of
areas must have a
attribute which is the tooltip that you want to appear when mousing
over that area.
and that's everything. All done.
Nicer titlesNote that the tooltips that appear, associated with each area, are ordinary browser tooltips generated from the
titleelement. While these are serviceable enough, you might want something a little cleverer. The DOM Annotated Images script integrates nicely with my nicetitles: if the NiceTitles script is also included on the page (which it may already be, if you're already using them) then the tooltips for the image annotations will appear as NiceTitles.
Updates to the script
- Explicitly specify that the image must have class
annotated. Thanks to Jeff Gates.
- Updated to take account of text size changes (or other alterations to the flow of the page) after initial load, so that the areas don't get offset. Thanks to Mac Steve.
Stuart Langridge, November 2004