Ever clicked on a specific part of an image and been taken to a different page? That is an image map in action. Instead of one link for the whole image, you can define clickable regions — like a map of the world where clicking each country takes you to its info page.
How an Image Map Works
You need three things: an <img> with a usemap attribute, a <map> element that gives the map a name, and one or more <area> elements that define the clickable regions.
<img src="floorplan.jpg" alt="Office floor plan" usemap="#office-map">
<map name="office-map">
<area shape="rect" coords="34,44,270,350"
href="conference.html" alt="Conference Room">
<area shape="circle" coords="400,200,80"
href="lounge.html" alt="Lounge Area">
<area shape="poly" coords="100,100,180,80,200,160"
href="desk.html" alt="Work Desk">
</map>
Shape Types
There are three shapes you can use for clickable regions:
rect — A rectangle. The coords are left,top,right,bottom.
circle — A circle. The coords are center-x,center-y,radius.
poly — A polygon. The coords are pairs of x,y coordinates for each point: x1,y1,x2,y2,x3,y3,....
<area shape="rect" coords="50,50,200,150" href="room1.html">
<area shape="circle" coords="300,100,40" href="room2.html">
<area shape="poly" coords="20,20,80,20,50,60" href="room3.html">
Getting the Coordinates
To find the coordinates for your image map, open the image in an image editor or use your browser's developer tools. Hover over the image and note the pixel positions. It takes a bit of trial and error, but once you get the hang of it, image maps are a fun way to make interactive graphics.