AREA Element | AREA Object

Defines the shape, coordinates, and associated URL of one hyperlink region within a client-side image MAP.

HTML Syntax

<AREA
    ALT=text
    CLASS=classname
    COORDS=coordinates
    HREF=url
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    NOHREF
    SHAPE=CIRC | CIRCLE | POLY | POLYGON | RECT | RECTANGLE
    STYLE=css1-properties
    TABINDEX=n
    TARGET=window_name | _blank | _parent  | _search | _self | _top 
    TITLE=text
    event = script
>

Remarks

Any number of AREA elements can be contained within the same MAP element.

The format of the COORDS value depends on the value of the SHAPE attribute.

The AREA element is not rendered and requires a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

AREA Members

Styles

AREA Styles

Example

This example provides the code for an image map of the solar system. It creates links from the image map to individual images of the planets using the AREA element with the MAP element, COORDS value, and SHAPE attribute. The user clicks the sun or any planet to link to an individual image. To return to the solar system image map, the user clicks the Back button.

Sample Code

<P><IMG SRC="solarsys.gif" WIDTH=504 HEIGHT=126 BORDER=0
    ALT="Solar System" USEMAP="#SystemMap">

<MAP NAME="SystemMap">
    <AREA SHAPE="rect" COORDS="0,0,82,126"
        HREF="/workshop/graphics/sun.gif">
    <AREA SHAPE="circle" COORDS="90,58,3"
        HREF="/workshop/graphics/merglobe.gif">
    <AREA SHAPE="circle" COORDS="124,58,8"
        HREF="/workshop/graphics/venglobe.gif">
    <AREA SHAPE="circle" COORDS="162,58,10"
        HREF="/workshop/graphics/earglobe.gif">
    <AREA SHAPE="circle" COORDS="203,58,8"
        HREF="/workshop/graphics/marglobe.gif">
    <AREA SHAPE="poly" COORDS="221,34,238,37,257,32,278,44,284,        60,
        281,75,288,91,267,87,253,89,237,81,229,64,228,54"
        HREF="/workshop/graphics/jupglobe.gif">
    <AREA SHAPE="poly" COORDS="288,19,316,39,330,37,348,47,351,66,
        349,74,367,105,337,85,324,85,307,77,303,60,307,50"
        HREF="/workshop/graphics/satglobe.gif">
    <AREA SHAPE="poly" COORDS="405,39,408,50,411,57,410,71,404,78,
        393,80,383,86,381,75,376,69,376,56,380,48,393,44"
        HREF="/workshop/graphics/uraglobe.gif">
    <AREA SHAPE="poly" COORDS="445,38,434,49,431,53,427,62,430,72,
        435,77,445,92,456,77,463,72,463,62,462,53,455,47"
        HREF="/workshop/graphics/nepglobe.gif">
    <AREA SHAPE="circle" COORDS="479,66,3"
        HREF="/workshop/graphics/pluglobe.gif">
</MAP>

This feature requires Internet Explorer 4.0 or later. Click the icon below to install the latest version. Then reload this page to view the sample.