Using Images in HTML

Images The Web was created as a graphical alternative to the text-only limitations of tools such as Gopher. As such, images play a pivotal role in Web documents—from being used as navigation aids and decoration, to conveying complex messages impossible with plain text. This chapter introduces the various image formats supported “natively” by most user agents and how to incorporate them into Web documents. Image Formats for the Web Most user agents support, to some degree, three graphics file formats: GIF, JPEG, and PNG. The GIF and JPEG formats have been supported for quite some time (since the origin of the Web), while PNG is relatively new. This section covers the basics of the image formats. Image compression All three of these graphics file formats use some form of compression to store your image. Why is compression important? Uncompressed images can be large—consider Table 6-1, which compares image dimensions, number of colors, and file size for some sample, uncompressed images. As you can see, with file sizes like this, you would have to limit yourself to mighty tiny images, or two-color, such as black and white, images. Or, you could compress the files. Compression options When you implement file compression, you either have to throw away some information about the image or find a way to store the existing information about the image in a more intelligent manner. GIF files throw away some color information. JPEG files throw away some information about the image itself. PNG files store the information using a more intelligent algorithm.

C 6H6A P T E R ✦✦✦✦ In This Chapter Image Formats for the Web Creating Graphics Inserting an Image Image Alignment Specifying Text to Display for NonGraphical Browsers Size and Scaling Image Borders and Maps Animated Images ✦✦✦✦

92 Part II ✦ HTML/XHTML Authoring Fundamentals

Cross- Reference See Chapter 38 for a lesson in creating animated GIFs. Transparent GIFs are discussed at the end of this chapter. Table 6-1 Uncompressed Image File Size Comparison by Image Dimensions and Number of Colors Dimensions (in Inches) 1×1 1×1 1×1 2×2 2×2 2×2 3×3 3×3 3×3 GIF Colors 2 256 16.7 million 2 256 16.7 million 2 256 16.7 million File Size 9K 9K 18K 16K 24K 63K 16K 49K 139K GIF was the earliest format in use in inline images on the Web. Version 1 browsers could open GIF images inline, but required that JPEG images be opened out-of-line. GIF uses a compression scheme—called LZW compression—that predates CompuServe, even though you might see it called CompuServe GIF. CompuServe implemented LZW compression, thinking it was in the public sphere and then found out it was proprietary. A lot of lawyers sorted it out. How does GIF work? Simply put, GIF indexes images to an 8-bit palette. The system palette is 256 colors. Before you can save your file in GIF format, the utility you are using simply makes its best guess at mapping all your colors to one of the 256 colors in an 8-bit palette. Is a reduction in color depth a problem? That depends. GIF uses dithering to achieve colors between two colors on the palette. Even with dithering, however, GIF images of a sunset have stripes of color, where a smooth gradation would be more natural. GIF images also tend to have more cartoonish colors because flesh tones aren’t part of the palette. A GIF image of a drawing of something like a checkerboard, however, will look just fine. Note A system palette is the 256 colors your monitor is able to display if you set your video board only to show 256 colors. These colors differ from a PC to a Mac.

Chapter 6 ✦ Images 93

JPEG JPEG takes a different approach. JPEG stands for the Joint Photographic Experts Group, the name of the group that created the standard. With JPEG, you get to keep all your colors, but you don’t get to keep all the data about the image. What kinds of images lend themselves to being compressed with JPEG? A tree. If you take a photo of a pine tree, the acorns are in specific places, but when the image is compressed and decompressed (opened on your Web page), the computer has to approximate where those acorns went, because it had to throw away some of the data. Is this a problem? Not with most photos of most pine trees. Faces also take well to JPEG because the colors are all there; faces in GIF can look unnatural because of the color loss. Every generation 3 and higher browser can handle inline JPEGs. JPEGs are also ideal for showing gradient filled graphics (when the color changes gradually from one color to another). The same graphic would suffer enormously under the GIF compression because all those in-between colors wouldn’t be there. What suffers under JPEG compression? Text, schematic drawings, and any line art. Of course, with JPEG, you can select the level of compression (usually either as a percentage or as Maximum, High, Medium, or Low). You generally want to use the maximum compression level your image can handle without losing image quality. You won’t know how much compression your image can handle without loss until you try it at different levels of compression. PNG The Portable Network Graphics, or PNG format, was developed exclusively for the Web and is in the public domain. The PNG format takes advantage of a clever way of storing the information about the image so you don’t lose color and you don’t lose image quality; it is a lossless format. The only drawback is, because the standard is so new, only fourth-generation and later browsers support PNG graphics. Eventually, PNG will replace GIFs for many color-rich, still image files. Only GIFs can support animation and transparency. Note File formats that implement compression schemes that discard information about the image are called lossy file formats. Both GIF, which discards color information, and JPEG, which discards image information, are lossy file for- mats. File formats that don’t discard any information about an image are called lossless. PNG is a lossless compression scheme. Image color depth In the computer world, everything is black or white, on or off. Computers operate in the base two system, so when creating colors, your choices of colors are base two numbers. A bit is a representation of on or off (1 or 0). One-bit color uses a two-color palette (21). Two-bit color uses a four-color palette (22). Eight-bit color uses a 256-color palette (28). Thirty-two-bit color uses a 16.7-million-color palette (232 ).

