In an imagemap, different parts of the image are different links.. Client-Side ImagemapsClient-Side Imagemaps Although server-side imagemaps were in common use in the early days of the W
Trang 1Images and Links
Figure 7.14 shows the result
Output
Figure 7.14 The basic page with icons.
[View full size image]
Trang 2Images 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]
Trang 3Images 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
Trang 4Images and Links
Trang 5What 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
Trang 6What 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 http://httpd.apache.org/docs/mod/mod_imap.html
Trang 7Client-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
Trang 8Creating 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.
Trang 9Creating 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
Imaptool Linux/X Window System http://www.sspitzer.org/_imaptool/
Mapedit Windows/UNIX/Mac http://www.boutell.com/_mapedit/
Poor Person's Image Mapper Web-based http://www.pangloss.com/seidel/ClrHlpr/
imagemap.html
Trang 10Creating 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.