Creating Client-Side Imagemaps

Note
The 0,0 origin is in the upper-left corner of the image, and positive y is down.

Defining a Circle
Figure 7.22 shows how to get the coordinates for circles. Here you note the coordinates for the center
point of the circle and the radius, in pixels. The center point of the circle is defined as the x,y coordinate
from the upper-left corner of the image.
Figure 7.22. Getting the coordinates for a circle.
file:///G|/1/0672328860/ch07lev1sec8.html (4 von 13) [19.12.2006 13:48:56]
Creating Client-Side Imagemaps

Defining a Rectangle
Figure 7.23 shows how to obtain coordinates for rectangle regions. Note the x,y coordinates for the
upper-left and lower-right corners of the rectangle.
Figure 7.23. Getting the coordinates for a rectangle.
file:///G|/1/0672328860/ch07lev1sec8.html (5 von 13) [19.12.2006 13:48:56]
Creating Client-Side Imagemaps

The
<map> and <area> Tags
If you're creating your imagemap manually and you've written down all of the coordinates for your
regions and the URLs they'll point to, you can include this information in the client-side imagemap tags
on a web page. To include a client-side imagemap inside an HTML document, use the
<map> tag, which
looks like the following:
<map name="mapname"> coordinates and links </map>

The value assigned to the name attribute is the name of this map definition. This is the name that will be
used later to associate the clickable image with its corresponding coordinates and hyperlink references.

So, if you have multiple imagemaps on the same page, you can have multiple
<map> tags with different
names.
Between the
<map> and the </map> tags, enter the coordinates for each area in the imagemap and the
destinations of those regions. The coordinates are defined inside yet another new tag: the
<area> tag. To
define a rectangle, for example, you would write the following:
<area shape="rect" coords="41,16,101,32" href="test.html">

The type of shape to be used for the region is declared by the shape attribute, which can have the values
rect, poly, circle, and default. The coordinates for each shape are noted using the coords attribute. For
example, the
coords attribute for a poly shape appears as follows:
file:///G|/1/0672328860/ch07lev1sec8.html (6 von 13) [19.12.2006 13:48:56]
Creating Client-Side Imagemaps
<area shape="poly" coords="x1,y1,x2,y2,x3,y3, ,xN,yN" href="URL">

Each x,y combination represents a point on the polygon. For rect shapes, x1,y1 is the upper-left corner
of the rectangle, and x2,y2 is the lower-right corner:
<area shape="rect" coords="x1,y1,x2,y2" href="URL">

For circle shapes, x,y represents the center of a circular region of size radius:
<area shape="circle" coords="x,y,radius" href="URL">

The default shape is different from the othersit doesn't require any coordinates to be specified. Instead,
the link associated with the
default shape is followed if the user clicks anywhere on the image that
doesn't fall within another defined region.
Another attribute you need to define for each

<area> tag is the href attribute. You can assign href any
URL you usually would associate with an
<a> link, including relative pathnames. In addition, you can
assign
HRef a value of "nohref" to define regions of the image that don't contain links to a new page.
Note
When you're using client-side imagemaps with frames, you can include the target attribute
inside an
<area> tag to open a new page in a specific window, as in this example:
<area shape="rect" coords="x1,y1,x2,y2" href="URL" target=
"window_name">


You need to include one more attribute in HTML 4.01. Earlier in this lesson, you learned how to specify
alternate text for images. In HTML 4.01, the
alt attribute is an additional requirement for the <area> tag
that displays a short description of a clickable area on a client-side imagemap when you pass your
cursor over it. Using the
<area> example that I cited, the alt attribute appears as shown in the following
example:
<area shape="rect" coords="41,16,101,32" href="test.html" alt="test link">

The
usemap Attribute
After you've created your <map> tag and defined the regions of your image using <area> tags, the next
step is to associate the map with the image. To do so, the
usemap attribute of the <img> tag is used. The
map name that you specified using the
name attribute of the <map> tag, preceded by a #, should be used
as the value of the

usemap attribute, as shown in this example:
<img mapname">
file:///G|/1/0672328860/ch07lev1sec8.html (7 von 13) [19.12.2006 13:48:56]
Creating Client-Side Imagemaps

