Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

area

The <area> element is commonly used within a banner or image mapping scenario where there will be clickable items on the banner or image. It must have a parent <map> element that is related to an image on the page by its name. Each area element in a map defines a hotspot that will enable mouse interactivity. In the image code demo below you will notice a rectangle and a circular hotspot are drawn and made clickable on top of the picture. The "coords" attribute and values are the size and location of your hotspot items. This is a Void Element so it does not get a closing tag like most elements.

Code Example

<map name="spotMap"> <area shape="circle" coords="60,33,20" href="#"> <area shape="rect" coords="139,17,172,49" href="#"> <area shape="poly" coords="192,0,191,13,205,7" href="#"> </map> <img src="my_image.png" alt="pic" width="228" height="63" usemap="#spotMap">

Attributes

globals - the global attributes common to all elements possible values: see global attribute list alt - fallback text if images are misssing possible values: "text" coords - coordinates for the shape possible values: "comma separated list of numbers" download - specify that the resource is a file to be downloaded possible values: "recommended default file name"(value is optional) href - specify the path to the file resource to navigate to or download possible values: "path/to/filename" hreflang - language of the destination file possible values: "a valid BCP 47 language tag" rel - specify relationship between the linking file and the destination file possible values: "space separated token list" shape - specify the shape that your hotspot link will be possible values: "default","rect","circle","poly" default - a rectangle that covers the entire image area rectangle coords - x1, y1, x2, y2 circle coords - x, y, radius polygon coords - x1, y1, x2, y2, x3, y3, x4, y4, x5, y5... target - specify the browsing context(how the document is opened) possible values: "_blank", "_self", "_parent", "_top" type - mime type of the destination file possible values: "valid MIME type"

Documentation

http://www.w3.org/TR/html/embedded-content-0.html#the-area-element

HTML

Elements

aabbraddressareaasidearticleaudiobbasebdobdiblockquotebodybrbuttoncanvascaptioncitecodecolcolgroupdatadatalistdddeldetailsdfndialogdivdldtemembedfieldsetfigcaptionfigurefooterformh1 h2 h3 h4 h5 h6headheaderhrhtmliiframeimginputinskbdkeygenlabellegendlilinkmainmapmarkmetameternavnoscriptobjectoloptgroupoptionoutputpparampreprogressqrb rp rt rtc rubyssampscriptsectionselectsmallsourcespanstrongstylesub supsummarytabletbodytdtemplatetextareatfootththeadtimetitletrtrackuulvarvideowbr