|
by Matt Wright
While traveling the Web, you've probably encountered many image
maps. An image map is a single picture that contains hot spots.
When you click a hot spot, you're taken to another location. These
image maps generally appear as a main logo or button bar. Rather
than load onto your Web page several smaller images that users
can click, you can load one image, which requires fewer server
calls and is generally better looking.
The user can configure image maps in two ways-on the server-side
or the client-side. The most common usage requires the server-side
configuration, which either calls a CGI script to process the
incoming information or uses functions built into the server software
to send the user to the specified URL. Only a limited number of
browsers now support the client-side implementation. Unless noted
throughout this chapter, the server-side implementations are described.
In this chapter you'll learn
- How image maps function
- Server-specific configuration of image maps
- How to implement client-side image maps
- Where to get and how to use image map software to help you
create your image maps
- How to create images on the fly
The image map, as previously stated, is a single image that consists
of many hot spots users click to travel to other parts
of your Web site. You can designate these hot spots in your image
map with a number of different objects. These include a circle,
polygon, rectangle, and a point. Image maps can also have a default
URL, in case the user clicks a point in the image that's not designated
with another object. When the image map is clicked, it sends a
pair of coordinate points to the CGI program or Web server, which
are then compared with the hot spots defined in your map configuration
file to see what URL the user should be sent to. The URL that's
sent to your image map program or Web server when a user clicks
your map resembles this:
http://your.server.xxx/map_program?x,y
x and y are the coordinates in pixels on the image
map. Because many of these concepts and object types are similar
throughout most implementations of image maps, the configuration
objects, concepts, and terms are briefly described in the following
table.
| Concepts/Object Types |
Description
|
| circle |
This object creates a hyperlinked circle within your image map. In some versions of the image map program, the circle is defined with the center point and another point located on the
circumference of the circle, and in others with the center point and radius.
|
| default |
This object is used to simply define the URL to which users are to be taken if they click an area that's not defined by any other line in the config-uration file. No coordinates are defined
with this object type.
|
| poly |
You can use the polygon object when the area you want to hyperlink in your image isn't a perfect circle or rectangle. The polygon is usually defined with up to 100 points, located at the vertices
of the selected area you're trying to hyperlink. If, for example, you want to hyperlink a pentagon, you would configure the five points in your map file.
|
| point |
The point is defined with a single coordinate. Clicks closest to that point on your image map will be taken to the URL specified with this object type.
|
| rect |
The rect object is used to define the four sides of a rectangle. You can also use the poly object to do this, but the rectangle is so commonly used that it saves extra
coordinate points you would need to label. The rect object is defined with two coordinate points-the upper left and bottom right corners of the rectangle.
|
| Other Image Map Concepts |
| URL |
The URL is the location of the Web page that you want the object type and coordinate points on the configuration line to take the user. URLs can be both local and full, although full URLs are more
widely implemented. For example, if you want to access the document http://your.server.xxx/~mypage/, you would use either http://your.server.xxx/~mypage/ or /~mypage/. Keep in mind that when referencing pages not located on your server, you must use a full
URL.
|
| Coordinate points |
Coordinate points are used to define the locations of the objects within the image of which you're making an image map. The coordinates should be in the format x,y, in
terms of pixels across, pixels down. The upper left corner of your image map would be coordinate 0,0. Coordinate points are sent to the image map program or Web server when the user clicks the image map.
|
| Client |
This is the browser with which the user is visiting your site. When I use the term client-side image mapping, I'm referring to the fact that the client, a Web browser, handles the
configuration files embedded in the HTML file and determines where the user will go based on the click.
|
| Server |
The server is the HTTP daemon that's running on your computer. The server sends out files when they're requested by the client and does any necessary configuration and/or parsing of the
contents before they're sent out.
|
| CAUTION |
Not all image map CGI programs and servers support the point configuration method. Check the specification for your server, outlined later in this chapter, before trying to use the point method in your configuration file. Similarly on the
client side, not all Web browsers support image maps, such as text-based browsers like Lynx and older graphical browsers.
|
Most Webmasters now compile or have image map programs on their
servers, because they're a relatively low security risk. You may
need to contact your system administrator or Webmaster and ask
for the URL to the image map program, if he or she has one available.
Because some CGI programs can contain large security holes, many
system administrators are reluctant to let you execute your own
CGI programs. If they don't let you use your own CGI programs,
you'll have to use the ones they've installed on the system or
try to use the client-side image map configuration.
If you're allowed to compile or run your own CGI programs, and
your system doesn't already have a default image map program or
there isn't one that's already built into the server, you can
retrieve and compile your own. You should probably check with
your system administrator before you try to do this, because chances
are the image map program was either installed when the server
was put in, or your system administrator has installed one since.
If your server doesn't have an image map program, you may still
want to check that you have access to the cgi-bin or at least
the capability to run CGI programs.
Several programs are available on the Internet that allow you
to compile them and then run your image map coordinates and configuration
files through them. The following are just a few sites on the
Web that let you download and use their image map programs:
Versions of the NCSA HTTPd server before version 1.5 uses a CGI
image map program written in C. Version 1.5 of NCSA's HTTPd server
has a built-in image map function, so you no longer have to launch
an external CGI script in order to handle image map requests.
The creation of the image map configuration file is pretty much
the same for both methods; the only difference lies in the URL
with which you reference your map configuration file. The basic
setup of a configured map file is
All the preceding elements in a common NCSA configuration map
file are described in the beginning of this chapter under "How
an Image Map Functions." The NCSA image map configuration
file can include comment lines, which are designated with a #
as the first character on that line. These are often useful if
you want to remember what sections of your map configuration file
are set to the image map. All other lines, which aren't blank,
should use the preceding format with the object first-be it a
rect, poly, circle, or point.
The image map configuration file shown in listing 9.1 corresponds
to the image in figure 9.1.
Figure 9.1 : This simple image map will be used as the template for all map files created in the next few sections of this chapter.
| NOTE |
Some earlier versions of the NCSA HTPPd Web server required that all image map files be relayed through one central registry file. This file usually had limited access, which only the server administrator could access. If this is the case, you should
upgrade to the latest version of the image map program, which removes this restriction.
|
Listing 9.1 Basic Map Configuration File for NCSA
Server
# Basic Map Configuration File For NCSA Server
# Corresponds to Basic Image
# Written on: 1/12/95 Last Modified on: 1/12/95
# Map File Created by: Matt Wright
# Default URL if user clicks outside of hyperlinked areas
default http://www.server.xxx/
# Circle URL. URL used if user clicks in the circle.
circle http://www.server.xxx/circle.html 35,35 67,35
# Rectangle URL. URL used if user clicks in the rectangle.
rect http://www.server.xxx/rect.html 71,3 199,65
# Point URL. URL used if user clicks on the dot.
point http://www.server.xxx/point.html 326,30
# Triangle URL. URL used if user clicks in the triangle.
# poly http://www.server.xxx/poly.html 225,63 296,63 261,4
To call your image map inside your HTML document, you must set
the ISMAP attribute on your <img> tag
as well as call the image map program and the path to your basic.map
file. This is where the versions of NCSA HTTPd begin to vary.
If you have a version before 1.5 or are using the image map.c
program, you'll need to call your image map configuration file
in your document, like this:
Here, I've included the full URLs to make the example clear. After
you reference the image map program with the URL, you must then
append the URL of the location of your map file on your server.
That's what the /url/to/basic.map must be. The ISMAP
attribute to the <img> tag alerts browsers that
they'll need to append the coordinates where the user clicked
to the URL so that the image map program can work effectively.
Version 1.5 of the NCSA HTTPd has built-in image mapping capabilities.
These can be turned on by adding a new type, just as you would
with CGI extensions. The Webmaster or system administrator has
to do this in the configuration files of the server. It can be
added by simply including this line in the server's srm.conf configuration
file:
AddType text/x-imagemap .map
The server must also be started with IMAGEMAP_SUPPORT
defined, which is the default.
| TIP |
If you have access to NCSA version 1.5 or later, you should use the built-in image map handling, rather than the external CGI program, because the relay of the URL to the user will be much quicker than using a CGI image map program.
|
Similar to NCSA version 1.5, the Apache Server 1.0 has image map
capabilities built into the server, so you don't need an outside
CGI script to do the work. When adding a new MIME type to support
image maps such as you did with the AddType for NCSA,
the Apache server requires you to use the following MIME type:
AddType application/x-httpd-imap map
This enables all files with a .MAP extension to be parsed as though
they're image map configuration files. This saves server response
time and the stress put on the server to execute external CGI
programs. Similar to the NCSA server is the order in which the
lines call the objects and coordinates in the map configuration
file:
The format of an Apache map file is slightly different from that
of NCSA's. One of the major differences is in the use of a base_uri
command. The options for the base_uri command are described
in the following table.
| Option |
Description
|
| map |
This provides the default behavior of most older image map programs, where all URL references are relative to the URL of the map configuration file.
|
| referer |
This attribute to the base_uri command treats all URLs relative to the HTTP_REFERER environment variable. This is very useful if you have a base directory at http://www.server.xxx/, and this
is the page at which your image map will appear. You can set base_uri to referer and then make all other URL references relative to that URL. So if you're referencing, as in http://www.server.xxx/circle.html, http://www.server.xxx/rect.html, and
http://www.server.xxx/poly.html, set the base_uri to referer and then just use relative URLs to the referer, such as circle.html, rect.html, and poly.html. If you use the referer option, all URLs will be relative to the page with the image map.
|
| Actual URL |
You can also set your base_uri to an actual URL. For instance, taking the example I described earlier for the referer attribute, you could use a definition such as base_uri
http://www.server.xxx/. All your URL references inside your map configuration file can be relative to this base_uri. This saves typing time and makes the URL references more concise.
|
Listing 9.2 is the configuration file for the same image as used
in the NCSA example. This time, however, the map file has been
tailored for the Apache server.
Listing 9.2 Basic Map Configuration File for Apache
Server
# Basic Map Configuration File For Apache Server
# Corresponds to Basic Image
# Written on: 1/12/95 Last Modified on: 1/24/95
# Map File Created by: Matt Wright
# Default URL if user clicks outside of hyperlinked areas
default http://www.server.xxx/
# Base URL. All URLs will be relative to this URL.
base_url http://www.server.xxx/
# Circle URL. URL used if user clicks in the circle.
circle circle.html 35,35 67,35
# Rectangle URL. URL used if user clicks in the rectangle.
rect rect.html 71,3 199,65
# Point URL. URL used if user clicks on the dot.
point point.html 326,30
# Triangle URL. URL used if user clicks in the triangle.
# poly poly.html 225,63 296,63 261,4
Referencing your map file and your image map through your HTML
document can be accomplished in much the same way as you referenced
the two in the NCSA version 1.5 configuration example. Following
is the example repeated:
<a href="http://www.server.xxx/path/to/basic.map">
<img src="http://www.server.xxx/path/to/basic.gif" ISMAP>
</a>
The CERN and W3C HTTPd servers come with the source to a CGI program
called htimage, which allows you to link your images up with a
map file, much like the other servers. After your htimage script
is compiled, you need to add the Exec rule to the server's configuration
file. Most likely, if you aren't a system administrator, you won't
be able to do this, but it has probably already been configured.
For more information on adding the Exec rule to your server, take
a look at the documentation provided online at http://www.w3.org/pub/WWW/Daemon/User/CGI/HTImageDoc.html.
The major difference between the CERN and W3C servers and NCSA
and Apache is that the CERN/W3C htimage program doesn't recognize
the point object in your map configuration file. The
map configuration file also has a slightly different format, which
takes the form of
Listing 9.3 is the basic.map, rewritten to follow the htimage
format, which is the program used by CERN and W3C.
Listing 9.3 Basic Map Configuration File for the
CERN and W3C Servers
# Basic Map Configuration File For CERN and W3C Servers
# Corresponds to Basic Image
# Written on: 1/12/95 Last Modified on: 1/24/95
# Map File Created by: Matt Wright
# Default URL if user clicks outside of hyperlinked areas
def http://www.server.xxx/
# Circle URL. URL used if user clicks in the circle. The
# htimage program must have the Center and Radius of the
# circle defined.
circle (35,35) (32) http://www.server.xxx/circle.html
# Rectangle URL. URL used if user clicks in the rectangle.
rect (71,3) (199,65) http://www.server.xxx/rect.html
# Point URL. URL used if user clicks on the dot. htimage
# is not point compatible with the point method, so we will
# represent it with a circle with a radius of 2, which will
# create a small point.
circ (326,30) 2 http://www.server.xxx/point.html
# Triangle URL. URL used if user clicks in the triangle.
# poly (225,63) (296,63) (261,4)
http://www.server.xxx/poly.html
As you can see in the preceding example, there are a few differences
between the NCSA and Cern/W3C servers. For one, you can abbreviate
the circle and default configuration objects with circ
and def, rather than have to spell them out (circle
and default). The htimage programs also require that
you configure your circle coordinates in the form of (x,y) for
the center and then the radius of the circle. Because the htimage
program doesn't have the point capability built in, I simply defined
a circle with a radius of 2 to make it seem as though it were
a point. The other difference you may notice in the preceding
configuration file is that the URL is placed after the coordinates
on each line, as opposed to before the coordinates as is done
with other programs. The coordinates in this map configuration
file must also be placed in parentheses, with the radius of a
circle following the center coordinates but not inside the parentheses.
To call your image map from your Web page, you can use almost
the same syntax as was used in the previous examples:
Netscape servers come with the image map program built in, so
you don't need an external CGI script to do the parsing of the
coordinate points. The first thing you need to do is create your
map file for the image map that you want to use.
The NCSA and Netscape servers have the same configuration file;
you can refer to the NCSA map file in listing 9.1 for more background
information. The difference between the Netscape and NCSA servers
is that you don't have to call on an external CGI program before
calling the map file. Instead, simply place a reference like
<a href="http://www.server.xxx/url/to/basic.map">
<img src="http://www.server.xxx/url/to/basic.gif" ISMAP>
</a>
into your HTML document. Your map file should end with the .MAP
extension for the Netscape server to recognize it as an image
map configuration file.
| TIP |
The Netscape server has a 100-point limit when defining polygons; however, by the time you start nearing this limit, your configuration line will also get too large for Netscape servers to handle. If this happens, simply spread your points out more evenly
throughout the polygon.
|
You can download several image map programs for the Apple Internet
server. One of these is Mac-Imagemap, which can be downloaded
from
This program handles map files in the same configuration setup
as NCSA map files, so refer to listing 9.1 if you have problems
setting up your map files. Full details and installation instructions
for Mac-ImageMap can be found at the preceding URL.
New standards are emerging for client-side implementations of
image maps, which not only means much faster processing, but you'll
no longer require the server to handle every client's request
for image mapping. This is the best alternative if your system
administrator or Webmaster refuses to set up an image map CGI
program, and you don't have access to create CGI programs. It's
now supported in later versions of Netscape and Microsoft Internet
Explorer, although I believe it will be more widely implemented
in the near future.
Besides the fact that you no longer have to route through a CGI
program or your server to use an image map, the client-side image
map implementation offers other advantages. You'll no longer have
to specify a default document because users won't be allowed to
click outside a highlighted region. Certain areas will be hyperlinked
in your image, and when a user's mouse pointer moves over one
of these areas, he'll be able to click the map; clicking outside
hyperlinked areas will take him nowhere (in essence, it sets the
default URL to null).
When an image is placed on your HTML page, you can reference the
map to it by either including the complete map within your HTML
document or by specifying an URL location of where the map can
be found. The browser then loads this map, parses it, and remembers
the hyperlinked areas just as though it had been included in your
HTML document.
Instead of the ISMAP attribute that's usually added to
all image references using a server-side image map CGI program,
you must include a USEMAP attribute for the client-side
mapping procedure. The integration of a client-side image map
configuration file is done with the MAP element.
| NOTE |
Client-side image mapping currently isn't supported by all browsers. (Many ways of allowing for backward compatibility are discussed later in this chapter.) As of this writing, the browsers that now support client-side image mapping are Netscape 2.0,
Microsoft Internet Explorer, and Spry Mosaic.
|
The example in listing 9.4 shows how you would make basic.gif
(refer to fig. 9.1) a client-side image map.
Listing 9.4 Example of a Client-Side Image Map Configuration
View Code
As you can see from this example, this configuration file looks
a lot different from other map configuration files you've looked
at thus far. The main reason for this is that all parts of the
map configuration file must be represented in a way browsers can
handle. Because older browsers that don't support newer features
are supposed to ignore elements of tags they don't understand,
this allows for the map file to be included in your HTML document.
Those browsers that can handle client-side image maps will parse
the MAP element and create the client-side image maps,
while others will just ignore that portion of your Web page. You
must start your map with the MAP element and give it
a name by which you'll later call your map configuration. The
next lines consist of the AREA element within the MAP
element. The following table describes attributes for the AREA
element.
| Attribute |
Description
|
| SHAPE |
This attribute can be defined as CIRCLE, RECT, or POLY, depending on what shape you're defining. If this attribute isn't present, SHAPE=RECT is assumed. The
POINT value to the SHAPE attribute isn't supported, but you can get around that by including a circle with a radius of 1.
|
| COORDS |
This is the attribute that defines the coordinates of SHAPE. For RECT and POLY shapes, the coordinates are simply shown as x1,y1,x2,y2,...,xn,yn, whereas in a
circle you define the center x,y coordinate pair and the radius of the circle. Coordinate values should be represented in pixels, like all other image map specifi-cations.
|
| HREF |
This is the URL to the Web page you want this element to link to. It can be expressed as a full URL, or as a URI relative to the current page.
|
| ALT |
This attribute contains the alternative text you want to be displayed if the user is using a non-graphical browser or has images turned off.
|
Comments can be represented as normal HTML comments. A comment
begins with <!-- and ends with -->. Calling
the image map configuration and implementing the image map in
your HTML file is also rather easy. The following example explains
how to link basic.gif to the basic.map file shown earlier:
<img src="basic.gif" USEMAP="#basic_map">
This tag references your basic.gif image, calling it into the
HTML document, and then searches for the MAP element
with the name attribute of basic_map, as defined in the
example map in listing 9.4.
Client-side image mapping also provides extensive back-compatibility,
as not to confuse older browsers. You can benefit immediately
from the client-side image map, rather than wait for more browsers
to accept this new extension to HTML. If you have access to an
image map program as shown for some of the other servers discussed
in previous sections, you can make a map file for this similar
to the NCSA, Apache, CERN, W3C, Netscape, or Apple format, and
call the CGI program and the client-side image map. Older browsers
will throw out attributes they don't recognize and simply use
the older style of image mapping; however, the newer browsers
that support client-side image mapping will use the client-side
version you supply rather than the CGI script. You can implement
this into the previous example as
If you don't have access to another CGI image map program or your
server doesn't support it, you can still notify users when they
try to click the image that it's a client-side image map and their
browser doesn't support that. To do this, modify the first example
to look like this:
<a href="no_map.html">
<img src="basic.gif" USEMAP="#basic_map">
</a>
Next, create a file called no_map.html and notify users that they
have reached that page because their Web browser doesn't support
client-side image maps. From there you can offer them other ways
of reaching their destination.
The previous examples show how to call the USEMAP attribute
if your map is contained in the same document as the image from
which you're calling it. This doesn't always have to be the case-you
can include your map in a separate file. For instance, if you
want to have an HTML file called maps.html that contains all your
client-side image map configuration files, simply place the configuration
file shown at the beginning of this section, including the MAP
elements, into the file called maps.html. You can now call your
image map with
<img src="basic.gif" USEMAP="maps.html#basic_map">
Many tools are available on the Internet to help you create images
and find points on them that correspond to the pixel coordinates
you need for your configuration file. The following sections provide
descriptions and instructions for using several of these tools,
including tools for the Macintosh, Windows, and UNIX.
The image map tool I reviewed for the Macintosh was WebMap 2.0b8.
It can be found on the accompanying CD-ROM, or you can download
it from the WebMap Web site at http://www.city.net/cnx/software/webmap.html.
You can use WebMap to create image maps out of GIF and PICT formatted
image files. It can trace the circle, rectangle, oval, polygon,
and point (see fig. 9.2). Also in figure 9.2, you see the basic.gif
from figure 9.1 with the circle outlined.
Figure 9.2 : This is WebMap for the Macintosh, after you open the image file and highlight a selected region.
| NOTE |
Most browsers don't support PICT images; therefore, these images should be converted to GIF or JPEG format before you incorporate them into your HTML pages.
|
After you completely trace all your locations in the image map
and fill in the URL and comments box for each one, you can save
the file. When the save dialog box pops up, it looks similar to
figure 9.3. WebMap supports NCSA and CERN image map formats, so
you can choose which one you want to save to. Choose the name
for your map file and then click the Save button.
Figure 9.3 : WebMap offers two choices when saving files: CERN or NCSA format.
The following sections provide step-by-step instructions for two
popular Windows NT image map programs: Map This version 1.20 and
Web Hotspots version 2.0 by 1automata. These programs are also
Windows 95 compatible.
Map This Version 1.20
Map This runs under all Windows platforms, from 3.1 (running Win32s)
to Windows 95, and including Windows NT. A very fast image mapping
program for the Windows platform, Map This is probably one of
the best on the Net. One of the top features of this program is
that it's freeware, so you don't need to worry about registration
fees.
Map This version 2.0 is included on the CD-ROM located in the
back of this book. If you're using Windows 3.1 to run Map This,
you also need to install version 1.3 of Win32s, also located on
the CD-ROM.
After installing Map This, open the program, pull down the File
menu, and choose New. The dialog box that appears tells you that
you need to select an image to correspond to your map file if
you want to continue (see fig. 9.4). Click Let's Go Find One!
if you want to continue.
Figure 9.4 : Click the Let's Go Find One! button to continue creating your image map file.
After opening your image, choose the basic.gif file, and your
screen will look something like figure 9.5.
Figure 9.5 : Basic.gif opens inside Map This.
Notice the tools located above your image in figure 9.5. The leftmost
tool allows you to create a rectangular area. Moving across the
toolbar, the next one is the circle tool, followed by the polygon
tool, which allows you to trace around an object of many sides.
Using this toolbar and the cursor, click the tool you want and
then select the vertices of rectangles and polygons, or outline
the circle until all the portions of the image you want to be
included in your map file are highlighted. After they're all outlined,
your image should look similar to figure 9.6.
Figure 9.6 : This is what your image map file should look like after you high-light the areas inside it.
Now that you've selected all the areas on your image map, pull
down the Mapping menu and choose Area List. The Area List dialog
box shows all the areas that you've highlighted in your image
(see fig. 9.7). With this dialog box, you can delete and edit
any of the areas that you've specified. All areas you want to
keep must be edited and their proper URLs filled in before you
can create a map file from the image.
Figure 9.7 : The Area List dialog box lists all selected areas in the image map and allows you to edit and delete them.
To edit a selected portion of the image, click the choice in your
Area List and click the Edit button. This brings up a dialog box
similar to figure 9.8.
Figure 9.8 : The Area dialog box shows you the type of image and allows you to fill in the URL and comments.
The Area dialog box shows the type of area you're working with,
its position in the image map, and the dimensions of the image.
You need to fill in the URL text box and, if you want, can also
add a comment about the area. You can now choose to Delete the
area, or click OK to continue. Continue to edit all portions of
the image map that you selected. After you finish editing, choose
Save from the File menu, and the dialog box in figure 9.9 appears.
Figure 9.9 : After filling out the information in the Info About This Mapfile dialog box, Map This allows you to save your image map file.
Fill in the Title, Author, Default URL, and Description text boxes
accordingly and choose your file format. Map This now supports
NCSA, CERN, and Client-Side ImageMapping (CSIM) standards. Click
OK and then choose a file name to which you can save the map file.
Web Hotspots Version 2.0
Web Hotspots provides an easy-to-use interface with which you
can create server-side and client-side image map configuration
files. Web Hotspots is shareware and can be found at http://www.cris.com/~automata/hospots.html,
or on the CD-ROM accompanying this book.
To begin a new image map file, install the Web Hotspots program
and then start the program. After you start it, choose New from
the File menu. A dialog box appears, asking you to specify the
file name of the image from which you want to create the image
map configuration file. Select one of the images from your hard
drive and click OK to open the image inside the Web Hotspots program
(see fig. 9.10).
Figure 9.10 : The toolbar in Web Hotspots allows you to create circles, rectangles, polygons, and more.
Now go through the steps to create a basic image map configuration
file as if your image was basic.gif (refer to fig. 9.1). The first
object you need to define is the circle. Select the circle tool
from the menu bar at the left. Starting from the upper right of
the circle, drag to the lower left to select a circular area that
you want to highlight with a URL. Notice that a temporary URL
has popped into the URL box at the bottom of your Hotspots screen.
You must edit this URL to point to the correct URL for the circle:
http://www.server.xxx/circle.html. Figure 9.11 shows the image
map after highlighting the circle and changing the URL.
Figure 9.11 : After you highlight a portion of your image map, fill in the URL at the bottom of the screen.
You can continue to designate hot spots on your image with the
different tools at the left. You'll need to use the polygon tool
to hyperlink the triangle and the rectangle tool to hyperlink
the rectangle. Because there's no point specification with this
program, you must use the circle shape to create a very small
circle around the dot in the image map.
After all the hyperlinks and portions of the image map are defined,
you need to open the File menu and select Page New.
You're now presented with the Image Map Variety dialog box, which
asks you to choose whether you want to create one of many different
kinds of image map configuration files (see fig. 9.12). The options
for image map configuration files are Client-Side, External Client-Side,
Server-Side, Client-Side with Server-Side Support, and External
Client-Side with Server-Side Support. The following table describes
what each choice from the Image Map Variety dialog box does.
Figure 9.12 : You're allowed to choose from five variations of map files to fit the needs of your server and client software specification.
| Option |
Description
|
| Client-Side |
When you choose this type of map file, you're presented with another dialog box, which asks the file name to which you want to save the map. Hotspots then creates this file, with the image and the
map file referenced in one Web page.
|
| External Client-Side |
This map file is very similar to that of the Client-Side option, except when you choose this type, your image is called from one document and the map source file resides in another HTML
document.
|
| Server-Side |
After you select this option, a file-save dialog box appears, asking what you want to call your map file. It will default to a .MAP extension with NCSA formatting. You can also choose to have it
saved in CERN formatting, if you use the CERN or W3C servers. The use of a Server-Side image map configuration file requires you to have an image map program on your server or a server that can handle image maps. Refer to the configuration of each server,
which was discussed earlier in the section "Web Server Image Map Configurations."
|
| Client-Side with |
This includes an HTML file that references both a client Server-Side Support side implementation of image maps and a server-side for those browsers that don't currently support client-side
image mapping.
|
| External Client-Side |
This is similar to Client-Side with Server-Side Support, with Server-Sideexcept the configuration tags for the client-side image Support mapping are kept in another HTML document and are
referenced when they're called on. This includes backward compatibility with versions of Web browsers that don't support client-side image mapping.
|
After you pick the type of image map you want to create, a dialog
box, as shown in figure 9.13, appears to let you choose the path
to the file in which you want to save your map.
Figure 9.13 : This dialog box appears when you try to save a map file.
Client-side image maps are saved in files called .htm, while server-side
implementations are saved in files with a .map extension. After
you save the image map file, a Host Specification dialog box appears
(see fig. 9.14). After you enter the Page Title and Image URL,
your map file is saved.
Figure 9.14 : The final configuration needed for your map file
Many standard image-viewing utilities come with most UNIX operating
systems that allow you to find coordinates in the image and plot
them into a standard map file. Currently, no UNIX-based image
map programs available on the Internet offer a friendly interface
and provide the tools necessary to make image map files. Instead,
you must load your favorite UNIX image editor and click various
spots in the image to locate the position of the image you want
to highlight inside the larger image. After you find these coordinates,
you need to manually create a map file, as demonstrated earlier
in this chapter. Choose the server you use, and then tailor your
map file to resemble the format. Understandably, UNIX isn't a
popular platform for creating image map files.
Many Web applications require you to generate images on the fly.
Some of these include creating a counter, where the image is incremented
every time a user hits your page, and a coloring book, where users
can click portions of an image map and have the colors changed.
Many of these types of programs are available on the Internet,
and the following sections discuss two of them: GIFlib and FLY.
GIFlib is very useful when creating images on the fly. Many programs
on the Web use it to generate counters and other images that need
to be updated when users visit a site.
GIFlib can be used in UNIX and DOS environments.
Obtaining GIFlib
GIFlib version 2.2 is on the CD that comes with the book. You
can also download GIFlib from ftp://mph124.rh.psu.edu/pub/programming.
Compilation instructions are included with the file. Installation
instructions and documentation explaining the program are included
in the distribution.
| NOTE |
When you have the file, it will already be tarred and gzipped. From there, you have to execute the following commands from a command shell:
0unzip giflib-2.2.tar.gz
% tar xvf giflib-2.2.tar
|
Using GIFlib
Some of the useful programs included in GIFlib include many conversion
utilities, image manipulation components, report generators, and
GIF composition tools, including a few C templates. More detailed
instructions on how to use the program are included in the compressed
file. (See Chapter 22, "Tips and Techniques for C and C++,"
for more information on C programming.)
| CAUTION |
GIFlib is a relatively complex program, and it may be rather difficult to use effectively if you aren't well versed in C.
|
FLY, created by Martin Gleeson (gleeson@unimelb.edu.au),
can be used as an interface from Perl/CGI scripts to interact
with the gd graphics library for fast GIF creation. Version 1.3
of FLY, included on the CD-ROM, is now available only for UNIX
platforms (although Windows and Macintosh versions of FLY are
planned). Written in C, FLY allows for easy interaction between
Perl and shell scripts with the gd library.
Obtaining FLY
You can download the most recent version of FLY from http://www.rasip.fer.hi/man/fly.html,
where the current versions are always located. These sites also
contain complete instructions on how to install and use FLY.
Using FLY
FLY is usually invoked with the path to a file containing the
FLY commands, and then the path to which you want the image to
be output. There are also options that allow you to specify whether
you want to read input from the command line and send the image
to STDOUT.
FLY allows for the easy creation of rectangles, polygons, circles,
lines, and many other objects. You can choose what color to fill
your images, or leave them without color. FLY also has the option
of copying and pasting from other images. This is useful when
it comes to making counter programs, because you can have a set
of premade number files and then simply copy and paste the correct
ones into the new image and send that back to the client. More
information on using FLY can be found on the Web page.
|
;){kind=link}
;){kind=link}
;){kind=link}
;){kind=link}
;){kind=link}
;){kind=link}
;){kind=link}
;){kind=link}
;){kind=link}
;){kind=link}
;){kind=link}
;){kind=link}
;){kind=link}
;){kind=link}