martin2k

The AREA Tag

HomeForumTutorials Tags:
 
 

Name

Area

Description

Defines an area on an image.  The area can be clicked on to navigate to a URL.  AREA tags must be used within the MAP tag.  Note that this tag is currently unsupported in Firefox.

Attributes

ALT

Sets the tooltip text for the area.

COORDS

Sets the coordinates for the area.  The format of the coordinates will depend on whether the SHAPE attribute is set to rect, circ or poly:

SHAPE Attribute COORDS Attribute Format
circle x centre,y centre,radius
rect left,top,right,bottom
poly x1,y1,x2,y2,x3,y3...

HREF

Specifies the URL to link to.  To link to a file on the same site use the local path e.g. href="index.html" or href="folder/contents.html".  You can also use dots to link to a document in the parent folder e.g. href="..\document.html".  To link to another site, use the full URL e.g.: href="http://www.martin2k.co.uk".

SHAPE

Specifies the shape to use.  This can either be set to rect (rectangle), circ or poly (polygon).

TARGET

Specifies the target frame.  As well as name of frames, there are predefined values that can be used to open the page in a specific location:

Value Description
_blank Open in new window
_parent Open in parent frame
_self Open in same frame
_top Open in current window, regardless of frames used

Related Tags

The AREA tag is used within the MAP tag.  More than one AREA tag can be used.  The IMG tag must also be used to specify which image to use - see the MAP tag for how to do this.

Example

Code

<img src="area1.gif" border="0" alt="Shapes" usemap="#shapemap">

<map id="shapemap">
    <area shape="circ" coords="47,87,30" href ="area2.gif" target="_blank" alt="Red circle">
    <area shape="rect" coords="106,26,138,129" href ="area3.gif" target="_blank" alt="Blue rectangle">
    <area shape="poly" coords="179,21,216,40,194,98,205,130,152,129,169,100,146,55" href="area4.gif" target="_blank" alt="Green polygon">
</map>

Generates

Shapes Red circle Blue rectangle Green polygon

Please fill in the below form if you have any comments or additional information you want to add about the above information.  If you have any questions, please visit the ForumAny questions sent using this form will be ignored.

* - Mandatory

*Name: E-mail:

*Comments:

*Please type the following code (your comment cannot be accepted without it):


© Martin Allen 1999 - 2006.  Last updated Sunday 01 October 2006 06:05:32 PM +0100.