94 Part II ✦ HTML/XHTML Authoring Fundamentals

Note Between the two system palettes, there are 216 colors in common. This is called the 216-browser-safe palette. By limiting your graphics to colors from this palette, you can be sure the browser won’t have to guess or dither to achieve the color you want. You might be thinking: Two colors: that’s not so bad. An artist can do a lot with two colors; think of the ways you can blend them. Unfortunately, this isn’t how computers work. When you select a color palette, you get only the colors in that palette, not any blends of colors in that palette. When you create an image, you want to balance the quality of the image against the file size of the image. When you send an image file over the Internet to a Web page, you send either information about the palette or you send the actual palette. With GIF files, you send a color look-up table (CLUT) with the image. With JPEG files, you send a palette. As you can imagine, this makes the files considerably larger. Enhancing downloading speed What can you do to ensure your pages download quickly? There are a few things: ✦ Limit image file sizes. ✦ Limit the number of images. ✦ Reuse images as much as possible so images can be loaded from cache. ✦ Use frames so only part of the browser windows need to reload. ✦ Use text rather than images, where possible. Image file sizes You can limit image file sizes by doing the following: ✦ Using the maximum compression your image will take ✦ Using the smallest bit-depth your image can stand ✦ Minimizing the dimensions of your image on the page Test your pages at 640 × 480, 800 × 600, and 1024 × 768 to see how they will look to different visitors. Often, an image that renders well at 1024 × 768 and doesn’t dominate the page will look huge and overbearing at 640 × 480. Number of images How many images is the right number? You might be surprised to learn that sometimes very small images with white space between them load faster than one large image. Take advantage of white space to contribute to your images. You can use two intelligent techniques to get more image for the byte. By changing the background

Chapter 6 ✦ Images 95

Tip color to match the background color of your images, you can keep your images smaller. By anti-aliasing the text against that background to blend the edges into the background color, you can achieve the look of one large graphic with multiple small, fast-loading images. Reuse images Reusing images is as simple as having a single graphic for “home” on all your pages. Have a single bullet graphic (if you can’t stand to use the standard bullet) for every bullet on every page. Why does this help your pages load faster? Your browser checks to see whether an image it needs is already in cache and loads the image from cache, if it can. This reduces the number of bytes that actually needs to be downloaded. Use frames How can using frames speed download time? After the initial frameset loads, the browser will usually be loading one new frame at a time. Also, because the images are probably part of the banner and/or the navigational tools, the frame that does reload is less likely to be image-intensive. By putting all or most of the images into one of your frames and the mostly text-based content into your main frame, you can save visitors from having to load the images more than once. After the initial load, subsequent loads will be faster. Use text rather than images You’ve read this elsewhere in the book. You can use tricks to make text look somewhat like an image. Instead of using a graphic with boxes and buttons for navigation, use a table with cells assigned different background colors. Creating Graphics If you want to create top-notch graphics, the tool of choice among professionals is Adobe Photoshop, available for the Mac and the PC (see Figure 6-1). Freeware and shareware software programs also are available that perform subsets of the functions performed by Photoshop. Photoshop LE, the lite version, ships with many scanners. Essential functions What should your graphics package be able to do? For existing images, such as photographs, you want to sharpen, blur, and perform some special effects on the image (for example, posterize, swirl, and mosaic). For images you create on the screen, you want to create your own custom palette (so you can send as few colors as you need). You also need some basic artist tools, such as a paintbrush, a pencil, a spray can, and a magnifying glass for magnifying part of the image to see it better.

96 Part II ✦ HTML/XHTML Authoring Fundamentals

