CLIENT-SIDE IMAGE MAPS

c1_hmpg_maps.wpd
Source: http://home.netscape.com/assist/net_sites/html_extensions_3.html


Clickable maps are a nice addition to your web site. When your curser goes over an image map, the curser turns into a hand, and the URL that you will go to if you click the left mouse button appears on the status line at the bottom of the page.


"Image maps are an important feature of the point-and-click interface that makes the World Wide Web so popular. The most common use of image maps is to allow users to access different documents by clicking on different areas in an image. There are several limitations of the current image map implementation..." but they are beyond the scope of this course.

The extension to support client-side image maps a USEMAP attribute inside an IMG element or tag. The argument to USEMAP specifies which map to use with the image, in a format similar to the HREF attribute on anchors. If the argument to USEMAP starts with a "#", it is assumed to be in the same document as the IMG tag.



an example:

<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>

<IMG SRC=" mapp.gif" USEMAP="#buttonbar">



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. 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 element. The shape gives the shape of this area. Currently supported shapes include rectangles (RECT), polygons (POLY), circles (CIRCLE), and default (DEFAULT), but the syntax is defined in a way that allows other shapes to be added. If the SHAPE tag is omitted, SHAPE="RECT" is assumed. The COORDS tag gives the coordinates of the shape, using image pixels as the units. For a rectangle, the coordinates are given as "left,top,right,bottom". The rectangular region defined includes the lower right corner specified (i.e. to specify the entire area of a 100-by-100-pixel image, the coordinates would be "0,0,99,99"). Circles are defined as a center point and then a radius (a total of three numbers).


Click here for an example.