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.
Want To Be A Web Master?
If you want to be a Web Master, you will have to host your web site with an ISP (Internet Service Provider).
MaximumASP offers seven different configurations of dedicated servers to meet your Windows and .NET hosting needs.
Hosted on our multi-tiered Enterprise Class network, these servers provide the performance, security and reliability
you need to host your high end web sites and applications.
Visit MaximumASP
|
HOME
Printer friendly page
