html
/

HTML Image Maps: Clickable Areas on Images

Last Sync: Today

On this page

11
0%
5 min read
Remaining
5 minleft

Click any section to jump — progress syncs automatically

html

HTML Image Maps: Clickable Areas on Images

What is an Image Map?

An image map allows you to define clickable areas on an image, each linking to different destinations.

Basic Syntax

HTMLRead-only
1
<img src="image.jpg" usemap="#map1">

<map name="map1">
  <area shape="rect" coords="34,44,270,350" href="link1.html">
</map>

Area Shapes

ShapeDescriptionCoords Format
rectRectanglex1,y1,x2,y2
circleCirclecenterX,centerY,radius
polyPolygonx1,y1,x2,y2,...

Rectangle Example

HTMLRead-only
1
<area shape="rect" coords="0,0,100,100" href="page1.html">

Circle Example

HTMLRead-only
1
<area shape="circle" coords="150,150,50" href="page2.html">

Polygon Example

HTMLRead-only
1
<area shape="poly" coords="100,10,40,198,190,78,10,78,160,198" href="page3.html">

Complete Example

HTMLRead-only
1
<img src="planets.jpg" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.html">
  <area shape="circle" coords="90,58,3" href="mercury.html">
</map>

Attributes of <area>

AttributeDescription
shapeDefines shape of clickable area
coordsCoordinates of the area
hrefLink destination
altAlternative text for accessibility
targetWhere to open the link

Best Practices

  • Always provide alt text for accessibility
  • Use accurate coordinates for clickable areas
  • Test image maps on different screen sizes
  • Keep clickable areas intuitive and clear
  • Avoid overly complex shapes

Common Mistakes

  • Incorrect coordinates
  • Missing usemap attribute
  • Forgetting alt text
  • Poor responsiveness on mobile devices

Conclusion

HTML image maps allow interactive regions within images. Proper use enhances navigation and user interaction.

Try it yourself

<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="0,0,100,100" href="#">
</map>

Test Your Knowledge

Q1
of 3

Which tag defines an image map?

A
<map>
B
<area>
C
<img>
D
<link>
Q2
of 3

Which attribute links image to map?

A
src
B
usemap
C
href
D
map
Q3
of 3

Which shape uses radius?

A
rect
B
circle
C
poly
D
square

Frequently Asked Questions

What is an image map?

It allows multiple clickable areas within a single image.

Which tag defines clickable areas?

The <area> tag.

What does coords define?

It specifies the position and size of the clickable area.

Previous

html links advanced

Next

html picture srcset

Related Content

Need help?

Explore our comprehensive docs or start a chat with our tech experts.