Figure 6-1: Adobe Photoshop. Regardless of whether the image is made by hand or based on a photograph or clipart, you need the following capabilities: ✦ ✦ ✦ ✦ ✦ ✦ Reduce the bit-depth of any image you want to save as GIF. Index the color of the image so you can save the image to GIF. Save the image as an interlaced GIF. Save the image as a transparent GIF. Save the image as a PNG file. Save the image as a progressive JPEG, which is discussed at the end of this chapter. Progressive JPEGs are a nice addition to a Web page. They work the same as interlaced GIFs. Before the entire image has been downloaded, you can begin to see the image. Then the images slowly come into focus. Note Free alternatives If you aren’t ready to commit to a $500 software package to get all these great functions, you can work with a number of small, free software packages and services that do many of the things previously listed for you. On the Web, you can find sites that turn your TIF file into a GIF, or make your GIF an interlaced GIF. The trade-off is

Chapter 6 ✦ Images 97

the time. Finding, learning, and using a variety of small packages to solve all your imaging needs obviously takes longer than learning one package and using it on your desktop. Capturing Graphics From Other Sites What about taking graphics you like from another site? This is generally not an okay thing to do. Unless you have explicit permission from the creator of the images—say, you are taking graphics from a site that makes free images available or you have written permission from the owner of the site—you are essentially stealing the images from the legitimate owner. Images are intellectual property and are protected by copyright laws, and using them without permission could get you an invitation to court. Just because an image is on a Web page doesn’t mean it is in the public domain. Yes, it gets downloaded onto your own computer (into cache), and, yes, your browser gives you the ability to save the image as a local file (using the right mouse button or prolonged clicking on a Mac), but it still doesn’t mean you own the image or the right to use the image. If you see something you like on another page, write to the page owner and ask if he or she owns the image and if you can use it. Chances are, the owner will be flattered by your request. Be sure that person owns the image or permission won’t mean anything (if the image was stolen from somewhere else). Note Progressive JPEGs and interlaced GIFs Once upon a time on the Web, you had to wait for an image to finish loading before you knew what it was. Today, you can save your files using the progressive JPEG format or the interlaced GIF format and watch the image come into focus as it loads. The advantage to this approach is a visitor to your site knows roughly what an image is before the entire image has downloaded. If download times are long, due to a poor Internet connection, for example, the visitor to the site can actually take a link off the page before the image has finished loading without missing anything. Finally, these two image formats are good because the visitor participates in the download time. Instead of waiting for the page to download—sitting idly by—the visitor waits for the page to download while watching the images become clearer. This is more of a reward for waiting—and less of a sense of waiting—for the visitor. Specifying the size of the image in the image tag can also speed up the display of your Web pages. See the Size and scaling section later in this chapter for more information. The sense of “coming into focus” that these types of images provide is the result of the way the images are stored. Progressive JPEGs and interlaced GIFs download only every eighth line at first, then every fourth line, then every second line, and then, finally, the odd-numbered lines. The result is the image goes from blurry to focused.

98 Part II ✦ HTML/XHTML Authoring Fundamentals

You create a progressive JPEG or an interlaced GIF by saving it into this format. In Paint Shop Pro, when you save a file as a GIF file you can choose whether you want the file to be normal or interlaced (see Figure 6-2). Freeware packages are also available that convert your regular JPEGs and GIFs into progressive JPEGs and interlaced GIFs. Figure 6-2: Paint Shop Pro allows you to choose whether you want your GIF to be interlaced or not. Using Transparency Two of the Web-supported graphics formats, GIF and PNG, support transparency, the ability for parts of images to be completely transparent. Typically, transparency is used to soften the edge of images, creating an illusion that the image is not rectangular. For example, see Figure 6-3, which shows an image with a standard opaque background and the same figure with a transparent background. The image with transparency allows the page background to show through. Using transparency can open up the design of a document, making it more airy and less “blocky.” It gives the document a more professional appearance, looking more like a pub- lished document than a Web page of the 1980s.

Chapter 6 ✦ Images 99

Different graphic editing programs handle transparency differently—some assign trans- parency to the background layer, some allow you to pick one color that should be trans- parent, some programs allow multiple colors to be transparent. Check the Help file for your editor to determine how to accomplish transparency. Figure 6-3: Transparency can soften an image, giving the appearance that the image is not rectangular. Inserting an Image Images are inserted into HTML documents using the <img> tag. The <img> tag, at a minimum, takes two attributes, alt and src. The alt attribute specifies text that should be displayed in lieu of the image in nongraphical browsers (see the section “Specifying text to display for nongraphical browsers” later in this chapter). The src attribute tells the user agent what image file should be displayed. For example, if you wanted to include the graphic cat.jpg in your document, you could use code similar to the following: <img alt=“A picture of a cat” src=“cat.jpg”>

