HTML <map> Tag

Description

The <map> HTML element serves as a container for the <area> elements that define the active areas for image maps. Such areas set invisible areas in the image, which are links to HTML documents. The purpose of using <map> is to associate an <img> element with a client image map. This relationship is determined by the use of a single identifier both in the <img> specified by the usemap attribute and in the <map> set by the name attribute.

Properties

Permitted Parents

Any element that accepts phrasing content

Content

Block and <area>

Start/End Tags

Start tag: required, End tag: required

Example

<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>

Attributes

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

Desktop
Yes	12	1	1	Yes	1
Tablets / Mobile
1	18	4	Yes	Yes	1.0

Last updated by CSSPortal on: 6th December 2019