Image Map to link different URLs to different areas of a Image



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>