Image Maps

Image Maps

An image map makes different parts of one picture act like different links!

Imagine a picture of a face. Clicking the left eye goes to one page, clicking the mouth goes to another. That's an image map.

<map> and <area>

• <map>: wraps the clickable areas and gives them a name.
• <area>: defines one clickable spot.
• The <img> connects to the map with usemap="#mapname".

<img src="planets.jpg" alt="The planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="circle" coords="90,58,30" href="sun.html" alt="The Sun">
  <area shape="rect" coords="140,40,200,80" href="mercury.html" alt="Mercury">
</map>

Shapes

<area> supports three shapes:

• circle: coords="cx,cy,r" (center x, center y, radius)
• rect: coords="x1,y1,x2,y2" (top-left and bottom-right corners)
• poly: coords="x1,y1,x2,y2,..." (a list of corner points)

<area shape="poly" coords="10,10,50,10,30,40" href="triangle.html" alt="A triangle">

Always include alt

Every <area> needs an alt too, so screen readers know what each spot links to.

TL;DR

• <map> groups clickable areas; <img usemap="#name"> uses it.
• <area> defines one clickable spot with a shape and coords.
• Shapes: circle, rect, poly.
• Always add alt on areas.