HTML Image Maps
An image map is a clickable image that is diveded into defferent regions or areas. These regions are also called hotspots.Each region of image map is linked to a different URL.It loads different web pages when the user clicks its different parts.
Fo example, the following image contains three shapes.Each shape of the image can be used as a separate hyperlink.
The Usemap Attribute
Image map is associated with an image by adding the usemap attribute to <img> tag.
Example
<img src="pic.jpj" width="400" height="120" border="1" usemap="#shapes">
In the above line , usemap associated the image map with the image.
The <map> Tag
The <map> tag defines the map for creating an image map. It tells the browser where the hot spots exist in the image.
It also links the hot spots with different locations.
<map name="shapes">
<area shape="circle" coords="55,40,38" href="circle.html" title="circle">
<area shape="rect" coords="130,10,238,80" href="rectangle.html" title="circle">
<area shape="tri" coords="55,40,38" href="triangle.html" title="circle">
<area shape="default" nohref>
</map>
The above example defines three "hotspot" area circle, rectangle and triangle. Each area is linked to a different page. The name of the above map is shapes. It is used in the usemap attribute of the image.The above map defines the following areas:
circle:acircular shape
rect:a rectangular shape
tri:an arbitrary polygon, with 3 or more points
default:represents the remaining area of the image not defined by any area tags.
Coords attribute specifies the coordinates that define the corners of the shape. The coordinates depend on the shape specified in the shape attribute.
rect:coords=x1,y1,x2,y2
circle:coords=x,y,r
poly:coords=x1,y1,x2,y2,x3,y3,....
0 Comments