HTML Image Maps

Image Map Example

Click on different sections of the image below to trigger alerts:

Image Map Example Top Left Rectangle Center Circle Bottom Triangle

Example Code

<img src="image.jpg" alt="Image Map Example" usemap="#sampleMap">
<map name="sampleMap">
  <area shape="rect" coords="10,10,140,90" href="#" alt="Top Left Rectangle" title="Top Left">
  <area shape="circle" coords="220,100,50" href="#" alt="Center Circle" title="Center Circle">
  <area shape="poly" coords="10,110,140,110,75,190" href="#" alt="Bottom Triangle" title="Bottom Triangle">
</map>

HTML Image Map Tags and Attributes

<map>

Defines an image map. Contains one or more <area> elements for clickable regions.

<area>

Defines a clickable region. Attributes include shape, coords, and href.

name

In <map>, links the map to an <img> using usemap.

shape

Defines the clickable area. Options: rect, circle, poly.

coords

Specifies coordinates of the clickable area depending on shape.

href

Defines the link or action when a region is clicked.

alt

Provides alternative text for accessibility or if the image fails to load.

title

Shows a tooltip on hover for additional info.

usemap

In <img>, references the <map> by name.