<img src ="../picture/imageMap.jpg" alt ="imageMap" usemap ="#testmap"> <map name ="testmap"> <area shape ="rect" coords ="250, 264, 630, 607" href ="./laptop.html" alt ="laptop"> <area shape ="circle" coords ="740, 566, 38" href ="./mouse.html" alt ="mouse"> <area shape ="" coords ="" href ="" alt =""> </map>
The only difference from other images is that you must add a usemap attribute. The usemap value starts with a hash tag # followed by the name of the image map, and is used to create a relationship between the image and the image map. You must also define some coordinates to be able to place the clickable area onto the image. The coordinates for shape="rect" come in pairs, one for the x-axis and one for the y-axis. So, the coordinates 34,44 is located 34 pixels from the left margin and 44 pixels from the top: