There are several limitations of the current image map implementation as it applies to this use. First, it only works over the HTTP protocol, making it unusable for reading local files or files accessed via alternate protocols. Second, a server transaction is required merely to determine where the link is directed. This can degrade performance noticeably when accessing distant sites. Third, unlike for normal links, there is no way for a browser to provide visual feedback to the user showing where a portion of an image map leads before the user actually clicks on it. Lastly, the implementation of image maps is server-dependent, compromising portability of documents.
While HTML+[3] contains provisions for "hypertext buttons" on images via use of the FIG
element, this method is an unworkable short-term solution for several reasons. First,
complete support of the FIG
element requires significant additional processing
by the browser. Second, it cannot degrade gracefully on browsers that do not support it. Third,
it requires the map description to be specified when the image appears, which is inappropriate
for some applications. The extension to support client-side image maps addresses these issues.
USEMAP
attribute to an IMG
element indicates that it is a client-side image map. The
USEMAP
attribute can be used with the ISMAP
attribute to indicate
that the the image can be processed as either a client-side or server-side image map. 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.
A few examples would be:
This image map will work regardless: <A href="cgi-bin/image map/pic2">
<IMG src="pic2.gif" USEMAP="maps.html#map2" ISMAP></A>
Clicking here will take you to a page with an error message if you don't have client-side
image map support: <A href="no_csim.html"> <IMG src="/www2/pic3.gif" USEMAP="maps.html#map3">
</A>You can only click here if your browser supports client-side image maps:
<IMG src="pic1.gif" USEMAP="maps.html#map1">
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">
shape
<AREA [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 the only shape defined is "RECT
",
but the syntax is defined in such a way to allow other region types 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 the entire area of a 100x100 image, the coordinates would
be "0,0,99,99".
The NOHREF
tag indicates that clicks in this region should
perform no action. An HREF
tag 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.
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> <IMG src="img/bar.gif" USEMAP="#buttonbar">This example includes a region encompassing the entire image with a
NOHREF
tag, but
this is actually redundant. Any region of the image that is not defined by an AREA
tag is assumed to be NOHREF
.
MAP
and AREA
elements.
If the document resides on an HTTP server, the server can still provide ISMAP
-style support.
Otherwise, the author can choose to have the image not appear as an anchor at all, or have a click anywhere
within it lead to a another page, perhaps providing an equivalent textual list of options.The ability to have the map description reside in an different file provides additional flexibility. A common use of image maps is a button bar which appears at the bottom of every document. The map description could be specified in one file, such as the server's home page, and referenced from each document. Thus, the map could be modified by changing a single map description rather than having to modify every file on the server. There is also the possibility of advanced applications with servers dynamically generating map descriptions, similar to the way that some servers currently dynamically generate image files.
The demand for a non-HTTP based mechanism for image maps will also increase as archives of material in HTML format begins to appear on CD-ROM. The expected increase in pay-per-access servers will also lead to users saving copies of documents locally, which they would then expect to function identically to those on the original server. The extensions described here could serve as a basis to satisfy these needs.
http://www.hal.com/users/connolly/html-spec/
http://info.cern.ch/hypertext/WWW/MarkUp/HTMLPlus/htmlplus_1.html