Now that you've derived some RECTs from an image, you're ready to look at the HTML necessary to create the actual client-side imagemap.
There are two parts to a client-side imagemap: the
IMG tag which displays the image on the HTML page, and the
AREA tags (invisible to the user) which contain all of the imagemap information. As mentioned earlier, the
A (anchor) tag is not involved in creating a client-side imagemap.
Because the actual imagemap information is coded only into
AREA tags, the
IMG tag needs to link to the
MAP tag and its imagemap information using a special attribute,
USEMAP; I'll talk about the
USEMAP attribute and how it works at length in a moment.
Imagemap information is coded into HTML using the
AREA tags, as mentioned earlier.
MAP opens and closes around the imagemap information, with one
AREA tag for each clickable area on the imagemap. Here is an example of the basic structure (without attributes):
<map> <area /> <area /> <area /> </map>
MAP tag ALWAYS closes, while the
AREA tags, like the
BR tags, must close within their opening tags using the "space-close-slash before the closing bracket" syntax we've seen so often.
MAP tag has one attribute,
NAME, which is required for the imagemap to operate properly.
Value: any valid name (based on the naming rules discussed in earlier modules)
NAME attribute of the
MAP tag provides an identifier which the
USEMAP attribute of the
IMG tag will use to connect itself to the imagemap information in the
AREA tag has three required attributes:
HREF. It also has one optional attribute,
TARGET, which would only be used with frame sites. The
TARGET attributes are identical to their
A (anchor) tag counterparts except for the fact that they work within an imagemap.
Description: sets the shape of the clickable area which the individual
AREA tag will define. Each
AREA tag in a
MAP may be a different
SHAPE, or they may all be the same
r) coordinates separated by commas; the number of integers required depends entirely on the value of the
SHAPE attribute for that
COORDS attribute of the
AREA tag defines the
r) coordinates for the shape defined by the
SHAPE attribute of that particular
Value: any URL, relative or absolute
HREF attribute of the
AREA tag defines the hyper-reference for that clickable area in the imagemap.
Value: any valid frame NAME, or "magic" target name.
TARGET attribute of the
AREA tag allows the programmer to target hyper-references to a specifically named frame, or erase a frameset entirely using the
"_top" magic target name; it is only used when creating imagemaps for use inside frame sites.
<map name="ethel"> <area shape="rect" coords="7,7,71,71" href="./destination1.html" /> <area shape="rect" coords="127,28,191,92" href="./destination2.html" /> </map>
Once you've encoded your client-side imagemap information into an HTML page using the
AREA tags, you are ready to add your
IMG tag to that HTML page.
IMG tag used as an imagemap is coded identically to a regular
IMG tag, with the addition of two attributes:
BORDER attribute of the
IMG tag must be set equal to
"0" when that IMG is being used for an imagemap. Because an
IMG tag used as an imagemap is considered to be a hyper-reference by a web browser, a blue hot-link border will appear around the image (in many browsers) unless the
BORDER attribute is set equal to
"0". Imagemaps, by current conventions, should NOT exhibit a blue hot-link border.
# (pound) sign followed by the
NAME of the
MAP tag to connect to, NO SPACES. For instance, if the NAME of the
MAP tag desired was "ethel" (as in the example earlier), the value of the
USEMAP attribute for the
IMG tag would be
"#ethel". Note: this
"#thename" syntax follows the convention established with the
A (anchor) tag for hyper-referencing NAME anchors within an HTML page.
USEMAP attribute of the
IMG tag connects a
MAP tag (and attendant
AREA tags) to a given
IMG tag, making it behave as an imagemap.
<img src="./graphics/demoMap.gif" width="200" height="100" alt="Demo Map" border="0" usemap="#ethel" /> <map name="ethel"> <area shape="rect" coords="7,7,71,71" href="./destination1.html" /> <area shape="rect" coords="127,28,191,92" href="./destination2.html" /> </map>
TARGET; only necessary with frame sites; this example assumes that there is a frame named
<img src="./graphics/demoMap.gif" width="200" height="100" alt="Demo Map" border="0" usemap="#ethel" /> <map name="ethel"> <area shape="rect" coords="7,7,71,71" href="./destination1.html" target="_top" /> <area shape="rect" coords="127,28,191,92" href="./destination2.html" target="main" /> </map>
It does not matter where on the HTML page the
AREA tags are located. Ordinarily, web programmers will place the
MAP tag immediately below the appropriate
IMG tag, but the
MAP tag could equally well be placed at the bottom or top of the HTML page without affecting performance in any way. Try to place the
MAP tag someplace on the page where it won't interfere with the readability of your code.
An HTML page may have MANY different client-side imagemaps on it, as long as each one of the
MAP tags involved is named a unique NAME. You may also place a particular imagemap on a page more than once; simply duplicate the
IMG tag involved as often as you need, then have all of those
IMG tags access the SAME
MAP tag. DO NOT have TWO
MAP tags of the SAME NAME on a single HTML page; this is not only pointless, it is forbidden.
Copyright © 2001 Michael Masumoto. All Rights Reserved.