Marusya's School Notes

Images: Map

Use the <map> tag to define an image-map, which is an image with clickable areas. The name attribute of the <map> tag is associated with the <img>'s usemap attribute and creates a relationship between the image and the map element. The <map> tag contains a number of <area> tags, with sets of coordinates, which outline the clickable areas in the image-map.

On the ghost image, I've "mapped" three clickable body parts - the left hand, the right hand and the head. Each of these body parts link to different webpage:

HTML file:	Displayed by browser:
<!DOCTYPE html> <html> <body> <p>Click on the ghost's left hand, his right hand, and then on his head, to see what happens:</p> <img src="images/ghost.png" alt="Ghost" usemap="#bodyparts" style="width:256px;height:256px;"> <map name="bodyparts"> <area shape="rect" coords="0,83,112,240" alt="Left hand" href="boo1.html"> <area shape="circle" coords="128,112,100" alt="Head" href="boo2.html"> <area shape="rect" coords="184,130,256,256" alt="Right hand" href="boo3.html"> </map> </body> </html>	Click on the ghost's left hand, his right hand, and then on his head, to see what happens:

HTML file:

Displayed by browser:

<!DOCTYPE html>
<html>
<body>

<p>Click on the ghost's left hand, his right hand, and then on his head, to see what happens:</p>

<img src="images/ghost.png" alt="Ghost" usemap="#bodyparts" style="width:256px;height:256px;">

<map name="bodyparts">
   <area shape="rect" coords="0,83,112,240" alt="Left hand" href="boo1.html">
   <area shape="circle" coords="128,112,100" alt="Head" href="boo2.html">
   <area shape="rect" coords="184,130,256,256" alt="Right hand" href="boo3.html">
</map>

</body>
</html>

Click on the ghost's left hand, his right hand, and then on his head, to see what happens:

Image mapping can seem to be somewhat complicated, but it really isn't! An image map can be so useful, so it's worth learning how to map one.