Image maps (<map>, <area />)

Image maps are used in combination with <img> element and allow users to click on a specified region of an image and execute certain action with it.

The image maps can be a client-side image map or server-side image map.

The area element is a child element to the <map> (image map) element and it specifies the shape and coordinates of desired region within an image.

Coordinates depend on the shape of the chosen region and are relative to the top-left corner of the object.

The image maps are very popular with online maps. For instance a geographical map of U.S.A. that has states divided as image map regions which lets visitors follow the links by clicking on a particular state.

Area is an empty element, therefore the closing tag is forbidden.

Syntax:

<map name=""><area shape="" coords="" /></map>

Attributes:

id, class (document-wide identifiers)
lang (language information), dir (text direction)
title (element title)
style (inline style information)
alt (<area />) (alternate text)
name (<map>) (elements name)
shape, coords, nohref, usemap (<area />) (image area specific attributes)
href (anchor reference)
target (<area />) (frame target information)
tabindex (<area />) (tabbing navigation)
accesskey (<area />) (access keys)
onfocus (<area />), onblur (<area />), onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (intrinsic events)

Example

HTML image map elements:

<html>

<head>
<title>HTML tutorial</title>
<style type="text/css">
img {
	border:2px groove white;
	width:300px; height:200px;
}
</style>
</head> 

<body>

<h4>This image has 3 regions to click on, find them:</h4>

<img src="../../../img/tutorials/imgmap_ex1.png" alt="Car buying instructions :)" usemap="#parts" />

<map name="parts">

<area shape="rect" coords="225,35,265,85" href="#" alt="Antenna" title="Found antenna!" />

<area shape="poly" coords="100,60,122,90,115,80,108,90,100,82,110,74,100,60" href="#" alt="Wheel" title="Found steering wheel!" />

<area shape="circle" coords="59,162,20" href="#" alt="Tire" title="Found front tire!" />

</map>

</body>

</html>

›› go to examples ››

Image maps (<map>, <area />)

Syntax:

Attributes:

Example

HTML image map elements:

Comments

About

Contact

Get Connected