Copyright ©1996, Que Corporation. All rights reserved. No part of this book may be used or reproduced in any form or by any means, or stored in a database or retrieval system without prior written permission of the publisher except in the case of brief quotations embodied in critical articles and reviews. Making copies of any part of this book for any purpose other than your own personal use is a violation of United States copyright laws. For information, address Que Corporation, 201 West 103^rd Street, Indianapolis, IN 46290 or at support@mcp.com.

Notice: This material is excerpted from Running A Perfect Web Site with Apache, ISBN: 0-7897-0745-4. The electronic version of this material has not been through the final proof reading stage that the book goes through before being published in printed form. Some errors may exist here that are corrected before the book is published. This material is provided "as is" without any warranty of any kind.

One of the strongest draws to the World Wide Web is graphics. In 1993 with the 2.0 release of NCSA Mosaic, inline graphics became part of Web pages and made them much more interesting than plain-text documents. Now, just a handful of years later, it's possible to animate the graphics on a Web page by using server push techniques (for the Netscape Navigator) or by using Java, the newest trend in Web programming languages. While these applications are compelling, they are, unfortunately, outside the scope of an introductory chapter on graphics.

Web graphics basically come in two flavors: gif (for Graphics Interchange Format), a format developed by CompuServe, and JPEG (for Joint Picture Experts Group). Each format has its merits and drawbacks. You'll want to choose one or the other based on how you're using images on your pages. If you have designers at your disposal to produce your graphics, all you need to do is take the hand-off from them and put the files where they belong on your server. Otherwise, you'll need to develop some expertise in a graphics program so you can create your own.

In Chapter 9, you learned how to use the <IMG ...> tag to place an inline image in your documents. You later saw that sandwiching an <IMG ...> tag between the <A ...> and </A> tags set up a linked graphic, or hypergraphic, that users can click on to jump to another document. An extension of this idea is the imagemap. Imagemaps are graphics that have been divided into special sections called hot regions. Clicking on different hot regions instructs the browser to load different URLs. You've probably seen imagemaps on the main pages of many Web sites, where they provide a popular point-and-click interface to the rest of the site. The first implementation of imagemaps placed the burden of figuring out which URL to load squarely on the server (server-side imagemaps), but the current trend is to shift this burden to the client (client-side imagemaps).

In this chapter, you learn about:

• The basics of the gif and JPEG graphics formats

• Several different graphics programs and what features they have to assist with the development of Web page graphics

• Server-side and client-side imagemaps

• Tools to help you create and test imagemaps

Graphics Standards

It is often possible to configure a browser to use a helper application to display images stored in formats other than gif or JPEG. For example, you can instruct the browser to run a TIFF format viewer if it encounters an image file that has a .tif extension.

The next few sections look at some of the specifics of the gif and JPEG formats.

gif

How gif Works

gif employs a compression scheme called LZW compression to reduce the amount of data it needs to send to completely describe the image. LZW compression works best on simple images like line drawings or graphics with a only a few distinct colors. For more color-rich images, LZW is less efficient, producing compression ratios around 2:1 or less.

Interlaced gifs

An interlaced gif file contains the same image data as a regular gif file, but it is organized differently. As a browser decodes an interlaced gif, it receives incomplete information about the entire image. As it presents this information on-screen, an incomplete version of the whole image shows up. Because it is incomplete, the quality of the image will not be very good, but it is usually good enough to impart a sense of what the final image will look like. As it continues to read more data, the approximation to the actual image is improved, producing a "fade in" effect. When the browser reaches the end of the file, it has all of the image data and it makes the last few changes to the approximate image to reproduce the original. The advantage to this approach is that the user can quickly get a sense of the what the entire image looks like without having to wait for the whole thing to load.

Transparent gifs

Fig. 11.1 - Transparent gifs have one color that is always changed to the background color, allowing the background to show through.

