Chapter 14

Making Image Maps and HTML Frames

• Deciding When You Need an Image Map
• Describing Areas of Your Page
• Writing HTML Code That Recognizes Your Map
• Making an Image Map
• Using Frames to Organize Your Page
• Next Steps
• Q&A
  

One of the most powerful, yet most crippling, uses of graphics found on the Web is the image map. Image maps are considerably larger graphics than the buttons, icons, and inline images that have been discussed previously, but they give you a few more options than a row of buttons or hotlinked icons across the screen. These fancy images are like lists of hotlinks, except they are visual in nature. Up to this point I've discussed graphic images that are linked to a single site on the Web using an <IMG SRC> tag inside an <A HREF> structure. In the button scenario, you jump to a single location when you click on it. But wait! There's much more!

Image maps allow you to assign multiple links on a single graphic by defining certain areas as hot. These hot areas can be linked to, well, anywhere. Sounds cool, right? Well, there are also disadvantages to using them, but let's get a little further into the chapter first. This chapter looks at how image maps work, and it shows some examples of them in use. The chapter also discusses when they are appropriate for your pages. The code for using image maps will also be presented with a task focused on the steps to utilize the power of the visual image map.

The first part of this chapter discusses the general issues of using image maps, especially in how image maps compare with buttons, button bars, jump lists, and text menus. After this introduction, you will see a specific example of how to set up an image map.

Deciding When You Need an Image Map

As you browse the Web you will find many people are splashing huge image maps on their pages that are generally cool, once they download. There are definite instances when image maps are the best solution (see Figure 14.1), but of the hundreds of thousands on the Net, few were the best solution for the instance. Many of the maps could be divided into separate images and used with <TABLE> to make load times decrease. Image maps are frequently overused and many times poorly used. To understand this, let's see how they work.

