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.
And this is DOM Image Annotation, written , and concerning Uncategorized
Comments
Mac Steve
sil
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?
sil
I lied. It was easy to fix, and is now fixed. Thanks for the tip, Steve: it now works!
Phil Wilson
Want to do some work on Kanzaki’s image annotator script so the image map can be dynamically generated? That would be great!
sil
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 :)
sil
(er, Phil, not Pail…)
Roberto
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.
pascal
Uh. Looks pretty ugly with IE… you could use the filter-“CSS“, too, so IE-Users won’t see just white Rectangles…
pascal
oh, sorry – it is already using filter – my [...] IE just ignores it?!
sil
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 filter stuff just didn’t work in that environment…
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/