Images and Links

Figure 7.14 shows the result.
Output
Figure 7.14. The basic page with icons.
[View full size image]
file:///G|/1/0672328860/ch07lev1sec5.html (4 von 7) [19.12.2006 13:48:54]
Images and Links

Now add the anchors to the images to activate them:
Input
<a href="replacing.html"><img src="next.gif" alt="Next" /></a>
<a href="ready.html"><img src="back.gif" alt="Back" /></a>
<a href="index.html"><img src="uparrow.gif" alt="Up" /></a>

Figure 7.15 shows the result of this addition.
When you click the icons now, the browser jumps to the linked page just as it would have if
you had used text links.
Output
Figure 7.15. The basic page with iconic links.
[View full size image]
file:///G|/1/0672328860/ch07lev1sec5.html (5 von 7) [19.12.2006 13:48:54]
Images and Links

Speaking of text, are the icons usable enough as they are? How about adding some text
describing exactly what's on the other side of each link? You can add this text inside or
outside the anchor, depending on whether you want the text to be a hot spot for the link as
well. Here, include it outside the link so that only the icon serves as the hot spot. You also
can align the bottoms of the text and the icons using the
align attribute of the <img> tag.
Finally, because the extra text causes the icons to move onto two lines, arrange each one

on its own line instead:
Input
<hr />
<p><a href="replacing.html"><img src="next.gif" border="0" alt="Next" /></a>
On to "Gapping the New Plugs"<br />
<a href="ready.html"><img src="back.gif" border="0" alt="Back" /></a>
Back to "When You Should Replace your Spark Plugs"<br />
<a href="index.html"><img src="uparrow.gif" border="0" alt="Up" /></a>
Up To Index
</p>

See Figure 7.16 for the final menu.
Output
Figure 7.16. The basic page with iconic links and text.
[View full size image]
file:///G|/1/0672328860/ch07lev1sec5.html (6 von 7) [19.12.2006 13:48:54]
Images and Links



file:///G|/1/0672328860/ch07lev1sec5.html (7 von 7) [19.12.2006 13:48:54]
What Is an Imagemap?


What Is an Imagemap?
Earlier in this lesson, you learned how to create an image that doubles as a link simply by including the
<img> tag inside a link tag (<a>). In this way, the entire image becomes a link.
In an imagemap, different parts of the image are different links. You can specify that certain areas of a
map link to various pages, as in
Figure 7.17. Or you can create visual metaphors for the information

you're presenting, such as a set of books on a shelf or a photograph with a link from each person in the
picture to a page with his or her biography on it.
Figure 7.17. Imagemaps: different places, different links.

There are two kinds of imagemaps: server-side imagemaps and client-side imagemaps. Server-side
imagemaps were used in the earlier days of the Web, but they posed some problems for web authors,
and have fallen into disuse. In this lesson, client-side imagemaps, which are handled completely by the
browser, are used almost exclusively and offer many advantages over older, server-side imagemaps.
Server-side imagemaps are implemented using an image displayed by the client and a program that
runs on the server.
Client-side imagemaps work in the same ways as server-side imagemaps, except no program runs on
the server. All the processing of coordinates and pointers to different locations occurs in the browser.
file:///G|/1/0672328860/ch07lev1sec6.html (1 von 2) [19.12.2006 13:48:54]
What Is an Imagemap?
Every browser released since Netscape 2.0 supports client-side imagemaps, so there's not really any
reason to bother with server-side imagemaps any more. In this lesson, I'm only going to talk about
client-side imagemaps. To learn about server side imagemaps, check out the Apache
mod_imap
documentation at
/>

file:///G|/1/0672328860/ch07lev1sec6.html (2 von 2) [19.12.2006 13:48:54]
Client-Side Imagemaps


Client-Side Imagemaps
Although server-side imagemaps were in common use in the early days of the Web, their weaknesses
led Netscape to add support for client-side imagemaps to version 2.0, which was released in March
1996. Because they were vastly superior to server-side imagemaps, soon all the other browser makers
added support for them as well. Clientside imagemaps address the problems with server-side