When you knock out the background behind an object in an image, you tend to get a "stairstep" pattern along the boundary, rather than a smooth curve. You can see this with the oval on the right in figure 11.1. To alleviate the stairstep pattern, you can use anti-aliasing. By anti-aliasing the image, you change the color of pixels on the boundary to a color halfway between the color inside the boundary and the color outside the boundary. By being colored with this middle-ground color, the boundary appears less jagged.

A number of the programs discussed in the "Graphics Programs" section of this chapter can create interlaced and transparent gifs.

Animation

Not all browsers have decoders that are sophisticated enough to properly present an animation. Version 2.0 of the Netscape Navigator does though. If you're using Netscape 2.0, you can check out the URL http://members.aol.com/royalef/gifanim.htm to see some sample gif animations and learn how to create them.

JPEG

How JPEG Works

When you decompress a JPEG image, there is always some amount of loss, meaning the image will not look exactly the way it did originally. Fortunately, JPEG's compression/decompression scheme is such that the lost image data is in the higher color frequencies where it is harder for the human eye to detect the differences. In spite of this loss, you can still use JPEG to achieve compression levels of about 10:1 or 20:1 without appreciable change in the image. This means you've changed from storing 24 bits per pixel to 1 or 2 bits per pixel - a very impressive savings! As noted above, you can take the compression ratios even higher, but as you do, the loss becomes more and more detectable.

Progressive JPEGs

In a Windows environment, you have a few options for converting to p-JPEG. The Independent JPEG Group (IJG) offers a series of command line programs for working with JPEG and p-JPEG files. You can download the source code from ftp://ftp.coast.net/SimTel/msdos/graphics/jpegsrc6.zip. Version 1.C of LView Pro (described later in this chapter) can also handle p-JPEGs.

There is no analogy for transparency in the JPEG format. The approach to transparency requires the selection of one color to be transparent. Because there can be data loss in JPEG compression/decompression, it's possible that a pixel colored with the transparent color may change to a slightly different color during the compression/decompression computations. Similarly, a pixel colored with a non-transparent color could become transparent and disappear. Either situation would undo the transparency effect you want to achieve.

Growing Acceptance

• Netscape Navigator 2.0

• Microsoft Internet Explorer 2.0 (under Windows 95)

• Spyglass Enhanced Mosaic 2.1

• UdiWWW 1.0.010

• Java 1.0

An extensive list of frequently asked questions about the JPEG format can be found at http://www.cis.ohio-state.edu/hypertext/faq/usenet/jpeg-faq/top.html.

When Should I Use JPEG over gif?

Another factor is speed. A well-compressed JPEG version of an image is likely to be much smaller than a gif of the same image. Smaller file size means faster transmission time over the Internet. In some cases, once the file arrives at the browser or image decoder, you can further speed things up by configuring the decompression process to use reduced accuracy in doing the necessary calculations. However, this will increase data loss and reduce image quality.

A third reason is portability. With gifs, you're locked into 256 colors. JPEGs make no predetermination of how many colors to use, so it is more useful for transferring images among systems with different display hardware.

On the flip side, you'll want to use gifs for images with a few distinct colors, for black-and-white art like line drawings, and for images with sharp color changes. Most logos and icons found on Web pages fall into this category. Also, if you need an image with a transparent background, you have to use the gif format because there is no way to achieve transparency with JPEGs.

Graphics Tools

UNIX Tools

Xv is a full image manipulation program. If xpaint is the poor man's Adobe Illustrator, xv is a poor man's Adobe Photoshop. Not only can it be used to view images, it has a very extensive array of color and palette manipulation tools, can convert into and from a large number of content types, and cut and paste regions of the image. Xv is available from ftp://ftp.cis.upenn.edu/pub/xv/.

Finally, Adobe PhotoShop is available on a couple UNIX platforms, and is the UNIX graphics creation tool of choice for most high-end graphics sites.

Microsoft Paint

Fig. 11.2 - Microsoft Paint is a basic graphics program that comes bundled with Windows.

