The World Wide Web became famous because of its capability to integrate graphics and text. This chapter is all about creating interactive Web graphics in HTML. Chapter 9 introduced you to creating a hyperlink from one HTML file to another. As you
recall, links can even reference GIF files, but the amazing thing about links is that they can reference other documents anywhere on the Web. With this capability, you can embed a picture of the Space Shuttle from NASA into your Web page, for example.
This chapter shows you how to mark regions of your Web graphics files as hotspots. Hotspots are the area on the GIF file that serve as hyperlinks when the user of the Web client program clicks them with a mouse.
Putting hotspots in your graphics is referred to as creating clickable images, or imagemaps. The HTTP servers we installed in Chapter 8 support the use of clickable images. In other words, they can return different documents
to the Web browser depending on where in an image the user clicks with a mouse.
Here are a few words of caution about images on your Web pages. First, don't go overboard with graphics. Large images will not be snappy at the typical modem speeds most Web clients are running today.
Naturally, clickable imagemaps work only with graphically-oriented Web browsers. You should always provide alternate text-based methods of accessing the same information. It's a matter of style how you choose to do this. We think it is best to include
text-only hyperlinks in addition to the image-mapped links on each page.
Finally, and this is probably obvious, try to choose graphics that are actually relevant to the subject of your Web page.
There are several steps involved in creating clickable imagemaps. Here's the basic plan of attack:
The sections that follow provide a more detailed view of the steps involved. But first, install Map This and Paint Shop Pro. Map This takes the drudgery out of making map files. Paint Shop Pro enables you to convert screen captures to GIF files, and to
save transparent and interlaced images, which we'll talk about later.
For more information on GIF and other graphics file formats, see O'Reilly and Associates' Encyclopedia Of Graphics File Formats, by James D. Murray and William vanRyper.
Map This is a program designed to create mapping files for clickable images on the World Wide Web. Follow these steps to install Map This directly from the CD-ROM:
Here is a brief description of the files that Map This installs on your hard disk:
Map This file |
Description |
|
README.WRI |
Last-minute notes |
|
SERVEME.WRI |
Documentation on setting up a imagemap |
|
MAPTHIS.EXE |
Program |
|
MAPTHIS.HLP |
Help file |
|
EXAMPLES\LAKE.IMP |
Sample lake map |
|
EXAMPLES\LAKE.GIF |
Sample GIF for said lake |
|
EXAMPLES\NSCAFISH.IMP |
Original map file for NSCA's map example |
|
EXAMPLES\NSCAFISH.GIF |
GIF for NSCA's map |
|
EXAMPLES\CERNDRAG.MAP |
Original map file for CERN's map example |
|
EXAMPLES\CERNDRAG.GIF |
GIF for NSCA's map |
|
|
|
LView Pro is an image file editor for Microsoft Windows 95 and Windows NT 3.5x. It works with image files in the following formats: JPEG, JFIF, GIF 87a/89a, TIFF, Truevision Targa, Windows and OS/2 BMP, ZSoft's PCX, PBMPLUS' PBM, PGM, and PPM.
LView Pro is an excellent shareware tool for many of the things that you will be doing in this chapter. Unfortunately, we were not able to obtain it for the CD-ROM. But don't worry about that: You can get the latest 32-bit version of LView Pro from
dozens of places on the Internet. For example, http://yahoo/computers/software/graphics includes a link to LView Pro. Or you might try http://www.tucows.com. Either
way, once you have it downloaded, you can unzip it and install it in the same manner as Map This.
It isn't mandatory to use LView Pro because we have included a similar program named Paint Shop Pro on the CD. We only mention LView Pro as an alternative.
Paint Shop Pro is a very popular graphics shareware program on the Internet. It can also handle all the graphics chores that a Webmaster is faced with. Many of the following instructions are conceptually similar for both LView Pro and Paint Shop Pro.
Paint Shop Pro installs in the same manner as Map This. Just use WinZip as described in the five steps earlier. You may wish to choose a separate directory on your hard disk for Paint Shop Pro than the one for Map This or WinZip. On the other hand, some
people like keeping all of their utility programs in one directory called bin. It is entirely up to you.
You can obtain more information about Paint Shop Pro and LView Pro from this Web site:
http://dragon.jpl.nasa.gov/%7eadam/transparent.html#DOS/Windows
In the CERN hotspot format, which is what both the Purveyor Desktop server and the FolkWeb server use, each line of the map file looks like this:
shape (x1,y1) (x2,y2) ... (xn,yn) URL
where shape is one of the following:
Coordinates are expressed in x,y pairs counting in pixels from the upper-left corner of the image. The URL can point to any resource on the World Wide Web or to a file on your site.
Let's take a look at creating a map file for a sample image. The first step, as outlined previously, is to obtain a GIF file. You'll use Paint Shop Pro or LView Pro to make a screen capture and save it as GIF.
Let's suppose our Web site is going to have a collection of freeware multimedia files that people can download. In that case, we want to let people choose from our fonts, sounds, and other multimedia files. We also want to let them search the whole site
or the Web for a particular file. We created the GIF file shown in Figure 10.1 to fit the bill. If this example doesn't seem too fascinating, you are welcome to use any GIF that suits your needs.
Figure 10.1. A sample clickable image.
Here are the steps for creating a GIF file in LView Pro:
Now you have a GIF file to work with in the remaining steps for creating a map file.
Alternatively, here are the similar steps for creating a GIF file using Paint Shop Pro:
This leaves you with an image file of your own making, which you can embed in your HTML code. You could also use Paint Shop Pro or LView Pro to edit the image.
The second major step is to create the map file that references the hotspots on the GIF file. Here are the instructions to create a map file:
Now the file IMAGEMAP.MAP is created by Map This. See the following code segment for the important parts of the file—we have removed the comments. If you view the file created by Map This, using Notepad or any text editor, you can ignore the
comment lines (which begin with #) automatically written by Map This at the top of the file.
default http://www.yourco.com/error.htm rectangle (86,45) (148,107) http://www.yourco.com/font.htm rectangle (12,45) (71,110) http://www.yourco.com/multimed.htm rectangle (161,43) (223,107) http://www.yourco.com/sounds.htm rectangle (238,45) (300,112) http://www.yourco.com/search.htm
Note that IMAGEMAP.MAP contains several invalid URLs. The default URL is the one filled out in step 7 shown previously. The URL for each hotspot will echo what you entered in step 8. If you don't know your official domain name at the time you are
working through this chapter, it is okay to leave IMAGEMAP.MAP as is. When you do get your official domain name and have your HTML directory structure established, you can return to the map file and edit it with a simple text editor. Either way, it's much
easier than using a text editor to enter all the x,y pixel coordinates by hand.
If the URL you want to use in a map file contains a # (indicating a location within a document), you should quote the full URL (starting with http://) in the map file so that the server issues a redirection message to the client. Note that the # we are
referring to here is not the same as the # that serves to mark comment lines in the map file.
This last point is rather subtle, so perhaps a deeper explanation is in order. The # characters (some people call them pound signs, others call them sharp signs) can be used in two cases: as comments in a map file or within any URL to refer to a
bookmark location (also called tags) within an HTML file. Because map files can contain URLs, the second usage can appear in a map file, but that usage is distinct from comment characters.
In general, it is a good idea to always use the full URL (starting with http://) in the map file for all hyperlinks.
The coordinates from a user's mouse click are passed from the client to your server. The server then searches the map file to determine whether the click is within any hotspots. If a valid match is found, the corresponding URL is used to send a document
to the Web browser. If no match is found, a default URL is returned. A default URL is necessary for the times when someone clicks a spot that isn't hot, so to speak. There are a few ways to handle this. Our preference is to return an error message with a
link back to the imagemap file so they can try again. See Listing 6.1 for an example, called ERROR.HTM.
<HTML> <HEAD> <!-- Created: 9/20/95 9:20:31 PM --> <TITLE>Imagemap ERROR</TITLE> </HEAD> <BODY> <H1>Imagemap Error</H1> You have selected an area of the Imagemap that is not valid. Please try again.<P> <A HREF="http://www.yourco.com/xyz.htm">[Return]</A> <HR> Last Updated: Wednesday, September 20, 1995 </BODY> </HTML>
The next major step in creating an imagemap is to let the Web browser know that it's accessing an HTML file with an inline image that is a clickable imagemap. This is done by adding the ISMAP qualifier to the <IMG> tag within the A HREF. For
example
<A HREF="image.map"><IMG SRC="image.gif" ISMAP></A>
It's important to understand why there are two filenames in this code. This is how mouse clicks to the image are hyperlinked to documents (via the map file URLs), which could be anywhere on the Internet.
Syntactically, you have three options when specifying either of the filenames in the preceding code: you can use no pathname at all, in which case the files are assumed to be in the current directory; you can include a local pathname (either relative or
absolute); or you can use a complete URL. Before you decide that the first answer is obviously the easiest, you should know that it doesn't work on all Web servers. Some servers require a pathname. If this describes your server or if you place the map file
or the GIF file in a different directory than the HTML page, you will need to use a pathname.
The third option—using a complete URL—will always work, even for files on your own Web site. Actually, that isn't as inefficient as it seems because the URL is probably cached in the server, which will result in a nearly instantaneous look-up.
See the following HTML code for what is needed to tie all this together. The key lines that form the association between the map file and the GIF are marked in bold.
<html> <head><title>A Sample Clickable Image</title></head> <body> <h1>Download Multimedia Files</h1> <hr> Point and click on an icon:<p> <hr> <A HREF="imagemap.map"> <IMG SRC="imagemap.gif" ISMAP> </A> <hr> </body>
Note the use of the ISMAP attribute in the <IMG> tag. This tells the client to append the mouse coordinates to the URL when it sends it to the server. The URL in the enclosing <A> anchor must refer to a map file on your Web site, with the
extension .MAP. This file contains the information that maps the image coordinates to the URL. Only the URL is returned to the client.
As with all HTML files, it is important to test all functions of the file, especially when you are using imagemapping or CGI Scripts. Always test your imagemaps completely. It never fails that the one link you don't check will have something wrong with
it.
As you browse the Web, you will notice that some of the pages you come across will have inline images that blend into the background, have a fade-in effect, or both. These images are known as transparent and interlaced GIFs.
Transparent GIFs will appear to blend in smoothly with the user's display, even when the user has set a background color that differs from the default. If the Web browser supports transparency, the background color of the GIF will be replaced by the
browser's background color.
Transparent GIFs make sense only for images that are considered to have a solid background and a foreground with some holes in it. For example, an image of the American flag probably wouldn't have anything in the foreground that could be made
transparent. Conversely, in an image of a company logo that reads YourCo, Inc. in blue letters on a white background, the gaps between the letters and in the o's could be made transparent so that the characters would show through on any background.
Interlaced GIFs, on the other hand, will appear first as a full image in low resolution and continue to gain resolution until the entire image is loaded. Normally an image will load from the top row to the bottom row. Interlaced images enable the user
to get a good idea about what the image will look like (while the user is reading the text of the page). Of course, the browser must have the capability to display interlaced images for the desired effect. The good news is that browsers that do not support
interlaced images will just display the image in a top-down fashion as usual.
Even more good news is that both LView Pro and Paint Shop Pro can create transparent and interlaced GIFs! Either of these programs will come in handy for many of your day-to-day graphics needs, including screen shots, graphics file format conversions,
and creating transparent and interlaced GIFs.
In addition to LView Pro and Paint Shop Pro, there are a dozen or so form-based Web pages that will conduct your GIF file conversions directly from the Web. One of the best that we have found is the Imagemachine, http://www.vrl.com/imaging/index.html.
Here are the steps for creating transparent and interlaced GIFs using LView Pro:
Next, set LView Pro to save your GIF in Interlaced format. This is just one step: Choose File | Properties | GIF and check both options, "Save Interlaced" and "Save Transparent Color Information to GIF89a Files." Choose OK.
Finally, save the GIF in GIF89a format:
That's all there is to it; you now have a Transparent and Interlaced GIF.
When we get to Chapter 24, "Interactive Web Programming with Java," we will be discussing some awesome new Web capabilities regarding multimedia. In the meantime, you can create multimedia embedded HTML pages without advanced programming
techniques. All you need to do is add links in your page to the multimedia file that you want presented.
Suppose you want a person browsing your page to be able to play a Windows Audio WAV recording of you welcoming them to your Web page. If the WAV file containing your welcome message is named WELCOME.WAV, simply add the link with the <A> tag, just
as you would add any other link on your page. For example:
<A HREF="welcome.wav">Press Here for Welcome Message</A>
Wow! That was easy. Well not so fast. Of course you can create a link to any type of file on your page, and once the person presses the hyperlink, the file will be transported to the client application (Web browser) via HTTP. The key to all of this is
that the Web browser on the receiving end of this link must be configured to handle the incoming file.
Most Web browsers are configured to handle *.HTML, *.HTM, *.TXT, and *.GIF files. These and other standard file types are given a MIME type. See the following sidebar for a basic discussion of MIME. For file types other than the basic ones mentioned,
you just need to configure your Web browser to handle the MIME type of that associated file.
What is MIME?
In addition to configuring your Web browser to be aware of the file type, you will also need an application capable of displaying or playing the file. For several types of multimedia files, you already have an application that can handle this job.
Windows 95 includes Media Player, which can play AVI, MID, and WAV files. Just follow these steps to configure Netscape Navigator to use Media Player:
Netscape Navigator is now configured to launch Media Player any time you click a hyperlink to a file type of *.WAV. Now you can go through the same steps for *.AVI files.
Note that in step 2 there are other options for the Action radio button. You don't have to configure Navigator to launch an application for every MIME file type. For example, when plain text files are received by Navigator through HTTP, you can choose
"View in Browser" or "Save to Disk."
Throughout the Internet you will find Windows applications for playing a variety of multimedia formats. You can find an application capable of playing your desired multimedia format by searching through the application archives found in Appendix D.
Netscape Navigator is set up by default to handle many more MIME types than the ones mentioned here, including *.AU and *.AIFF files for audio.
One of the biggest downfalls of multimedia on the Internet is that graphics and audio files must be completely downloaded and then passed to an application to play them. This takes time at standard modem speeds
and it detracts from the entertainment value of the presentation. But new solutions are at hand.
The next chapter takes another brave step into the heart of HTML: CGI programming. The topics covered are not for lightweights. However, those who stick it out will see the awesome potential of the Web unveiled.
