HTML <area> tag
Definition and Usage
Defines a region in an image map.
Differences Between HTML and XHTML
In HTML the <area> tag has no end tag.
In XHTML the <area> tag must be properly closed.
Tips and Notes
This element is always nested inside a <map> tag.
Note: The usemap attribute in <image> refers to the id
or name (browser dependant) attribute in <map>, therefore we have added
both the id and name attributes to <map>.
Example
| Source |
Output |
| <p>Click on one of the planets:</p>
<img src ="planets.gif"
width="145" height="126"
alt="Planets"
usemap ="#planetmap" />
<map id ="planetmap"
name="planetmap">
<area shape ="rect" coords ="0,0,82,126"
href ="sun.htm" target ="_blank"
alt="Sun" />
<area shape ="circle" coords ="90,58,3"
href ="mercur.htm" target ="_blank"
alt="Mercury" />
<area shape ="circle" coords ="124,58,8"
href ="venus.htm" target ="_blank"
alt="Venus" />
</map>
|
Click on one of the planets:
|
Required Attributes
DTD indicates in which DTD the attribute is
allowed. S=Strict, T=Transitional, and F=Frameset.
| Attribute |
Value |
Description |
DTD |
| alt |
text |
Specifies an alternate text for the area |
STF |
Optional Attributes
| Attribute |
Value |
Description |
DTD |
| coords |
if shape="rect" then
coords="left,top,right,bottom" if shape="circ" then
coords="centerx,centery,radius"
if shape="poly" then
coords="x1,y1,x2,y2,..,xn,yn" |
Specifies the coordinates for the clickable area |
STF |
| href |
URL |
Specifies the target URL of the area |
STF |
| nohref |
true
false |
Excludes an area from the image map |
STF |
| shape |
rect
rectangle
circ
circle
poly
polygon |
Defines the shape of the area |
STF |
| target |
_blank
_parent
_self
_top |
Where to open the target URL.
- _blank - the target URL will open in a new window
- _self - the target URL will open in the same frame as it was clicked
- _parent - the target URL will open in the parent frameset
- _top - the target URL will open in the full body of the window
|
TF |
Standard Attributes
| id, class, title, style, dir, lang, xml:lang, tabindex, accesskey |
For a full description, go to Standard Attributes.
Event Attributes
| onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup, onfocus, onblur |
For a full description, go to Event Attributes.
Try-It-Yourself Demos
Create an image map
How to create an image map, with clickable regions. Each region is a hyperlink.
 |
|
Get Your Diploma!
W3Schools' Online Certification Program is the perfect solution for busy
professionals who need to balance work, family, and career building.
The HTML Certificate is for developers who want to document their knowledge of HTML, XHTML, and CSS.
The ASP Certificate is for developers who want to document their knowledge of ASP, SQL, and ADO.
|
|
HOME
Printer friendly page