Paint's tool palette lets you select one of many tools you can use to create and color graphical items and text. The lower four tools let you create rectangles with square or rounded corners, polygons, and ellipses. You can color the regions you create with the Pencil, Brush, Airbrush, or Fill tools.

To create circles in Paint, use the Ellipse tool while holding down the Shift key.

The Text tool enables you create pieces of text in various sizes and fonts. Be sure to turn on the Text Toolbar under the View menu when placing text as this will make changing text attributes easy.

The rest of Paint's tools are equally handy. If you just need a simple line or curve, the Line and Curve tools (found just above the Rectangle and Polygon tools, respectively) provide an easy way to produce one. The Magnify tool increases the magnification of the image so you can do detailed work on small parts of it. The Erase tool can erase anything you've drawn by moving the tool over the image and holding down the left mouse button.

At the bottom left of the Paint window, you'll find the color palette. Left-clicking on a color sets the foreground color to that color. Right-clicking a color does the same thing for the background. The default foreground/background combination is black on white.

Most of Paint's menu options are fairly standard or self-explanatory. The Image menu gives you options to flip, rotate, stretch, or skew your image and to modify its size and colors.

One useful feature that you find in Paint and most other graphics programs is a readout of the x and y coordinates of the pointer or cursor as you move it over the graphic. When you learn about imagemaps later in the chapter, you'll see that knowing certain coordinates on the image is critical to defining the hot regions on an imagemap.

For all of its features, Paint has one major drawback in the context of creating Web graphics: it can't save images in the gif or JPEG formats. If you want to use a Paint graphic on the Web, you need to convert it from a Windows bitmap to a gif or a JPEG using a format converter or a different graphics program.

LView Pro

The information on LView Pro presented here is based on the evaluation copy of version 1.C/32. You can download the latest version of LView Pro by pointing your browser to http://www.std.com/~mmedia/lviewp.html. A license costs US$30.00 plus US$5.00 for shipping and handling.

Figure 11.3 shows the LView Pro window along with its extensive tool palette. Almost every tool in the palette corresponds directly to one of LView Pro's menu options.

Fig. 11.3 - LView Pro's tool palette enables you to make modifications to most aspects of an image.

One nice feature is that LView Pro will let you open multiple images. This makes it easy to cut, copy, and paste objects from one image file to another. When you save an image, you can use LView Pro as a format converter and choose a format different from the original.

Notice that LView Pro doesn't have tools to create rectangles, polygons, and ellipses like Paint does. Indeed, the only LView Pro tool for creating anything is the Add Text tool. It stands to reason then that you'll probably have to use a different program to create your graphics. But what LView Pro lacks in ability to create, it makes up for with its ability to make very particular changes to an image.

LView Pro lets you change just about any facet of the image you could ever want. Tools on the palette call up dialog boxes to modify quantities like:

• Image brightness and contrast

• Red, Green, and Blue (RGB) color components

• Hue, Saturation, and Value (HSV) values

• Luminance and Chrominance (YCbCr) values

• Transformation maps and filters for RGB color components

Other tools let you convert the entire image from color to grayscale or to its photographic negative.

Used in conjunction with a program that has more graphics creation capabilities, LView Pro is powerful editing tool that you can use to fine-tune the images you make for your Web pages.

Paint Shop Pro

The following information on Paint Shop Pro is based on the Shareware 3.11 version of the program. You can download this version from ftp://ftp.the.net/
mirrors/ftp.winsite.com/pc/win95/desktop/psp311.zip. A license costs US$69.00 plus US$5.00 for shipping and handling.

