Image Maps

Images can be used to define a link.

<a href="page.html">
<img src=logo.jpg"></a>
<a href="page2.html">

<img src=logo2.jpg"></a>

Here single link is attached to each image.

Image Maps
The image map allows to define multiple links using a single image.

* Add usemap attribute to the <img>..</img> element. The value of the attribute starts with the '#' symbol and followed by map identifier.
* Insert the map, use <map>..</map> element. The required attribute for the element is name and the value must be the same as the map identifier.
<map name="map_name">..</map>
* Insert the links using the <area> element inside the <map> element. <map> element is the container for the <area> element.

The attributes of the <area> element are given below.

hrefDefines the URL.
shapeDefines the shape of a hotspot inside the images. The values are given below.
rect or rectangleDefine a rectangle area.
circleDefines a circular area.
poly or polygonDefines a polygon area.
defaultThe other regions of the image for which no links are defined.
coordsDefines the coordinates of the hotspot. The values are the comma-delimated positive integers. (e.g. - "100, 100, 200, 200")
title & altUsed to show tooltip when the user hovers the mouse pointer over that region.
targetUsed to define the browser window in which the new resource will be loaded.

<img src=logo.jpg" usemap="#map_name">
<map name="map_name">
<area href="page1.html" shape="rect" coords="100,100,200,200">
<area href="page2.html" shape="rect" coords="200,200,300,300">
<area href="page2.html" shape="rect" coords="200,200,300,300" title="this is a title">
<area href="page2.html" shape="rect" coords="200,200,300,300" alt="this is a description">
<area href="page2.html" shape="rect" coords="200,200,300,300" target="new_window">
Related Tutorial