Client Side Image Maps

<map>….</map>   Tag

The different regions of the image are described using a MAP element.  The map describes each region in the image and indicates where it links to.  The basic format for the MAP element is as follows:

<MAP NAME="name">

<AREA [SHAPE="shape"] COORDS="x,y,..." [HREF="reference"] [NOHREF]>

</MAP>

The MAP definition can reside in the same file as the image that will use it, or in a completely separate file.  This way, all map definitions can be kept separate from the main documents, allowing easier maintenance.

The NAME Attribute

The NAME specifies the name of the map so that it can be referenced by an <IMG> element.

<area>   Tag

An arbitrary number of AREA tags may be specified.  If two areas intersect, the one which appears first in the map definition takes precedence in the overlapping region. For example, a button bar in a document might use a 160 pixel by 60 pixel image and appear like this:

<MAP NAME="buttonbar">

<AREA SHAPE="RECT" COORDS="10,10,49,49" HREF="about_us.html">

<AREA SHAPE="RECT" COORDS="60,10,99,49" HREF="products.html">

<AREA SHAPE="RECT" COORDS="110,10,149,49" HREF="index.html">

<AREA SHAPE="RECT" COORDS="0,0,159,59" NOHREF>

</MAP>

Any region of the image that is not defined by an AREA tag is assumed to be NOHREF.

The HREF Attribute

An HREF Attribute specifies where a click in that area should lead.

The NOHREF attribute

The NOHREF attribute indicates that clicks in this region should perform no action.

The SHAPE Attribute

The SHAPE gives the shape of this area.  Currently the shapes "RECT", "CIRCLE" and "POLY" are supported , with RECT being the default shape, if an explicit SHAPE attribute is not specified.

The COORDS attribute

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.

NOTE : The TARGET attribute can be used within the <AREA> element, allowing the use of Client side image maps within framed documents.

 

Points to remember

Tag	Description
<img>	Defines an image
<map>	Defines an image map
<area>	Defines a clickable area inside an image map

Tag	Description
<a>	Defines an anchor

Be a Fan

Posted in: HTML