Figure 11.4 shows an image loaded into Paint Shop Pro along with the many available tool panels that give you single-click access to Paint Shop Pro's functions. The Zoom panel lets you zoom in to magnifications as high as 16:1 and out to magnifications as low as 1:16. Tools on the Select panel sample colors, move the image around in the window, define a custom area of the image to clone or resize, and change the foreground and background colors. The Paint panel is a welcome addition to Paint Shop Pro that was not available in earlier versions. It supports 22 different tools that you can use to make your own graphics. These tools let you create brush, pen, pencil, marker and chalk effects; draw lines, rectangles and circles; fill a closed region with color; add text; and sharpen or soften part of an image. The Histogram window gives you a graphic representation of the luminance of all colors in the image, measured with respect to the brightest color.

You can toggle any of the tool panels on or off by using options found under the View menu.

Fig. 11.4 - Paint Shop Pro's tool panels give you easy access to common painting and image manipulation functions.

Paint Shop Pro is a versatile program that can open images stored in 25 raster (pixel-based) formats, including gif and JPEG, and 9 meta/vector (image components stored as geometric shapes that combine to produce the entire image) formats, including CorelDRAW!, Micrografx, and Ventura. However, it can only save in one of the raster formats. Nevertheless, Paint Shop Pro is still handy for converting to pixel-based formats. The Batch Conversion option under the File menu lets you select any number of files to convert to a new storage format.

TWAIN refers to a set of industry standards that allow graphics programs to work with image acquisition hardware like scanners. If you have a TWAIN-compliant scanner attached to your computer, you can use the File|Acquire option to scan in a new image. The Select Source option, also under the File menu, lets you choose what device you want to use for the acquisition.

Under the Image menu, you'll find options to do many of the standard manipulations like flipping the image upside down, creating a mirror image of an image, and rotating the images. The Image|Resample option allows you to change the size of an image with the jagged edges you get by standard resizing. You'll also find several effect filters under the Image menu that let you add or remove noise, enhance darker or lighter colors, and blur, sharpen or soften the image. You can even define effect filters of your own.

The Colors menu is host to many standard functions such as adjustment of brightness, gamma correction and RGB values, and conversion to grayscale or photographic negative versions of an image. You can also load, modify and save color palettes from the Colors menu. The Increase and Decrease Color Depth options allow you to change the number of colors being used to render the image.

One very useful feature of Paint Shop Pro is its screen and window capture facility. Options under the Capture menu let you capture the whole screen, a single window on the screen, the client area inside a window, or a user-define area. You can also choose whether or not the mouse pointer should be included in the capture and which hotkey will activate the capture.

Paint Shop Pro alone is a very capable image editing program ,but you can also purchase it bundled with Kai's Power Tools SE for added functionality. To order this combination package, contact JASC sales at 1-800-622-2793.

Micrografx Picture Publisher 6.0

Fig. 11.5 - Micrografx Picture Publisher 6.0 is a feature-rich image creation and editing program.

To completely describe all of Picture Publisher's many features would fill several chapters, so the discussion here is limited to those features related to creating Web graphics. In addition to image painting capabilities that exceed those of Microsoft Paint and editing capabilities that at least match those of LView Pro, Picture Publisher supports the creation of Web graphics with features like:

• Transparent and interlaced gif creation

• Effect filters to sharpen or smooth image edges or to lighten or darken an image

• Layers that act like sheets of acetate; you can place image objects on separate layers and then overlay them to produce the entire image

• Anti-aliasing of object edges

• Easy-to-create 3-D effects like drop shadows

• Support for creating custom textures like wood grain or brushed steel

• Filters that let you export your image in one of over 30 formats, including gif and JPEG

• A highly customizable editing environment that lets you create your own "toolboxes" of tools, commands, and macros.

The other programs that come bundled with Picture Publisher 6.0 add value to the entire ABC Graphics package. ABC FlowCharter makes it easy to create diagrams and charts. Micrografx Designer is a useful graphics illustrator program and the ABC Media Manager puts over 30,000 clipart images, photos, and diagramming symbols at your fingertips.

