For information about scripting the <AREA>
element, see the Scripting the <AREA> element topic.
Adding the USEMAP attribute to an <IMG>
element indicates that the image is a client-side image map. The USEMAP
attribute can be used with the ISMAP
attribute to indicate that the image can be processed as either a client-side or server-side image map (useful to ensure browser independence of HTML documents). The value used in the USEMAP
attribute specifies the location of the map definition to use with the image, in a format similar to the HREF
attribute on anchors. If the argument to USEMAP
starts with a '#', the map description is assumed to be in the same document as the <IMG>
element.
<IMG SRC="../images/image.gif" USEMAP="maps.html#map1">
This would use the map described as "map1" in "maps.html" as the overlay for the image file "image.gif". The map definition (see below) can be included either within the HTML document itself where the image is embedded, or in a completely separate file.
The different active regions of the image are described using MAP and AREA elements. The map describes each region in the image and indicates the location of the document to be retrieved when the defined area is activated. The basic format for the MAP
element is as follows:
<MAP NAME="name">
<AREA [SHAPE="shape"] COORDS="x,y,..." [HREF="reference"] [NOHREF]>
</MAP>
The NAME specifies the name of the map so that it can be referenced by an <IMG USEMAP=...>
element (NOTE : the NAME
attribute of the <AREA>
element can also be used to reference the particular area for scripting purposes. See the information in the Document Object for more information). The SHAPE gives the shape of the specific area. Currently the shapes "RECT"
, "CIRCLE"
and "POLY"
are supported (Mosaic only supports the RECT
shape), with RECT
being the default shape, if an explicit SHAPE
attribute is not specified. The COORDS attribute gives the co-ordinates of the shape, using image pixels as the units. For a rectangle (SHAPE="RECT"
), the COORDS
are expressed as "left-x,top-y,right-x,bottom-y". For a circle, (SHAPE="CIRCLE"
), the COORDS
are expressed as "centre-x, centre-y, radius" and for a polygon (SHAPE="POLY"
) (an irregular shape), the COORDS
are expressed in pairs of coordinates (i.e. "x1,y1,x2,y2,x3,y3... ") which defines the pixel coordinates of the various points of the polygonal image hotspot.
The NOHREF attribute indicates that clicks in this region should perform no action. An HREF attribute specifies where a click in that area should lead. Note that a relative anchor specification will be expanded using the URL of the map description as a base, rather than using the URL of the document from which the map description is referenced. If a <BASE>
tag is present in the document containing the map description, that URL will be used as the base to resolve partial URL's
An arbitrary number of AREA
elements may be specified. If two areas intersect, the one which appears first in the map definition takes precedence in the overlapping region.
Examples
The following images all use a <MAP...>
element and USEMAP
attributes to specify them as image maps. Use the View Source option in the browser to see the source for these maps.
![]() |
A Circular image map - using SHAPE="CIRCLE"
|
![]() |
A Rectangular image map - using SHAPE="RECT"
|
![]() |
A Polygonal image map - using SHAPE="POLY"
|
NOTE : The links in the above example don't actually exist, they're just there as an example. When the image is surrounded by an anchor element, which runs a script function, Netscape will only activate the script function when the actual hotspot as defined in the <MAP>
element is clicked. Internet Explorer will activate the script when _any_ part of the image is clicked on.
NOTE : The TARGET attribute can be used within the <AREA>
element, allowing the use of Client side image maps within framed documents. For more information about the use of TARGET
attributes, see the <FRAME>
section.