imagemaps by eliminating the need for a special imagemap program on the server. Instead, they
manage all the imagemap processing locally in the web browser itself.
Later in this lesson, you'll learn how to create client-side imagemaps.
Imagemaps and Text-Only Browsers
Because of the inherently graphical nature of imagemaps, they work well only in graphical browsers.
Lynx, the most popular text-based browser, provides limited support for client-side imagemaps. If you
load a page in Lynx that contains a client-side imagemap, you can get a list of the links contained in the
imagemap.


file:///G|/1/0672328860/ch07lev1sec7.html [19.12.2006 13:48:54]
Creating Client-Side Imagemaps



Creating Client-Side Imagemaps
As mentioned previously, client-side imagemaps offer several improvements over serverside
imagemaps. The most significant improvement is that the link doesn't need to be processed on the
server. All modern browsers process the imagemap locally on the users' computers.
Getting an Image
To create an imagemap, you'll need an image (of course). This image will be the most useful if it has
several discrete visual areas that can be selected individually. For example, use an image that contains
several symbolic elements or that can be easily broken down into polygons. Photographs generally don't
make good imagemaps because their various elements tend to blend together or are of unusual shapes.
Figures 7.18 and 7.19 show examples of good and poor images for imagemaps.
Figure 7.18. A good image for an imagemap.

Figure 7.19. A not-so-good image for an imagemap.
file:///G|/1/0672328860/ch07lev1sec8.html (1 von 13) [19.12.2006 13:48:56]
Creating Client-Side Imagemaps


Determining Your Coordinates
Client-side imagemaps consist of two parts; the first is the image used for the imagemap. The second is
the set of HTML tags used to define the regions of the imagemap that serve as links. To define these
tags, you must determine the exact coordinates on your image that define the regions you'll use as links.
You can determine these coordinates either by sketching regions and manually noting the coordinates or
by using an imagemap creation program. The latter method is easier because the program automatically
generates a map file based on the regions you draw with the mouse.
The Mapedit program for Windows, Linux, and the Mac OS can help you create clientside imagemaps.
(See
Appendix A, "Sources for Further Information," for a full list of related FTP sites.) In addition, many
of the latest WYSIWYG editors for HTML pages and web graphics enable you to generate imagemaps.
Table 7.1 lists the current tools for generating imagemaps.
Table 7.1. Imagemap Creation Software
Name Platform URL
Imaptool Linux/X Window System
/>Mapedit Windows/UNIX/Mac
/>Poor Person's Image Mapper Web-based
/>imagemap.html

If you must create your imagemaps by hand, here's how. First, make a sketch of the regions that will be
active on your image.
Figure 7.20 shows the three types of shapes that you can specify in an
imagemap: circles, rectangles, and polygons.
Figure 7.20. There are three types of shapes available for creating imagemaps.
file:///G|/1/0672328860/ch07lev1sec8.html (2 von 13) [19.12.2006 13:48:56]
Creating Client-Side Imagemaps

You next need to determine the coordinates for the endpoints of those regions. Most image-editing
programs have an option that displays the coordinates of the current mouse position. Use this feature to

note the appropriate coordinates. (All the mapping programs mentioned previously will create a map file
for you, but for now, following the steps manually will help you better understand the processes
involved.)
Defining a Polygon
Figure 7.21 shows the x,y coordinates of a polygon region. These values are based on their positions
from the upper-left corner of the image, which is coordinate 0,0. The first number in the coordinate pair
indicates the x value and defines the number of pixels from the extreme left of the image. The second
number in the pair indicates the y measurement and defines the number of pixels from the top of the
image.
Figure 7.21. Getting the coordinates for a polygon.
file:///G|/1/0672328860/ch07lev1sec8.html (3 von 13) [19.12.2006 13:48:56]