| | |
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 MAP and 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 MAP and 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 MAP and 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>
The MAP tag ALWAYS closes, while the AREA tags, like the IMG and BR tags, must close within their opening tags using the "space-close-slash before the closing bracket" syntax we've seen so often.
The MAP tag has one attribute, NAME, which is required for the imagemap to operate properly.
Tag: MAP
Attribute: NAME
Value: any valid name (based on the naming rules discussed in earlier modules)
Description: the 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 MAP.
Example (abbreviated): <map name="fred"></map>
The AREA tag has three required attributes: SHAPE, COORDS, and HREF. It also has one optional attribute, TARGET, which would only be used with frame sites. The HREF and TARGET attributes are identical to their A (anchor) tag counterparts except for the fact that they work within an imagemap.
Tag: AREA
Attribute: SHAPE
Value: rect, circle, poly
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 SHAPE.
Tag: AREA
Attribute: COORDS
Value: integer x,y (and r) coordinates separated by commas; the number of integers required depends entirely on the value of the SHAPE attribute for that AREA tag.
Description: the COORDS attribute of the AREA tag defines the x,y (and r) coordinates for the shape defined by the SHAPE attribute of that particular AREA tag.
Tag: AREA
Attribute: HREF
Value: any URL, relative or absolute
Description: the HREF attribute of the AREA tag defines the hyper-reference for that clickable area in the imagemap.
Tag: AREA
Attribute: TARGET (optional)
Value: any valid frame NAME, or "magic" target name.
Description: the 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.
Example:
<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 MAP and AREA tags, you are ready to add your IMG tag to that HTML page.
An IMG tag used as an imagemap is coded identically to a regular IMG tag, with the addition of two attributes: BORDER and USEMAP.
Tag: IMG
Attribute: BORDER
Value: 0 (zero)
Description: the 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.
Tag: IMG
Attribute: USEMAP
Value: the # (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.
Description: the 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.
Example (including MAP and AREA tags):
<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>
Example (using TARGET; only necessary with frame sites; this example assumes that there is a frame named "main"):
<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 MAP and 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.