100 Part II ✦ HTML/XHTML Authoring Fundamentals

Note The <img> tag has no closing tag. However, in XHTML the <img> tag must be closed: <img alt=“A picture of a cat” src=“cat.jpg” /> The src attribute’s value can be a file on the same Web server as the document, or any valid URL pointing to an image on a different Web server. Just as with the anchor tag, you can use absolute or relative URLs to specify the location of the image to display. The reasons for using either URL are the same as the reasons for using absolute or relative URLs in anchor tags. Cross- Reference For more information about absolute or relative URLs, see Chapter 7. Image Alignment Most user agents will attempt to display the image where the <img> tag is inserted. For example, consider the following HTML code and the resulting display shown in Figure 6-4: Figure 6-4: The browser displays the image at the end of the paragraph where the <img> tag is located.

Chapter 6 ✦ Images 101

Table 6-2 Align Attribute Values Note <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <img alt=“Picture of a cat” src=“cat.jpg”></p> If the user agent cannot fit the image on the current line, it will wrap it to the next line and follow the paragraph’s alignment and formatting. Note how the default formatting (at least for Internet Explorer) of the image is to be aligned with the baseline of neighboring text. This isn’t always ideal. At times, you will want to specify the alignment of the image as it relates to the text and other objects around it. Image alignment can be controlled by using the align attribute with the <img> tag. The align attribute can be set to the values shown in Table 6-2: Value Function Top Align with the top of nearby text or object Bottom Align with the bottom of nearby text or object Middle Align with the middle of nearby text or object Left Align to the left of nearby text or object Right Align to the right of nearby text or object Figure 6-5 shows an example of each of these alignment options. Most user agents render items in the order in which they appear in the docu- ment. If you are using left-aligned images, they should appear before the text that they should be positioned left of. However, the align attribute has been deprecated in favor of using styles for image alignment. The following CSS properties can be used to help align images: ✦ text-align—Used in surrounding text, this property aligns the text around an image (versus aligning the image itself). See Chapter 8 for more information on using the text-align property.

102 Part II ✦ HTML/XHTML Authoring Fundamentals

Figure 6-5: The various alignment options for images. ✦ float—Floats the image to the right or left of the user agent. Note that some user agents do not support the float property. The float property allows text and other objects to wrap next to the image. ✦ vertical-align—Aligns the image vertically with neighboring text or objects. Note that some user agents need to process the image alignment prior to the text around it; if you are using CSS to position your images, it is usually best to position the images before neighboring text in your HTML document. Specifying Text to Display for Nongraphical Browsers As mentioned repeatedly in this book, it is important not to get caught up in the graphical nature of the Web, forgetting that not all user agents support graphics. In addition, some users turn off images in their browser to speed up browsing. You can use the alt attribute of the <img> tag to specify text that should be displayed when the image cannot. For example, consider the following text and the display in Figure 6-6: <p><img alt=“Picture of a cat” src=“cat.jpg” style=“float: right” width=“70px”> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

Chapter 6 ✦ Images 103

tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> Figure 6-6: The alt attribute specifies text to use when the image cannot be displayed. Some user agents display the alt attribute text when the user mouses over the image. This allows you to use the alt attribute to include additional information about an image. If you have a lot of information to convey, consider using the longdesc (long description) attribute as well. The longdesc attribute specifies a URL to a document that is to be used as the long description for the figure. Note that it is up to the user agent to decide how to enable access to the long description, if at all. Size and Scaling You can specify the size of an image by using the height and width attributes of the <img> tag. These attributes accept pixel and percentage values, allowing you to specify the exact size of an image or a size relative to the current size of the browser window.

104 Part II ✦ HTML/XHTML Authoring Fundamentals

