HTML <map> Tag

The <map> tag in HTML is used to define a client-side image map. An image map allows you to create clickable areas within an image, where each area can link to a different URL. This turns a single image into an interactive element, enhancing user engagement and navigation on your website.

Syntax

<map name="mapname">
  <area shape="shape-value" coords="coordinates" href="url" alt="text">
  <area shape="shape-value" coords="coordinates" href="url" alt="text">
</map>

Attributes

Example

<img src="image.jpg" alt="My Image" usemap="#myMap">

<map name="myMap">
  <area shape="rect" coords="0,0,82,126" href="area1.html" alt="Area 1">
  <area shape="circle" coords="90,58,3" href="area2.html" alt="Area 2">
</map>

More Examples

Basic Rectangular Area

This example creates a clickable rectangular area on an image:

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

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.html" alt="Sun">
</map>

Circular Area

Here, we define a circular clickable region:

<img src="planets.jpg" alt="Planets" usemap="#planetmap">
<map name="planetmap">
    <area shape="circle" coords="90,58,30" href="mars.html" alt="Mars">
</map>

Polygonal Area

This example demonstrates how to create a clickable polygon:

<img src="shapes.jpg" alt="Shapes" usemap="#shapemap">

<map name="shapemap">
  <area shape="poly" coords="10,10,100,10,100,100,10,100" href="square.html" alt="Square">
</map>

Multiple Areas

This example illustrates the usage of multiple clickable areas:

<img src="world.jpg" alt="World Map" usemap="#worldmap">

<map name="worldmap">
    <area shape="rect" coords="0,0,100,100" href="europe.html" alt="Europe">
    <area shape="rect" coords="100,100,200,200" href="africa.html" alt="Africa">
    <area shape="rect" coords="200,0,300,100" href="asia.html" alt="Asia">
</map>

Using target attribute in <area> for new tab

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

    <map name="planetmap">
        <area shape="circle" coords="90,58,30" href="mars.html" alt="Mars" target="_blank">
    </map>

In the above example, when the area representing Mars is clicked, the mars.html will be opened in new tab.

Combining Different Shapes

<img src="complex_image.jpg" alt="Complex Image" usemap="#complexmap">

<map name="complexmap">
  <area shape="rect" coords="10,10,100,100" href="part1.html" alt="Part 1">
  <area shape="circle" coords="150,150,50" href="part2.html" alt="Part 2">
  <area shape="poly" coords="250,10,350,50,300,100" href="part3.html" alt="Part 3">
</map>

Browser Support

Notes and Tips

• The name attribute of the <map> tag must match the usemap attribute of the <img> tag, prefixed with #.
• Each clickable area is defined using <area> elements within the <map> tag.
• The shape attribute of the <area> tag can be "rect" (rectangle), "circle", or "poly" (polygon).
• The coords attribute specifies the coordinates for the clickable area based on the shape:
  • rect: x1,y1,x2,y2 (top-left x, top-left y, bottom-right x, bottom-right y)
  • circle: center-x,center-y,radius
  • poly: x1,y1,x2,y2,...,xn,yn (list of x,y pairs)
• The alt attribute in area tag is used for accessibility and should accurately describe the destination of the link.
• Always provide fallback navigation for users who may not be able to use image maps.
• Consider using responsive image maps that adapt to different screen sizes and resolutions.
• You can use image map generators to help you create complex maps more easily.
• Image maps are beneficial for enhancing user interaction on websites and are compatible with all major browsers.
• The <map> tag itself does not display anything on the page. It is used in conjunction with the <img> tag to create interactive areas on the image.