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.
AttributeDescription
hrefDefines the URL.
shapeDefines the shape of a hotspot inside the images. The values are given below.
ValueDescription
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.
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.
AttributeDescription
title & altto insert tooltips that appear when the user hovers the mouse pointer over that region.
targetto 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
Related Tutorial
Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 https://twitter.com/RookieNerdTutor https://plus.google.com/b/117136517396468545840 #
Contents +