<img src ="https://www.PuStudy.Com/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 ="http://www.travel-explorer.com/category/places/australia/" target="_blank" alt="Australia">
<area shape ="poly" coords ="180,85,200,98,167,142,157,138" href ="http://www.travel-explorer.com/category/places/new-zealand/" target="_blank" alt="New Zealand">
</map>
You can use the following shapes with image maps:
Coordinates can be specified in the following ways:
It might take a while to get the coordinates right (i.e. the coords
attribute) but persistence is key.
The <map>
area represents the image map.
The <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 <map>
tag.
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).