HTML <map> Tag
<img src ="http://www.htmlcodes.ws/images/examples/australia-nz-map.gif" width="200" height="142" alt="Map of Australia and New Zealand" usemap ="#aus-nz"> <map name="aus-nz"> <area shape ="poly" coords ="3,47,45,12,105,7,140,60,120,125,12,90" href ="https://en.wikipedia.org/wiki/Australia" target="_blank" alt="Australia"> <area shape ="poly" coords ="180,85,200,98,167,142,157,138" href ="https://en.wikipedia.org/wiki/New_Zealand" target="_blank" alt="New Zealand"> </map>
How to Use the above Code
- Replace the image details with your own (i.e. replace the values of all attributes with those of your image and image map).
- Replace the image map details (i.e. replace the values of all attributes with those of your image map).
You can use the following shapes with image maps:
Coordinates can be specified in the following ways:
- rect: left, top, right, bottom
- circle: center-x, center-y, radius
- poly: x1, y1, x2, y2, ...
It might take a while to get the coordinates right (i.e. the
coords attribute) but persistence is key.
How Image Maps Work
<map> area represents the image map.
<area> element represents the "clickable" area in an image map.
To create an image map, you need the following elements:
To create an image map, you need to place any
<area> tags inside a
Now, any image that needs to use that image map can do so using the
usemap attribute (its value being that of the image map to use).