Sometimes you want a image to have sensitive areas that will have different behavior. This is done with so-called HTML Image Map. Here's a example.
Move your mouse over the little black dot of the guy's eye in the last image. (then, a alert box will popup.)
The key to do this is by the tag “map”, and inside it you can have several “area” tags, which can have attributes of “shape”, in which you can specify “circle” and using the “coords” to specify its center, radius. You can also define other shapes such as a rectangle or any other shape by giving a list of coordinates. Each of these “area” tag can have a link or any other DOM event, so that one can control what happens when a area is clicked or moused over. (View Source to see the code.)
(artwork by Nicholas Gurewitch. See Art Of Nicholas Gurewitch)
Reference: http://www.w3.org/TR/REC-html40/struct/objects.html
Related essays:
Page created: 2005-11. © 2005 by Xah Lee.
