Area tag <area> to create clickable hyper links on 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>

Clickable areas on an Image

We can link different areas of a image to different pages by creating hyper links on the Image sections. In this single interactive image below we have clickable regions where user can click the different areas and navigate to different sections of this site.

Move Mouse over the image

Check the source code below, we have added help text by using onMuousover and onMouseOut events. The cursor shape is changed by using style command.

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>

Check the JavaScript and Style code below for the above demo.

Attributes of <AREA>:

Attribute	Description
ALT	A text to be displayed to browser when Image is not shown
COORDS	A set of coordinates of the area on the image. The set value depens on the SHAPE attribute.
HREF	URL of the document linked to
HREFLANG	If href tag is there then this specifies the language of the target.
NAME	It can be refered by script or dom.
MEDIA	About the linked resources
HREFLANG	If href tag is there then this specifies the language of the target.
SHAPE	rect\|circle\|poly\|default: Based on this COORDS take set of values, for RECT it takes x1,y1,x2,y2,x3,y3,x4,y4. For CIRCLE it is x,y,r ( r is the radious from center at x, y ). For poly it is x1,y1,x2,y2... For default it is the full image.
TARGET	_self\|_blank\|_parent\|_top: How the linked document to open.

Let us try with this example.

<area shape='rect' cords='20,20,50,60'>

Here we have defined one rectangular shape with coordinates given in cords attribute.
We can add the target or href to the above tag like this

<area shape='rect' cords="20,20,50,60" href='mypage.php'>

The above area once clicked the mypage.php page will open We can also add one alternate text to the area tag like this.

<area shape='rect' cords="20,20,50,60" href='mypage.php'  alt='About my page'>

Area tag is used along with a <map> tag in creating clickable hyper links in an image.

JavaScript integrated for interaction

<script>
function setVisibility(visibility,msg) {
document.getElementById('sub').textContent  = msg;
}
</script>

To display the message we used one Div tag with id = 'sub'.

<div id="sub" class='display_box'>Move Mouse over the image</div>

The style associated with this div tag is here.

<style>
.display_box{ 
position: relative;
FONT-SIZE: 14px;
font-family: Verdana;
padding:5px;
width:100%;
height: 150px;
background-color: #ffff00;
border: 2px solid red;
border-radius: 5px;
word-wrap: break-word;
}
</style>

HTML <MAP> Image Display

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author Watch on YouTube

Connect:

USAMA	08-01-2010
Good, i got the idea about html web progrmming language

dany	23-02-2010
it is very useful for the beginners who d'nt about the HTML....

bethel	27-02-2010
this is great. our teacher wants us to make our own webpage. and it sucks! haha! :) thanks for putting the tags.

imran	31-03-2010
its very nice idea about the html web programing

surendra	12-01-2012
Dear Sir your tutorials very nice thankyou, one doubt for me i arrange html &css but not navigation bar linking another page how please tell me thankyou

dylan	11-04-2010
thanks this was a lot of help!

michael	03-10-2012
Hope this works

Area html tag for hyper links on images

Clickable areas on an Image

HTML

Attributes of <AREA>:

JavaScript integrated for interaction

Subhendu Mohapatra