HTML <map> Tag

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The <map> element in HTML is used to define an image map, which is a collection of clickable areas on an image. Each clickable area can link to a different destination, making it possible to turn a single image into multiple interactive regions. The <map> itself does not display anything visually on the page; it serves as a container for defining the clickable areas through <area> elements.

The <map> tag is commonly paired with the <img> element using the <usemap> attribute, which references the name of the <map>. This creates a connection between the image and its defined interactive regions, allowing users to click on specific parts of the image to navigate to different URLs, trigger JavaScript actions, or perform other interactions.

Typical use cases for <map> include:

Navigational graphics: Creating a map or diagram where different regions link to specific sections of a website.
Interactive diagrams: Allowing users to click on different parts of an illustration to reveal information or trigger events.
Games or educational tools: Creating clickable areas on images for quizzes, puzzles, or learning exercises.

The <map> element improves the accessibility and functionality of images, enabling developers to turn static images into interactive and informative components without breaking the layout. When used correctly, it ensures that all defined areas are clickable and that the experience works across devices that support mouse or touch interaction.

Properties

Permitted Parents: Any element that accepts phrasing content
Content: Block and <area>
Start/End Tags: Start tag: required, End tag: required

Example

HTML

<img alt="Shapes" height="102" src="images/shapes.jpg" style="border: none;" usemap="#shapes" width="375" />

<map name="shapes" id="shapes">

  <area shape="circle" coords="58,50,40" href="javascript:clicked_on('circle');" title="Circle" alt="Circle"/>

  <area shape="rect" coords="136,11,227,89" href="javascript:clicked_on ('rectangle');" title="Rectangle" alt="Rectangle"/>

  <area shape="poly" coords="309,13,358,89,257,89" href="javascript:clicked_on('triangle');" title="Triangle" alt="Triangle"/>

  <area shape="default" nohref="nohref" title="Default" alt="Default"/>

</map>

<script>

function clicked_on ( clicked_shape )

{

	alert ( "You clicked on the " + clicked_shape );

}

</script>

Result

Editor

Attributes

name: Assigns a name to the image map.

Global Attributes

The <map> tag also supports the Global Attributes in HTML5

Event Attributes

The <map> tag also supports the Event Attributes in HTML5

Browser Support

The following information will show you the current browser support for the HTML <map> tag. Hover over a browser icon to see the version that first introduced support for this HTML tag.