Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day (5th Edition) P24 ppt

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 http://httpd.apache.org/docs/mod/mod_imap.html. 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 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 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] . you learned how to create an image that doubles as a link simply by including the <img> tag inside a link tag (< ;a& gt;). In this way, the entire image becomes a link. In an imagemap, different. 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. 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