For all you get, you'd probably expect that the Micrografx ABC Graphics Suite isn't shareware - and you'd be correct. However, a license for the entire package costs substantially less than what other stand-alone graphics programs might run you. Since software prices can change rapidly, you should consult your software dealer or Micrografx (1-800-671-0144) for the most up-to-date price information.

To learn more about the complete Micrografx product line, check out their newly redesigned Web site at http://www.micrografx.com/.

Adobe Photoshop

Just as with Micrografx Picture Painter, a full description of all of Photoshop's features would fill volumes. Photoshop supports many of the useful features noted for Picture Publisher like transparent and interlaced gifs, layers, anti-aliasing, drop shadows, and broad graphics file support, plus several others including:

• Numerous plug-in programs that support custom effect filters and emerging image formats like progressive JPEG

• Many options for dithering to lower color depths and different color palettes

• Highly efficient memory management

• A flawless interface with other Adobe products like Illustrator and PageMaker

Because it is so powerful, Photoshop doesn't come cheap. Depending on what platform you want to run Photoshop on, a single license can set you back almost $1000. Check with your software retailer or Adobe for current pricing.

For more information about Photoshop and other Adobe products, visit their Web site at http://www.adobe.com/.

Implementing Imagemaps

The major difference between the two approaches is where you find the information that defines the map hot regions and the URLs associated with those regions. For a server-side imagemap, the information is found in a map file that resides on the server. With client-side imagemaps, the information is embedded in the htmL code that produces the page the imagemap is on.

Server-Side Imagemaps

In order for a server-side imagemap to work, several configuration steps are necessary. First, depending on what server software you use, certain imagemap support files must be present on your server. Second, you must create the graphic and determine the coordinates that define the various hot regions. These coordinates, along with the URLs associated with each hot region, are used to make up the map file. Finally, you need to set up the <IMG ...> tag that places the image so that the client knows it's dealing with an imagemap and what the name of the map file is.

Configuring Your Server for Server-Side Imagemaps

Second, for NCSA and CERN httpds, you need write permission to the imagemap.conf file in the server's conf directory. This file maps image names, which you create, to their associated map files. You have to add a line to this file for each new imagemap you create. The format of the imagemap.conf file is simple:

image_name : physical_path

homepage : /maps/homepage.map
buttonbar : /maps/buttons.map
usmap : /maps/countries/us.map

Creating a Graphic and Defining Hot Regions

Imagemap scripts can process hot regions that are rectangles, circles, and polygons. Lines in a map file define these regions using the minimum number of (x,y) coordinates required to completely describe the region. Rectangles are defined by the coordinates of the upper-left and lower-right corners, circles by the coordinates of its center and a point along the circle itself, and polygons by the coordinates of its vertices. Coordinates are measured with respect to the upper-left corner of the image, which is taken to have the coordinates (0,0). The x-coordinate increases as you move to the right along the image and the y-coordinate increases as you move down the image.

Each line in a map file defines one hot region and specifies the URL associated with the hot region. For example:

rect URL upper_left(x,y) lower_right(x,y)
circle URL center(x,y) edge_point(x,y)
poly URL vertex1(x,y) vertex2(x,y) vertex3(x,y) ...

The CERN imagemap facility uses the keywords rectangle, circle, and polygon instead of NCSA's and Netscape's rect, circle, and poly. In addition, the format of the map file is slightly different.

Netscape's imagemap script recognizes the keyword point in a map file as well. It is followed by the URL and the coordinates of the point.

You can also include a line in the map file beginning with the keyword default, which specifies what action to take if the coordinates of the mouse click are outside any hot region.

If you're doing imagemaps on a Netscape server, avoid using point and default lines in the same map file. If one or more point lines is specified, a click outside of a hot region is taken to be a click at the nearest hot point. This means that any default URL is disregarded.

Figure 11.6 shows a gif file to be set up with links to several government sites. The image contains a rectangle, a circle, and a pentagon (5-sided polygon) whose defining coordinates and associated URLs are shown in table 11.1.

