|Below are the image map-specific attributes to use with |
|The name of the map to identify it. To be used with the image's |
|Below are |
|The alternate text to display if images are not supported. This is only necessary if |
|The coordinates outlining the selectable area. When |
|The URL of the hyperlink, if specified. If it is omitted, then the |
|The shape of the |
It is feasible to create an image map's coordinates with for an image with simpler shapes (such as in the introductory example above) with an image editor that shows coordinates (such as GIMP). However, it might be easier in general to use an image map generator, such as this one.
An image maps is an image with clickable areas that usually act as hyperlinks.
To create an image map so that each of the shapes in the image below are clickable:
The code would be as follows:
<img src="http://jaced.com/blogpix/2007/trisquarecircle/002.gif" usemap="#shapes"> <map name="shapes"> <area shape="polygon" coords="79,6,5,134,153,134"> <area shape="rectangle" coords="177,6,306,134"> <area shape="circle" coords="397,71,65"> </map>
You should see that the browser recognizes the areas when the cursor becomes a pointer. See a live demo on JSFiddle, or see a demonstration below: