DOM Image Annotation
A new script and description: DOM Image Annotation. This describes how to achieve Flickr’s neat trick of annotating bits of an image with a box and a tooltip through simple unobtrusive DHTML.
This is a minor celebratory script, since I have now (wait for it, wait for it) finished writing the book! Well, nearly all; I’ve done all the technical bits. The introduction and stuff remains to be done, but all the hard and useful stuff is out the way. No, I still don’t know a publish date. But this script came to mind in an instant after reading about Gina’s image annotation, and so I put it together.
This is very nice. However I found the annotations are likely to be offset if text size is changed. Have a look at the following screenshot
http://flickr.com/photos/mac/1363730/
-12061 seconds later
Ouch. Not sure I can easily fix that. The annotations are absolutely positioned, which means that if the image moves around after the annotation nodes are created, it’ll break. Hm. I suppose I could calculate them on the fly each time you mouse-over the image; I wonder how much more slow that would make it?
-11701 seconds later
I lied. It was easy to fix, and is now fixed. Thanks for the tip, Steve: it now works!
-11041 seconds later
Want to do some work on Kanzaki’s image annotator script so the image map can be dynamically generated? That would be great!
-5521 seconds later
Pail: Interesting. I’ve got some reservations about the usability of that script; for a start, you can’t delete an annotation without starting again, which is pretty darn annoying. I’d be loath to create a DHTML application which wasn’t easy to use….but I’ve been thinking about writing an image annotator, I must admit :)
-4861 seconds later
(er, Phil, not Pail…)
-4861 seconds later
Sweet! One step closer to the perfect photo gallery. :-)
I have a friend who already did a DHTML image annotator, but never released the source code (as he had promised to do). I’ll talk with him again.
4 days later
Uh. Looks pretty ugly with IE… you could use the
filter-“CSS“, too, so IE-Users won’t see just white Rectangles…5 days later
oh, sorry – it is already using
filter– my [...] IE just ignores it?!5 days later
Hm. It should work in IE. It’s a bit difficult to test here, because I’m using IE as emulated by Wine, so I assumed that the
filterstuff just didn’t work in that environment…5 days later