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> .. </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
PHP  JQUERY My SQL HTML

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

AttributeDescription
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

Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com







    SUNIL VERMA

    10-02-2010

    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 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer