Area html tag for hyper links on images

<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>
We can mark different areas in a map or image and generate a clickable areas by using html tag.

We can point different areas of a image map to different pages by creating hyper links on the map.

Attributes of <AREA>:

AttributeDescription
ALTA text to be displayed to browser when Image is not shown
COORDSA set of coordinates of the area on the image. The set value depens on the SHAPE attribute.
HREFURL of the document linked to
HREFLANGIf href tag is there then this specifies the language of the target.
NAMEIt can be refered by script or dom.
MEDIAAbout the linked resources
HREFLANGIf href tag is there then this specifies the language of the target.
SHAPErect|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.

Subscribe to our mailing list

* indicates required
Subscribe to plus2net
Visitors Rating
Your Rating


Google+

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
dylan

11-04-2010

thanks this was a lot of help!
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
michael

03-10-2012

Hope this works

Post Comment This is for short comments only. Use the forum for more discussions.




Subscribe to our mailing list

* indicates required
Subscribe to plus2net
HTML . MySQL. PHP. JavaScript. ASP. Photoshop. Articles. FORUM Contact us
©2000-2017 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer