Platinum Edition Using HTML 4, XML, and Java 1.2
(Publisher: Macmillan Computer Publishing)
Author(s): Eric Ladd
ISBN: 078971759x
Publication Date: 11/01/98

---

NOTE:  The SHAPE attribute can take on values of rect, circle, poly, and default. The point keyword is not supported in HTML 4.0.

These regions, as their names suggest, refer to the geometric shape of the hot region. Their defining coordinates are determined as pixel points relative to the upper-left corner of the imagemap graphic, which is taken to have coordinates 0,0 (see Figure 4.1).

---

---

NOTE:  One important difference with client-side imagemaps is that when you specify a circular hot region, you need only give the coordinates of the center point and the radius of the circle.

---

To set up a circular hot region, for example, you would use code such as the following:

<MAP NAME=“circle”>
<AREA SHAPE=“circle” COORDS=“123,89,49”
HREF=“<http://www.server.com/circle.html>” ALT=“Circle Link”>
</MAP>

The preceding HTML sets up a map named circle that has one hot region. Note that the numbers in the list of coordinates for the COORDS attribute are all separated by commas, and the URL in the HREF attribute is fully qualified. Note also that the coordinates list comprises the coordinates of the center point followed by a single number that represents the radius of the circle.

The <AREA> tag can also take a NOHREF attribute, which tells the browser to do nothing if the user clicks the hot region. Any part of the image that is not defined as a hot region is taken to be a NOHREF region—if users click outside a hot region, they don’t go anywhere by default. This approach saves you from setting up an <AREA SHAPE=“DEFAULT” NOHREF> tag for all your maps.

---

NOTE:  You can have as many <AREA> tags as you like. If the hot regions defined by two <AREA> tags overlap, the <AREA> tag listed first has precedence.

---

Setting Up the Imagemap

After the imagemap data is set up in HTML form, you need to set up the imagemap itself. To do this, you use the <IMG> tag along with the USEMAP attribute. USEMAP tells the browser that the image to be used is a client-side imagemap. It is set equal to the name of the map that contains the appropriate map data. For the client-side imagemap defined previously, the setup would look like this:

<IMG SRC=“images/mainpage.gif” USEMAP=“#circle”>

The pound sign (#) before the map name indicates that the map data is found in the same HTML file. If the map data is in another file called maps.html (which is perfectly okay), your <IMG> tag would look like the following:

<IMG SRC=“images/mainpage.gif”
USEMAP=“<http://www.server.com/maps.html#circle>”>

	If you have standard navigation imagemaps on your site, you should consider storing the map data for them in a single HTML file for easier maintenance.

---

NOTE:  Although the HTML 4.0 recommendation says that the USEMAP attribute can be set to any valid URL, some browsers do not support the ability to reference another file when looking for map information. In these cases, you can still maintain the map information in a single file and read it into your HTML files as needed, using a Server-Side Include (SSI). This way, you can still make changes in the map information in one place and the changes will propagate throughout your site.

To learn more about SSIs, consult Chapter 32, “Server-Side Includes.”

---

Example: A Main Page Imagemap

Figure 4.1 shows an image to be used as an imagemap on the main page of a small corporate site. The coordinates to define the hot regions in the image are given in Table 4.2.

FIGURE 4.1  An imagemap on a home page typically provides navigation links to all major areas of a site.

To set up the map information to make the image in Figure 4.1 a client-side imagemap, you could use the following HTML:

<MAP NAME=“mainpage”>
<AREA SHAPE=“rect” COORDS=“166,255,368,382”
HREF=“<http://www.server.com/info.html>” ALT=“Site Map”>
<AREA SHAPE=“circle” COORDS=“160,151,73”
HREF=“<http://www.server.com/index.html>” ALT=“Search”>
<AREA SHAPE=“polygon”
COORDS=“308,86,378,109,421,52,421,122,491,149,420,169,
419,245,377,185,306,205,349,148"
HREF=“<http://www.yourserver.com/whatsnew.html>” ALT=“What’s New”>
</MAP>

Then, to set up the imagemap, you would use the following if the map information were in the same file:

<IMG SRC=“images/map2.gif” USEMAP=“#mainpage”>

If the map information were stored in the file maps.html, you would modify the preceding <IMG> tag to read as follows:

<IMG SRC=“images/map2.gif” USEMAP=“<http://www.server.com/maps.html#mainpage>”>