Creating Image Maps in HTML

<img src=map.jpg  usemap="#sections">

<map name="sections">
<area shape="circle" coords="62,39,25" href="my_area1.php" alt="Going to Area 1">
<area shape="rect" coords="213,36,378,93" href="my_area2.php" alt="Going to Area 2">
<area shape="poly" coords="255,224,320,224,321,200,255,224" href="my_area3.php" alt="to Area 3">
</map>

<Map> .. </Map> Tags:

These tags are used to create image maps i.e, dividing a single image into various areas.

The technique that has been implemented to achieve linking of multiple documents to the same image is known as Image Map. Clicking on any part of the image will take us to the document specified in <a href>.

Example : We have different pages for different countries. We can link country specific page based on the country area in a World Map.

We can divide a image into multiple parts and allows linking of each part to a different document.

Attributes of <Map>:

Attribute	Description
Name	Name This is the name used to referece the map in an HTML File

how to apply image map to a particular image

<img> tag takes an attribute called USEMAP, which is used to apply the image map to that particular image. It takes the name of the image map, and applies the map specifications to that particular image.
Note : The value of usemap attribut should always precede with the # sign

Example : <img src="bubble.gif" usemap="#mapex">

Image Maps

Attributes of <Map>:

how to apply image map to a particular image

Subscribe