Figure 14.1 : A sample image map used at a site (http://www.purdue.edu/).

Figure 14.2: How does an image map work?

One of the nice things about image maps is that you don't have to be a CGI programmer or know how to code the map definition file to use them. Usually the first one you create is the most difficult, but there are several tools designed to aid you in your quest.

The first difficulty is the creation of the map definition file. Not too long ago, manually crunching the code for the map definition would be enough to convince you to do it another way. The definition file looks a lot like PostScript codes that your printer spits out when it chokes on a print file.

But never fear! The CD-ROM includes a utility for automatic generation of the map file. If you can draw some lines and know what type of server you have, you can generate a map definition file automatically. A little later, the task talks about these tools more in depth and how to use them.

The second difficulty is the CGI script itself. For the most part, this shouldn't be a problem. Before you start biting your nails and breaking out the CGI encyclopedia and technical manual, talk to your site administrator. More than likely there's already a CGI image map routine waiting for you on your server, or he will know where to find one that's compatible with your server. Just find out where it is and what type of server you have, and it'll do nicely.

Describing Areas of Your Page

Image maps are frequently used to visually describe the areas at a site (see Figure 14.3). This presents a unique way to engage your audience and give them an overview of your site. It may also be easier to create and link a single image map than to create, arrange, and link several small graphics with an editor and HTML code. But when should you really consider using an image map? Why not splash one on every page?

Figure 14.3 : An alternative to using an image map-rectangular inline images (http://www.adobe.com/acrobat/).

Due to their disadvantages, image maps should only be used when you cannot accomplish your visual task any other way. Many times an alternative solution to an image map is creating several inline images that butt up against one another. Even some irregularly shaped graphics can be browser-built from several transparent images (see Chapter 16, "Utilizing Inline Graphics to Your Advantage") such as those shown in Figure 14.4.

Figure 14.4 : An alternative to using an image map-transparent inline images (http://www.eded.com/-dhopkins/main.html).

Once you have overcome the hurdle of creating your first image map, you'll see that it can be tempting to use several of them, but keep in mind that image maps are slower to load than several small images that are each individually linked. This is due to the time it takes the CGI script to build the hotspots for the browser from the map definition. Image maps can also create a bottleneck at your site if several individuals try to access a single map at one time. In addition, if your site's hardware changes, so may your image map. A change may require regeneration of the graphic image and the map definition file that corresponds to it.

Writing HTML Code That Recognizes Your Map

The HTML code to make this whole thing work is not difficult as long as you know the following:

1. The name and location of your map definition file
2. The name and location of your image

This code is not much different from our inclusion of buttons in a page except for the use of the CGI script. Okay, time for a real example. Let's say the map definition file I created, called mymap.gif.map, is in the same place as my image. My image is in /tg and is called mymap.gif. If all this were true, my HTML coding would look like the following:

<HTML>
<TITLE>home.html</TITLE>
<BODY>
<A HREF="http://www.site/tg/mymap.gif.map">
<IMG SRC="mymap.gif" ISMAP></a>
</BODY>

</HTML>

The elements of the code are defined as follows:

• home.html-The HTML page on which mymap.gif is loaded with the <IMG SRC> tag.
• http:/-The network protocol to be used.
• /www.site-The host server on which the files will be located.
• /tg-The directory structure on the Web server inside which the files will be found.
• /mymap.gif.map-The actual map definition file dividing mymap.gif into regions.
• mymap.gif-The graphic that serves as the basis of the image map.
• ISMAP-The HTML tag that signals mymap.gif is to be treated as an image map.

This coding isn't much different from a regular clickable button except for the <A HREF> tag that specifies the map definition file. Finish the code off with the <IMG SRC> tag using the image mymap.gif with the ISMAP option for the image. This image source tag assumes that the document asking for the graphic is located in the same directory as mymap.gif. The path to this document is www.site/tg/home.html. Since I'm a graphics animal, I needed to see all this visually before describing it. You can, too, by taking a look at Figure 14.5.

Figure 14.5 : A visual example with my coding.

Once you have generated the code, move your map definition file, image map, and calling document to your server. The biggest drawback to image maps is that they can only be tested on the server because of the Common Gateway Interface (CGI) script. This means that you can't preview your image maps by running them locally on your hard disk-a typical development technique.

Making an Image Map

The graphic you use as the base for your image map is critical in the success of this technique. To be effective, your graphic must have clearly identifiable areas to click-some may look like buttons, others like floating icons, and others floating text. Look at Figures 6.1, 6.7, 9.1, 10.2, and 10.4 for examples of images that are appropriate for image maps. To begin creating an image map, follow these steps:

1. The first step in using an image map is to create your graphic image. Open your image editor and create the graphic. Keep in mind that a larger image equals slower download for most people. Once you've completed the graphic, save it as a GIF or JPEG file for use as an image map.
2. Contact your system administrator to find out what type of server you have: either NCSA or CERN. Also inquire as to where (the path) the CGI script for image maps is located on the server.
3. On the CD-ROM you'll find an image map utility for the PC, MapEdit. If you decide to use it for more than 30 days, register it to keep these good folks happy.
4. Once you've installed the mapping utility, start it up and open your graphic into it.
5. In MapEdit you'll have to do three things. You'll have to tell the program what type of map definition to generate; draw lines, rectangles, and so on to define your hot areas; and then tell the program what uniform resource locators (URLs) are associated with those hot areas. MapEdit will require you to assign the type of map definition file when you open your GIF or JPEG image.
6. Once you've generated the image and map definition file, you are set to code your calling page. Remember that when you're coding it, the <A HREF> tag needs the location of the map definition file and the <IMG SRC> tag needs the name of the GIF with the ISMAP option.
7. Now that you have coded your calling page, move all three elements to your server and test it. Remember that it can only be tested on your server due to the use of the CGI script.

Using Frames to Organize Your Page

Unlike image maps, frames are a new feature included within Netscape 2.0 and Netscape Gold that are a function of the Netscape browser and don't require any external CGI scripts. Frames allow you to divide the areas of the screen into separate windows, as shown in Figure 14.6. Each window displays a separate Web page. You have complete control over how the areas are divided and can specify their area in pixels, percentages, or a relative size.

Figure 14.6 : Using frames to divide a page into regions.

The coding for frames may seem somewhat confusing at first, so let's take a look at a simple example and then a more complex one. The first thing to note about frames is that the <FRAME> tag replaces the normal <BODY> tag. In essence, the frame defining page has no body-the frames replace it. A very simple page's coding would look like the following:

<HTML>
<HEAD><TITLE>A simple frame example</TITLE></HEAD>
<FRAMESET ROWS="50%, 50%">
    <FRAME SRC=frame1.html>
    <FRAME SRC=frame2.html>
</FRAMESET>

</HTML>

You will see the following:

• <FRAMESET ROWS="50%, 50%">-Divides the screen into two rows that take up 50% of the screen.
• <FRAME SRC=frame1.html>-Assigns the first 50% row to frame1.html.
• <FRAME SRC=frame2.html>-Assigns the second 50% row to frame2.html.

This example would have three files: the page that would include this code, frame1.html, and frame2.html. The files called frame1.html and frame2.html could have anything a normal HTML page would have-text, images, links, and so on. The frame page with simple explanatory text would look like Figure 14.7. Note again that each window is assigned to a particular file. In our case, the two windows are assigned to frame1.html and frame2.html, respectively.

Figure 14.7 : The simple frame page split into two rows.

Figure 14.8 : The simple frame page split into two columns.

Notice in the previous coding example that you could have used pixel values rather than percentages in the frameset line. Using percentages just made it easier to explain. Based on what you know about sizing images from previous chapters, you should be able to more accurately arrange your frames if need be.

Now, what if we wanted vertical frames instead of horizontal frames? Well, our coding would look like this:

<HTML>
<HEAD><TITLE>A simple frame example</TITLE></HEAD>
<FRAMESET COLS ="50%, 50%">
    <FRAME SRC=frame3.html>
    <FRAME SRC=frame4.html>
</FRAMESET>

</HTML>

You will see the following:

• <FRAMESET COLS="50%, 50%">-Divides the screen into two columns that take up 50% of the screen.
• <FRAME SRC=frame3.html>-Assigns the first 50% column to frame3.html.
• <FRAME SRC=frame4.html>-Assigns the second 50% column to frame4.html.

Finally, with frames you can actually divide the screen any way you want. Let's say you want to set up a 20% column on the left of the screen with a stationary logo at the bottom of it. In the other 80% column, you want a menu bar of 20% at its bottom. The coding for this page design would look like this:

<HTML>
<HEAD><TITLE>A simple frame example</TITLE></HEAD>
<FRAMESET COLS ="20%, 80%">
    <FRAMESET ROWS ="80%, 20%">
        <FRAME SRC=frame1.html>
        <FRAME SRC=frame2.html>
    </FRAMESET>
     <FRAMESET ROWS ="80%, 20%">
        <FRAME SRC=frame3.html>
        <FRAME SRC=frame4.html>
    </FRAMESET>
</FRAMESET>

</HTML>

You will see the following:

• <FRAMESET COLS ="20%, 80%">-First divides the screen into a 20% column and an 80% column.
• <FRAMESET ROWS ="80%, 20%">-Divides the 20% column into two rows (80% and 20%).
• <FRAME SRC=frame1.html>-Assigns frame1.html to the first row of 20% column.
• <FRAME SRC=frame2.html>-Assigns frame2.html to the second row of 20% column.
• </FRAMESET>-Tells browser assignment of rows to 20% column is done.
• <FRAMESET ROWS ="80%, 20%">-Divides the 80% column into two rows (80% and 20%).
• <FRAME SRC=frame3.html>-Assigns frame3.html to the first row of 80% column.
• <FRAME SRC=frame4.html>-Assigns frame4.html to the second row of 80% column.
• </FRAMESET>-Tells browser assignment of rows to 80% column is done.
• </FRAMESET>-Tells browser assignment of columns to the page is done.

Next Steps

Now that you know about image maps and HTML frames, here's more:

• For more information about the hardware aspects of Web page design, see Chapter 7 "Designing Graphical Pages Anyone Can Download."
• To compare inline images with image maps, see Chapter 9 "Providing Visual Cues to Web Navigation Through Page Design."
• To find out more about transparent GIFs and file formats, see Chapter 16.
• To find out more about graphic file formats, see Chapter 20, "Converting Graphics for Use on the Web."

Q&A