Note
The value assigned to usemap is a standard URL. This is why mapname has a pound symbol (#)
in front of it. As with links to anchors inside a web page, the pound symbol tells the
browser to look for
mapname in the current web page. If you have a very complex
imagemap, however, you can store it in a separate HTML file and reference it using a
standard URL.

Task: Exercise 7.3. A Clickable Jukebox
Let's take a look at how to create a client-side imagemap for a real image. In this example,
you'll define clickable regions on an image of a jukebox. The image you'll be using appears
in
Figure 7.24.
Figure 7.24. The jukebox image.

First, define the regions that will be clickable on this image. There are six rectangular
buttons with musical categories on them, a center area that looks like a house, and a circle
with a question mark inside it.
Figure 7.25 shows regions on the image.
Figure 7.25. The jukebox with areas defined.
file:///G|/1/0672328860/ch07lev1sec8.html (8 von 13) [19.12.2006 13:48:56]
Creating Client-Side Imagemaps

Now that you know where the various regions are, you need to find the exact coordinates
of the areas as they appear in your image. You can use a mapping program like Mapedit, or

you can do it manually. If you try it manually, it's helpful to keep in mind that most image-
editing programs display the x and y coordinate of the image when you move the mouse
over it.
Getting Image Coordinates from the Browser
You don't have an image-editing program? If you use Netscape as your
browser, here's a trick: Create an HTML file with the image inside a link
pointing to a fake file, and include the
ismap attribute inside the <img> tag. You
don't need a real link; anything will do. The HTML code might look something
like the following:
<a href="nothing"><img src="myimage.gif" ismap></a>

When you load this into your browser, the image is displayed as if it were an
imagemap. When you move your mouse over it, the x and y coordinates
appear in the status line of the browser. Using this trick, you can find the
coordinates for the map file of any point on that image.

With regions and a list of coordinates, all you need are the web pages to jump to when the
appropriate area is selected. These can be documents, scripts, or anything else you can call
from a browser as a jump destination. For this example, I've created several documents
and stored them inside the
music directory on my web server. These are the pages you'll
define as the end points when the clickable images are selected.
Figure 7.26 identifies each
of the eight clickable areas in the imagemap.
Table 7.2 shows the coordinates of each and
file:///G|/1/0672328860/ch07lev1sec8.html (9 von 13) [19.12.2006 13:48:56]
Creating Client-Side Imagemaps
the URL that's called up when it's clicked.
Figure 7.26. Eight hotspots, numbered as identified in Table 7.2.


Table 7.2. Clickable Areas in the Jukebox Image
Number Type URL Coordinates
1
rect
music/classics.html 101,113,165,134
2
rect
music/country.html 101,139,165,159
3
rect
music/rockpop.html 101,163,165,183
4
poly
music/home.html 175,152,203,118 220,118,247,152
237,153,237,181 186,181,186,153
5
rect
music/swing.html 259,113,323,134
6
rect
music/jazz.html 259,139,323,159
7
rect
music/gospel.html 259,163,323,183
8
circle
music/help.html 379,152,21

For the jukebox image, the <map> tag and its associated <area> tags and attributes look like

the following:
<map name="jukebox">
<area shape="rect" coords="101,113, 165,134"
href="/music/classics.html"
file:///G|/1/0672328860/ch07lev1sec8.html (10 von 13) [19.12.2006 13:48:56]
Creating Client-Side Imagemaps
alt="Classical Music and Composers" />
<area shape="rect" coords="101,139, 165,159"
href="/music/country.html"
alt="Country and Folk Music" />
<area shape="rect" coords="101,163, 165,183"
href="/music/rockpop.html"
alt="Rock and Pop from 50's On" />
<area shape="poly" coords="175,152, 203,118, 220,118, 247,152,
237,153, 237,181, 186,181, 186,153"
href="code/music/home.html"
alt="Home Page for Music Section" />
<area shape="rect" coords="259,113, 323,134"
href="/music/swing.html"
alt="Swing and Big Band Music" />
<area shape="rect" coords="259,139, 323,159"
href="/music/jazz.html"
alt="Jazz and Free Style" />
<area shape="rect" coords="259,163, 323,183"
href="/music/gospel.html"
alt="Gospel and Inspirational Music" />
<area shape="circle" coords="379,152, 21"
href="/music/help.html"
alt="Help" />
</map>


The <img> tag that refers to the map coordinates uses usemap, as follows:
<img src="jukebox.gif" usemap="#jukebox">

Finally, put the whole thing together and test it. Here's a sample HTML file for The Really
Cool Music Page with a client-side imagemap, which contains both the
<map> tag and the
image that uses it:
Input
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
" /><html>
<head>
<title>The Really Cool Music Page</title>
</head>
<body bgcolor="#ffffff">
<div align="center">
<h1>The Really Cool Music Page</h1>
<p>Select the type of music you want to hear.<br />
You'll go to a list of songs that you can select from.</p>
<p>
<img src="jukebox.gif" alt="Juke Box" usemap="#jukebox" />
<map name="jukebox">
<area shape="rect" coords="101,113, 165,134"
href="/music/classics.html"
alt="Classical Music and Composers" />
<area shape="rect" coords="101,139, 165,159"
href="/music/country.html"
alt="Country and Folk Music" />
file:///G|/1/0672328860/ch07lev1sec8.html (11 von 13) [19.12.2006 13:48:56]
Creating Client-Side Imagemaps

<area shape="rect" coords="101,163, 165,183"
href="/music/rockpop.html"
alt="Rock and Pop from 50's On" />
<area shape="poly" coords="175,152, 203,118, 220,118, 247,152,
237,153, 237,181, 186,181, 186,153"
href="code/music/home.html"
alt="Home Page for Music Section" />
<area shape="rect" coords="259,113, 323,134"
href="/music/swing.html"
alt="Swing and Big Band Music" />
<area shape="rect" coords="259,139, 323,159"
href="/music/jazz.html"
alt="Jazz and Free Style" />
<area shape="rect" coords="259,163, 323,183"
href="/music/gospel.html"
alt="Gospel and Inspirational Music" />
<area shape="circle" coords="379,152, 21"
href="/music/help.html"
alt="Help" />
</map></p>
<p>
<a href="code/music/home.html">Home</a> |
<a href="code/music/classics.html">Classics</a> |
<a href="code/music/country.html">Country</a> |
<a href="code/music/rockpop.html">Rock/Pop</a> |
<a href="code/music/swing.html">Swing</a> |
<a href="code/music/jazz.html">Jazz</a> |
<a href="code/music/gospel.html">Gospel</a> |
<a href="code/music/help.html">Help</a>
</p>

</div>
</body>
</html>

Figure 7.27 shows the imagemap in a browser.
Output
Figure 7.27. The finished Really Cool Music Page with client-side
imagemap.
[View full size image]
file:///G|/1/0672328860/ch07lev1sec8.html (12 von 13) [19.12.2006 13:48:56]
Creating Client-Side Imagemaps



file:///G|/1/0672328860/ch07lev1sec8.html (13 von 13) [19.12.2006 13:48:56]