<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.
Move Mouse over the image
HTML
<img src=images/map.jpg usemap="#sections" style=cursor:crosshair;>
<map name="sections">
<area shape="circle" coords="62,39,25" href="../php_tutorial/site_map.php" alt="PHP " target=_blank onMouseOver="setVisibility('inline', 'On PHP, a circle shape x1=62,y1=39,r=25');"
onMouseOut="setVisibility('none','Out of PHP');">
<area shape="rect" coords="213,36,378,93" href="../jquery/site_map.php" alt="JQUERY " target=_blank onMouseOver="setVisibility('inline', 'On JQuery, a rectangular shape x1=213,y1=36,x2=378,y2=93');"
onMouseOut="setVisibility('none','Out of Jquery');">
<area shape="poly" coords="255,224,320,224,321,200,342,212,359,230,359,254,255,254,255,224"
href="../sql_tutorial/site_map.php" alt="My SQL " target=_blank
onMouseOver="setVisibility('inline', 'On MySQL, a poly shape x1=255,y1=224,x2=320,y2=224,x3=321,y3=200,x4=342,y4=212,x5=359,y5=254,x6=255,y6=254,x7=255,y7=224');"
onMouseOut="setVisibility('none','Out of MySQL');">
<area shape="poly" coords="8,203,15,282,39,290,65,282,71,203,8,203 " href="site_map.php"
alt="HTML " target=_blank onMouseOver="setVisibility('inline', 'On HTML , a poly shape x1=8,y1=203,x2=15,y2=282,x3=39,y3=290,x4=65,y4=282,x5=71,y5=203,x6=8,y6=203');"
onMouseOut="setVisibility('none','Out of HTML');">
</map>
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