Fig. 11.6 - A gif file to be linked to three different government sites.

Table 11.1 Defining Coordinates and URLs for Sample Imagemap

Shape	Coordinates	URL
Rectangle	(36,70),(252,146)	http://www.loc.gov/
Circle	(214,219),(269,221)	http://www.whitehouse.gov/
Polygon	(389,61),(480,125), (459,231),(334,230), (305,131)	http://www.dtic.dla.mil/defenselink/

At this stage, your only option for finding the necessary coordinates is to use the pointer in your graphics program and read the coordinates from the program window. Later in the chapter, you'll learn about imagemap tools that let you create a map file without knowing the coordinates. These tools let you trace over shapes on your graphic and it figures out the coordinates for you.

Using the coordinates and URLs in table 11.1, you can write the map for the imagemap. In this case, the file would be:

rect http://www.loc.gov/ 36,70 252,146 
circle http://www.whitehouse.gov/ 214,219 269,221 
poly http://www.dtic.dla.mil/defenselink/ 
    389,61 480,125 459,231 334,230

AddType application/x-httpd-imap map

<A HREF="main-menu.map">
<IMG SRC="menu.gif"  ALT="Menu" ISMAP>
</A>

<A HREF="/cgi-bin/imagemap/govtsites">
<IMG SRC="images/govtsites.gif" ISMAP></A>

govtsites :/maps/govtsites.map

<IMG SRC="logo.gif" ALT="Company Logo" 
    WIDTH=120 HEIGHT=80>

<fig SRC="logo.gif" WIDTH=120 HEIGHT=80>
Company Logo
</fig>

<fig SRC="images/govtsites.gif" WIDTH=530 
    HEIGHT=300>
<B>Select a government site to visit:</B>
<UL>
<LI><A HREF="http://www.loc.gov/" 
    SHAPE="rect 36,70,252,146">Library of Congress</A></LI>
<LI><A HREF="http://www.whitehouse.gov/" 
    SHAPE="circle 214,219,269,221">
The White House</A></LI>
<LI><A HREF="http://www.dtic.dla.mil/defenselink" 
    SHAPE="polygon 
        389,61,480,125,459,231,334,230,305,131"></A></LI>
</UL>
</fig>

<MAP NAME="govtsites">
<AREA SHAPE="RECT" COORDS="36,70,252,146" 
    HREF="http://www.loc.gov/">
<AREA SHAPE="CIRCLE" COORDS="214,219,269,221"
HREF="http://www.whitehouse.gov/">
<AREA SHAPE="POLYGON" 
    COORDS="389,61,480,125,459,231,334,230,305,131" 
    HREF="http://www.dtic.dla.mil/defenselink/">
</MAP>

<IMG SRC="images/govtsites.gif" 
    WIDTH=530 HEIGHT=300 USEMAP="#govtsites">

<IMG SRC="images/govtsites.gif" WIDTH=530 HEIGHT=300
USEMAP="maps.html#govtsites">

<fig SRC="images/govtsites.gif" WIDTH=530 
    HEIGHT=300>
<A HREF="maps/govtsites.map"><IMG 
    SRC="images/govtsites.gif"
WIDTH=530 HEIGHT=300 ISMAP></A>
<B>Select a government site to visit:</B>
<UL>
<LI><A HREF="http://www.loc.gov/" 
    SHAPE="rect 36,70,252,146">Library of Congress</A></LI>
<LI><A HREF="http://www.whitehouse.gov/" 
    SHAPE="circle 214,219,269,221">The White House</A></LI>
<LI><A HREF="http://www.dtic.dla.mil/defenselink" 
    SHAPE="polygon 
        389,61,480,125,459,231,334,230,305,131"></A></LI>
</UL>
</fig>

<A HREF="maps/govtsites.map">
<IMG SRC="images/govtsites.gif" WIDTH=530 HEIGHT=300
USEMAP="#govtsites" ISMAP>
</A>