I'm exploring ways to use XHTML / CSS to add callouts to a graphic that has been imported into a page without callouts.

The following site illustrates some good and not-so-good callouts:


What I'm hoping to do is import an image into a page, then use XHTML / CSS to surround that image with callouts that identify elements within the graphic. The goal is that if the graphic is changed, say for purpose of translating the page into another language, the callouts are unaffected insofar as they're part of the page, NOT part of the graphic.

My supposition is that achieving this will require Float and Z-Axis, although I'm not sure.

The key is that I want to use CSS / XHTML if possible. I'm not necessarily averse to JavaScript or a library like jQuery, although I'd rather use CSS / XHTML alone, if possible.

Any ideas or resources, please?

Also, is there any reason that this is not generally done? That is, the "solution" ends up being so complex and un-maintainable that it's not worth the effort…(?)

Cheers & thanks,