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
Attribute | Definition |
---|---|
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
Desktop | |||||
Yes | 12 | 1 | 1 | Yes | 1 |
Tablets / Mobile | |||||
![]() |
|||||
1 | 18 | 4 | Yes | Yes | 1.0 |
Last updated by CSSPortal on: 6th December 2019