Home > DeveloperSection > Beginner > HTML 5 area tag

HTML 5 area tag


HTML5 HTML5 
Ratings:
0 Comment(s)
 3106  View(s)
Rate this:

HTML 5 area tag

The HTML <area> tag is used for defining an area in an image map. Image maps are images with clickable areas (sometimes referred to as "hotspots") that usually link to another page.

The <area> element always nested in map tag.

Attributes Description

shape

Defines a shape for the clickable area. Possible values:

1.       Default: Specifies the entire region.

2.       Poly or Polygon: Defines a polygonal region.

3.       Rect or Rectangle: Defines a rectangular region.

4.       Circle or circ: Defines a circular region.

href   

Specifies the target url of the area. It should be another image or link of another website.

target           

This attribute will specify that where to open target link. It should be _blank, _parent, _self, _top or frame name.

media           

This attribute will specify that which media device the target url is optimized for. The default value is all.

hreflang       

This attribute specifies language code of the destination URL. Only to be used when the href attribute is present.

type   

This attribute specifies the MIME type of the linked resource. Only to be used when the href attribute is present.

alt      

This specifies text to be used in case the browser/user agent can't render the image.

coords                     

Specifies the coordinates of the clickable area. Coordinates are specified as follows:

·         rect: left, top, right, bottom.

·         circle: center-x, center-y, radius.

·        poly: x1, y1, x2, y2, ...

ping   

Gives the URLs to be notified if the user follows the hyperlink. Only to be used when the href attribute is present.

rel

Specifies the relation between current document and the target URL.Attribute values are shown below:

·         alternate

·         archives

·         author

·         bookmark

·         external

·         feed

·         first

·         help

·         index

·         last

·         license

·         next

·         nofollow

·         noreferrer

·         prev

·         search

·         sidebar

·         tag

·         up

 Code:

<body>

    <img src="Desert.jpg" width="145" height="126" alt="Desert" usemap="#Desertmap" />

    <map name="Desertmap">

        <area shape="rect" coords="2, 39, 138, 123" alt="Desert"

            href="http://www.mindstick.com/developerssection.aspx" /> <!--using area tag where coords attribute is defined that specifies clickable area on image -->

        <area shape="circle" coords="75, 20, 20" alt="Flower"

            href="http://www.google.com" />

    </map>

</body>                          

If user clicked on desert area then user will reach on MINDSTICK website, if user clicked on sky area on image then user will reach on GOOGLE.

 

 

 


Don't want to miss updates? Please click the below button!

Follow MindStick