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.

Attribute Description

href Defines the URL.

shape

Defines the shape of a hotspot inside the images. The values are given below.

Value	Description
`rect` or `rectangle`	Define a rectangle area.
`circle`	Defines a circular area.
`poly` or `polygon`	Defines a polygon area.
`default`	The other regions of the image for which no links are defined.
`coords`	Defines the coordinates of the hotspot. The values are the comma-delimated positive integers. (e.g. - "100, 100, 200, 200")

title & alt Used to show tooltip when the user hovers the mouse pointer over that region.

target Used to define the browser window in which the new resource will be loaded.

snippet

<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">
</map>

Describing the hotspots

Consider a example of a image using the hotspots colored region using the coordinates. For rectangular hotspot, use the syntax.

coords="left, top, right, bottom"

left & top are the x and y coordinates of the top-left corner right & bottom are the the x and y coordinates of the bottom-right corner e.g. coords="50, 50, 250, 150", coords="100, 100, 200, 300" For circular hotspot use the syntax:

coords="center-x, center-y, radius"

center-x, center-y are the coordinates of the center and radius is the radius of the circle. e.g. coords="100, 400, 50" For polygonal hotspot, use the syntax:

coords: x1, y1, x2, y2,...xN, yN"

coords="50, 50, 250, 150, 350, 450"

snippet

<html>
<head></head>
<body>
<img src=logo.jpg" usemap="#map_name">
<map name="map_name">
<area href="page1.html" shape="rect" coords="100,100,200,200">
<area href="pdf.html" shape="circle" coords="100,400,500">
<area href="image.jpeg" shape="poly" coords="200,350,400,200,450">
<area href="desc.txt" shape="default">
</map>
</body>
</html>

Output

When two areas are overlapped. the priority is determined by the order in which the <area> elements appear inside the map element.

Attributes of <area> element

The following are the attributes of the <area> element.

Attribute	Description
`title` & `alt`	to insert tooltips that appear when the user hovers the mouse pointer over that region.
`target`	to define the browser window in which the new resource will be loaded.

Image Maps using <object> element

The <object> element can be used to insert an image map. Change the <img> element to the <object>..<object> element and the src attribute to the data attribute.

snippet

<html>
<head></head>
<body>
<object data=logo.jpg" usemap="#map_name" type="image/jpeg" width="500" height="400"></object>
<map name="map_name">
<area href="page1.html" shape="rect" coords="100,100,200,200">
<area href="pdf.html" shape="circle" coords="100,400,500">
<area href="image.jpeg" shape="poly" coords="200,350,400,200,450">
<area href="desc.txt" shape="default">
</map>
</body>
</html>

Output