Tip Get in the habit of always using the width and height attributes with your <img> tags. These attributes allow the user agent to reserve the correct amount of space for the image while it continues to render the rest of the document. Without these attributes, the user agent must wait for the image to be loaded before continuing to load the rest of the document. For example, suppose that you had a large, high-resolution image, but wanted to display a smaller version. Using the pixel values of the sizing attributes, you can specify a custom size of the larger image. For example, consider the following code and the resulting display in Figure 6-7: <!-- Full image is 180px wide --> <p>Full Size Image<img alt=“Full size image” src=“car.jpg”></p> <p>Half Size Image<img alt=“Half-size image” src=“car.jpg” width=“90px”></p> Figure 6-7: Using percentage values, you can display an image at any percentage of its normal size. Note It is important to use both the correct height and width when specifying image dimensions in an <img> tag. If you change the proportions of the figure (by specifying a wrong width or height), you will end up with a funhouse mirror effect—the image will be stretched or shrunk in one dimension. Sometimes this can be used for effect, but usually it is accidental.

Chapter 6 ✦ Images 105

Also note that you can specify only one of the dimensions and have the user agent automatically figure out the other. However, the user agent must then wait for the entire image to load before progressing with rendering the rest of the page, so it is always better to specify both dimensions. Image size attributes should not be used as a substitute for an appropriately sized graphic. If you need a different sized image, create the appropriate size in an image editor and use the new image instead. Although the width and height attributes can be used to display an image smaller than it actually is, the user agent must still download the entire image—the user agent must then scale the image accordingly. Image Borders You can use CSS styles to create borders around images. Previous versions of HTML supported a border attribute for the <img> tag, which worked similarly to the border attribute of the <table> tag. However, this attribute has been deprecated for use with the <img> tag. Instead, you should use styles. CSS supports quite a few border properties, as shown in Table 6-3. Property border-color border-style border-top border-bottom border-left border-right border-top-width border-bottom-width border-left-width border-right-width border-width Options border-color border-style border-width border-style border-color border-width Use Set the color of the border Set the style of the border Define individual sides of the border Define the width of the individual sides of the border Table 6-3 CSS Border Properties Border border-width border-style border-color Define a simple border around all four sides of the object, specifying the width, style, and color in one property border-top-color border-color Define the color of the individual sides of the border-bottom-color border border-left-color border-right-color border-width Define the width of the border

106 Part II ✦ HTML/XHTML Authoring Fundamentals

Tip For example, to define a 4-pixel-wide border around an entire image, you can use the following code: <img alt=“A picture of a cat” src=“cat.jpg” style=“border: 4px solid black;”> To define a border on just the left and right sides of an image, you would use the following: <img alt=“A picture of a cat” src=“cat.jpg” style=“border-left: 4px solid black; border-right: 4px solid black;”> To simplify defining a different border on one side of an image, use the border property first to define a border on all sides and then the appropriate border- side property for the side that is the exception, overriding the previous setting for that side. For example, to create a border on all sides of an image except the right, you could specify border-top, border-bottom, border-left, and border-right properties individually. Or, you could use just border and border-right: <img alt=“A picture of a cat” src=“cat.jpg” style=“border-left: 4px solid black; border-right: none;”> Image Maps Image maps provide a way to map certain areas of an image to actions. For example, a company Web site might want to provide a map of the United States that allows customers to click a state to find a local office or store. There are two types of image maps, client-side and server-side. Client-side image maps rely upon the user agent to process the image, the area where the user clicks, and the expected action. Server-side image maps rely upon the user agent only to tell the server where the user clicked; all processing is done by an agent on the Web server. Between the two methods, client-side image maps are generally preferred. They allow the user agent to offer immediate feedback to the user (like being over a clickable area) and are supported by most user agents. Server-side agents can also bog down a server if the map draws consistent traffic, hides many details necessary to provide immediate feedback to the user, and might not be compatible with some user agents. Tip If you want an image to be clickable and take the user to one particular desti- nation, you don’t have to use an image map. Instead, embed the <img> tag in an appropriate anchor tag (<a>) similar to the following: <a href=“catpage.html”><img alt=“Picture of a cat” src=“cat.jpg”></a>

Chapter 6 ✦ Images 107

Specifying an image map A client-side image map is generally specified within the contents of a <map> tag and linked to an appropriate <img> tag with the <img> tag’s usemap attribute. For example, to specify a map for an image, travel.jpg, you could use this code: <img alt=“Travel reservations” src=“travel.jpg” usemap=“#map1”> <map name=“map1”> ... </map> Inside the <map> tags you specify the various clickable regions of the image, as covered in the next section. Specifying clickable regions To specify an image map, a list of polygonal regions must be defined on an image and referenced in the HTML document. Three different types of polygons are supported: rectangle, circle, and free-form polygon. ✦  rect—Defines a rectangle area by specifying the coordinates of the four corners of the rectangle. ✦  circle—Defines a circle area by specifying the coordinates of the center of the circle and the circle’s radius. ✦  poly—Defines a free-form polygon area by specifying the coordinates of each point of the polygon. Note that all coordinates of the image map are relative to the top-left corner of the image (effectively 0, 0) and are measured in pixels. For example, suppose you wanted an image for a travel site with a picture of a car, plane, and hotel. When the user clicks one of the pictures, they are taken to the right page for auto rentals, airfare, or hotel reservations. Such an image would resemble the image shown in Figure 6-8. Figure 6-8: An image ready to be used as an image map.

