Notes

Define a clickable interactive map over an image with

Edit on GitHub

Web Development
4 minutes

tl;dr

1<map name="primary">
2  <area shape="circle" coords="75,75,75" href="left.html" />
3  <area shape="circle" coords="275,75,75" href="right.html" />
4</map>
5<img usemap="#primary" src="http://placehold.it/350x150" alt="350 x 150 pic" />
  • in an <img> tag, specify the usemap attribute and provide the name of whatever map you want to use, for example #world-continents
  • define a map with the <map> tag. Each map takes an <area> tag with shape, coords and href attributes
  • shape could be a rect, circle or poly. The amount of coords provided and their placement depends on the shape
  • rect takes x,y positions of all four corners in a clockwise manner, starting from top-left
  • circle takes x,y positions at the the horizontal middle of circle and radius (half the width of circle)
  • poly can make pretty much any shape you want. It takes sets of x,y positions.

Notes

  • You can use an image editing program with Rulers visible to find the x and y coordinates in a picture. Photoshop, Sketch or even Microsoft Paint will do.
  • Polygons are really easy to draw with this online tool
  • In Sketch it’s really easy to pinpoint coords for rectangles, just look in the top right. For circles, get the x and y and add half of the size to each to get the exact coords
  • Watch this tutorial to learn how to easily find positions with the Info panel (Window > Info (F8)) in Photoshop
  • The image maps are NOT responsive. If an image gets shrinked due to less space or whatever reason, it messes up the coordinates (as they are fixed pixels, not percentages). To get responsive maps you’ll need to use a plugin
  • Alternatively you can use an svg instead of an image map, svg will be responsive as well. example
  • Right clicking any shape highlights the shape outline

Demo 1

Every continent links to a different corresponding article on Wikipedia

World Continents 
 1<img
 2  src="./images/world-continents.png"
 3  alt="World Continents"
 4  width="320"
 5  height="160"
 6  orgwidth="320"
 7  orgheight="160"
 8  usemap="#world-continents"
 9/>
10
11<map name="world-continents">
12  <area
13    title="North America"
14    href="https://en.wikipedia.org/wiki/North_America"
15    shape="poly"
16    coords="48,89,67,69,77,49,140,0,68,0,6,10,4,31,16,69"
17  />
18  <area
19    title="South America"
20    href="https://en.wikipedia.org/wiki/South_America"
21    shape="poly"
22    coords="48,88,61,74,119,99,95,160,66,159"
23  />
24  <area
25    title="Europe"
26    href="https://en.wikipedia.org/wiki/Europe"
27    shape="poly"
28    coords="124,49,145,46,158,50,187,43,198,6,146,1,115,21"
29  />
30  <area
31    title="Africa"
32    href="https://en.wikipedia.org/wiki/Africa"
33    shape="poly"
34    coords="121,53,140,47,169,51,186,77,196,80,188,137,156,136,138,97,118,86"
35  />
36  <area
37    title="Asia"
38    href="https://en.wikipedia.org/wiki/Asia"
39    shape="poly"
40    coords="166,50,184,77,201,74,215,91,258,108,263,87,283,74,297,8,192,3,191,29,187,46,170,42"
41  />
42  <area
43    title="Australia"
44    href="https://en.wikipedia.org/wiki/Australia_(continent)"
45    shape="poly"
46    coords="257,107,263,85,314,89,316,137,294,151,249,132,248,114"
47  />
48</map>

Demo 2

Every frame links somewhere different codepen

Usemap Example Frames 
 1<img
 2  src="https://image.ibb.co/juLDmF/usemap_frames.png"
 3  alt="Usemap Example Frames"
 4  usemap="#Map"
 5  width="795"
 6  height="509"
 7  orgwidth="795"
 8  orgheight="509"
 9/>
10<map name="Map" id="Map">
11  <area title="Yellow area" href="#circle" shape="circle" coords="187,81,50" />
12  <area title="Green area" href="#green" shape="poly" coords="383,46, 484,46, 485,192, 385,192" />
13  <area title="Orange area" href="#orange" shape="poly" coords="549,67, 643,67, 643,162, 550,162" />
14  <area title="Blue Rectangle" href="#blue" shape="poly" coords="502,222, 643,222, 644,287, 502,287" />
15  <area title="Purple area" href="#purple" shape="poly" coords="545,432,610,307,692,431" />
16  <area
17    title="University badge"
18    href="http://referrals.trhou.se/aamnah"
19    target="_blank"
20    shape="circle"
21    coords="167,287,95"
22  />
23  <area
24    title="JavaScript Badge"
25    href="http://referrals.trhou.se/aamnah"
26    target="_blank"
27    shape="poly"
28    coords="396,245,313,290,307,303,307,382,314,396,396,441,479,398,487,383,488,305,478,288"
29  />
30  <area
31    title="Oval area"
32    href="#oval"
33    shape="poly"
34    coords="266,138,274,110,286,89,297,80,308,76,318,81,327,88,333,98,338,111,344,124,346,138,347,158,346,177,344,196,338,214,330,228,321,242,306,246,296,243,286,234,276,220,268,190,266,167"
35  />
36</map>

shape

There are three shapes you can draw, rect, circle and poly. How many coords you provide depends on the shape you want. a set of x and y define a point on the map, multiple sets means multiple meeting points.

  • rect takes 4 sets of x an y (top-left, top-right, bottom-left, bottom-right)
  • circle takes x, y and radius (along the horizontal middle of the circle)
  • poly takes as many sets of x,y as you want

rect

1<!-- x,y (top-left), x,y (top-right), x,y (bottom-left), x,y (bottom-right) -->
2coords='383,46, 484,46, 485,192, 385,192'

circle

1<!-- x, y, radius -->
2coords='187, 81, 50'

poly

With poly you can make any shape you want.. a pyramid, octagon or even someone’s head (see Seth Godin’s site, he wants you to click on his head to go to his blog..)

An example of image map, Seth Godin’s head to go to his blog

The coords for poly are sets of x and y positions.

1<!-- x,y, x,y, x,y, x,y, x,y, x,y, x,y -->
2coords='257,107, 263,85, 314,89, 316,137, 294,151, 249,132, 248,114'

actually has 7 sets of x,y positions. You can write them with spaces for better legibility.

Browse all topics