Image Maps

<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> 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


<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');">

Attributes of <Map>:

NameName 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">

HTML Form HTML <AREA> Image Display


* indicates required
Subscribe to plus2net



    Thanks .. i need such type of TAG which i did not find on any other tutorials ..

    Post your comments , suggestion , error , requirements etc here

    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 All rights reserved worldwide Privacy Policy Disclaimer