108 Part II ✦ HTML/XHTML Authoring Fundamentals

Tip The regions that can be used for the map are within the three icon squares (the white squares around the icons). The regions are all rectangular, uniform in size (121 pixels square), and have the following upper-left coordinates: ✦ car—35 x, 11 y ✦ plane—190 x, 11 y ✦ hotel—345 x, 11 y Knowing the upper-left corner coordinates and the size of each rectangle, you can easily figure out the coordinates of the bottom-right corner of each rectangle. Several tools are available to help create image map coordinates. Use your favorite search engine to find a dedicated piece of software to map regions, or examine your graphics program to see if it can create regions for you. Paint Shop Pro is an excellent Windows-based image editor that has image map tools built in. Specifying regions using anchor tags You can specify regions using anchor tags with shape and coords attributes. For example, to specify the three regions previously outlined, you could use the following: <map name=“map1”> <a href=“plane.html” shape=“rect” coords=“35,11,156,132”> Plane Reservations</a> <a href=“car.html” shape=“rect” coords=“190,11,311,132”> Rental Cars</a> <a href=“hotel.html” shape=“rect” coords=“345,11,466,132”> Hotel Reservations</a> </map> Note that the link text helps the user determine what the clickable area leads to, as shown by the Internet Explorer ToolTip in Figure 6-9. Specifying regions using area tags Another way to define regions is by using <area> tags instead of anchors: <map name=“map1”> <area href=“plane.html” shape=“rect” coords=“35,11,156,132” alt=“Plane Reservations”> <area href=“car.html” shape=“rect” coords=“190,11,311,132” alt=“Rental Cars”> <area href=“hotel.html” shape=“rect” coords=“345,11,466,132” alt=“Hotel Reservations”> </map>

Chapter 6 ✦ Images 109

In the case of the <area> tag, using the alt attribute helps the user determine what the clickable area leads to, as shown by the Internet Explorer ToolTip in Figure 6-9. Figure 6-9: The link or alt text of a clickable region helps the user determine where the clicked region leads. Putting it all together A document with a working image map (as outlined in this section) would resemble the following code: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”> <html> <head> <title></title> </head> <body> <img alt=“Travel Plans” src=“travel.jpg” usemap=“#map1”> <map name=“map1”> <area href=“plane.html” shape=“rect” coords=“35,11,156,132” alt=“Plane Reservations”> <area href=“car.html” shape=“rect” coords=“190,11,311,132” alt=“Rental Cars”> <area href=“hotel.html” shape=“rect” coords=“345,11,466,132” alt=“Hotel Reservations”> </map> </body> </html>

110 Part II ✦ HTML/XHTML Authoring Fundamentals

Note The image map example in this chapter is somewhat simplistic, using three identical rectangles for its regions. Image maps can be used for more complex purposes, such as the clickable U.S. map mentioned earlier in this chapter, allowing users to click various buildings on a map for more information, or parts on an exploded diagram of a machine. Animated Images The GIF format also supports rudimentary animation by showing different frames of an image one after another. The effect is similar to drawing individual frames of animation on different pages of a sketchbook and rapidly flipping the pages. Animated GIF images are not supported by all user agents and should be used sparingly due to their size—the image must store all the frames of the animation, increasing the size of the image. Some image editors include tools to help create animated GIF images, such as Jasc Software’s Animation Shop, shown in Figure 6-10. Figure 6-10: Programs such as Jasc Animation Shop can help you create animated GIFs, in this case the animation of a spinning CD-ROM.

Chapter 6 ✦ Images 111

Summary In this chapter, you learned the basics of image formats and how you can include them in your HTML documents. You learned the benefits and drawbacks of each supported format, as well as how to include and format them in an HTML document. Continue to read the chapters in order if you are new to HTML, learning each aspect of creating Web documents. If you are not new to HTML and you are particularly interested in media (images, video, and so on), check out Chapter 14.