Click here to support our advertisers
SOFTWARE
FOR SALE
BOOKS
FOR SALE
SEARCH CENTRAL
JOB BANK
CLASSIFIED ADS
DIRECTORIES
REFERENCE
TRAINING CENTER
JOURNAL
NEWS CENTRAL
DOWNLOADS
DISCUSSIONS
CALENDAR
ABOUT US
Journal:
Get the weekly email highlights from the most popular online Journal for developers!
developer.com
developerdirect.com
htmlgoodies.com
javagoodies.com
jars.com
All Categories :
HTML
Chapter 12
Clickable Image Maps and Graphical
Interfaces
CONTENTS
Image Maps Defined
Example: The Apple Web Site
Understanding How Image Maps Work
The Map Server Program
The Map Definition File
The Various Shapes of Hot Zones
Defining Your Image map Hot Zones
MapEdit for Microsoft Windows and X-Windows
Example: MapEdit and a Simple Button Bar
WebMap for Macintosh
Adding Image Maps to Your Web Page
The Image Map URL
Example: Testing Your Link
Image Map Design Tips
Summary
Review Questions]
Review Exercises
In Chapter 11, "Using Links with
Other HTML Tags," you spent some time creating clickable
images, which make Web pages more graphically appealing and (ideally)
a little more intuitive. This chapter takes creating a graphical
interface to your Web site one step further.
With image maps, you can create an entire interface for your Web
pages and sites that rivals the interfaces of popular multimedia
games, graphical operating environments, and interactive kiosks.
The first 11 chapters of this book have said that the Web is about
text, but that fact doesn't mean that you can't use some great
graphics to spice up your presentation.
Image
Maps Defined
The map part of image map conjures up two separate
images. First, image maps on Web sites often act like road maps
for the Web site, adding interface elements that make it easier
to get around on the Web site. Second, the word map also
suggests the way that image maps are created. Image maps begin
life as normal graphics (usually in GIF or JPEG format), designed
with the Web in mind. Then another program is used to map hot
zones (clickable areas) on top of the graphics.
When put in place on a Web page, an image map allows users to
access different HTML pages by clicking different parts of the
graphic. Because each hot zone has an associated URL, and because
each hot zone corresponds to part of the graphic, maneuvering
about a Web site becomes more interesting, graphical, and interactive.
Example: The Apple Web Site
Apple Computer offers a very interesting example of an image map
on the main page of its Web site. To check out the page, load
your graphical Web browser, connect to the Internet (if you're
not already connected), and enter http://www.apple.com/.
When the page loads in your browser, you'll see the interface,
which looks a little like a futuristic hand-held computer, on-screen.
Note
Notice how long it can take a graphical interface to load over your connection, especially if you use a modem to access the Internet.
This example isn't terribly structured, but it allows you to play
with the image map interface. You may already have a good deal
of experience with such interfaces, especially if you've spent
a lot of time on the Web.
By simply pointing at part of the graphic, you may be able to
bring up a URL in the status bar at the bottom of your browser
bar (see fig. 12.1). This bar shows you where the various hot
zones for the image map are and at what coordinates your mouse
pointer appears.
Figure 12.1 : The image map interface at Apple Computer's Web site.
Check out one more thing. If the image map fills your screen,
scroll down in your browser window so that you can see what's
below the interface on Apple's Web page. The text directly below
the interface almost exactly mirrors the hyperlink options you
have with the image map, because image maps, unlike clickable
graphics, don't offer an ALT
statement for the various hot zones. So you have to include additional
links to cater to your users of nongraphical browsers.
Understanding
How Image Maps Work
Creating an image map involves three steps: creating the graphic,
mapping the graphic for hot zones, and placing the correct information
(along with the correct programs) on the Web server itself. This
section discusses the Web server; the next section talks about
defining hot zones.
For more information on creating graphic images for Web pages,
see Chapter 9, "Creating and Embedding
Graphics."
To offer your users the option of using image maps, you must have
a special map server program running on your Web server. For UNIX-based
servers, this program will most often be NCSA Imagemap; other
platforms have their own map server programs.
The Map Server Program
When a user clicks an image map on a Web page, the browser determines
the coordinates of the graphic (in pixels) that describe where
the user clicked. The browser then passes these numbers to the
map server program, along with the name of the file that contains
the URLs that correspond to these coordinates.
NCSA Imagemap, then, simply accepts the coordinates and looks
them up in the database file that defines the hot zones for that
image map. When NCSA Imagemap finds those coordinates and their
associated URL, it sends a "connect to URL" command
(just as a hypertext link does) that causes your browser to load
the appropriate HTML document.
Note
If you're running your own WebStar or MacHTTP server from a Macintosh, you can use a map server called MapServe, which you can download from http://www.spub.ksu.edu/other/machttp_tools/mapserve/mapserve.html.
For the most part, other commercial Web servers for UNIX and Windows NT include map server capabilities.
The Map Definition File
To determine which parts of the image map are linked to which
URLs, the map server program must have a map definition file at
its disposal. This file is generally a text file with the extension
MAP, stored somewhere in the CGI-BIN
directory for your Web site. Exactly where this file is stored
depends on the combination of your Web server and map server.
Let it suffice to say that you'll need to consult your server's
documentation or your ISP.
The map definition file looks something like figure 12.2. You
can create this file and save it as a standard ASCII text file
with the appropriate extension; fortunately, you probably won't
have to.
Figure 12.2 : A map definition file.
You can define different shapes in the file; these shapes correspond
to the shapes of the hot zones that overlay the graphic that you
want to use for your image. Each set of coordinates creates a
point on the graphic. The coordinates are expressed in pixels,
with each pair of numbers representing the number of pixels to
the right and down, respectively, from the top left corner of
your graphic.
The shapes require a different number of points to define them.
Rectangles require two points, for example, and polygons require
as many points as necessary. Luckily, the number of points involved
isn't something that you'll have to worry about. Simply by using
a map editing program for Windows or Macintosh (discussed later
in this chapter in the sections, "MapEdit for Microsoft Windows
and XWindows" and "WebMap for Macintosh"), you
can automatically create the map definition file required for
your map server.
Note
You can create image maps without map servers and map definition files by using a technology called client-side image maps. Currently a Netscape technology, this technology eventually may become an HTML 3.0 standard. For more information, see Chapter 17, "Client-Side Image Maps."
The Various Shapes of
Hot Zones
This section briefly defines the shapes of hot zones. Hot zones
can be in any of the following shapes:
rect (rectangle)-This shape requires two points: the
upper left coordinates and the lower right coordinates.
circle-To create a circular region, you need coordinates
for a center point and an edge point. The circle is then computed
with that radius.
point-A point requires only one coordinate. The map
server software decides which point the mouse pointer was closest
to when the shape was clicked (provided that the click didn't
occur in another hot zone).
poly (polygon)-You can use up to 100 sets of
coordinates to determine all the vertices for the polygon region.
default-Any part of the graphic that is not included
in another hot zone is considered to be part of the default region,
as long as no point zones are defined. If a point is defined,
then default is redundant, since the map server will evaluate
any click (outside of a hot zone) and choose the nearest point.
Defining
Your Image Map Hot Zones
As a designer, you are responsible for doing two things in the
hot zone definition process. First, you need to define the hot
zones to create the image map-that is, you need to decide what
URL the coordinates will correspond to when the image map is clicked.
Second, you need to create the map definition file that makes
the hot zone information available to the Web server. For Windows
and Macintosh users, luckily, programs that do both are available.
MapEdit for Microsoft
Windows and X-Windows
Available for all flavors of Windows (Windows 95, Windows 3.1,
and Windows NT) and for most types of UNIX, MapEdit is a powerful
program that allows you to graphically define the hot zones for
your image maps. You can access and download the latest version
of this program via the MapEdit Web site (http://www.boutell.com/mapedit/).
When you have the program installed and you double-click its icon
to start it, follow these steps to define your map:
Choose File, Open/Create from the MapEdit menu.
The Open/Create Map dialog box appears.
In the Open/Create Map dialog box, enter the name of the map
definition file you want to create and the name of the graphic
file you want to use for your map. You should also use the radio
buttons to determine whether you'll use CERN or NCSA map definitions.
(Consult your map server software or ISP if you're not sure whether
to use CERN or NCSA.)
Click the OK button. The Creating New Map File dialog box
appears. In this dialog box, click Yes. After a moment, MapEdit
displays your image file.
To create a new hot zone, choose the shape from the Tools
menu; then click one time for each point required for the shape.
For a rectangle, click once to start the rectangle and then click
where you'd like the opposite corner of the triangle to appear.
For a circle, click for the middle, and then drag out the circle
and click when you've got the right radius. The triangle tool
is actually a "polygon" tool, so click for each point
in the polygon. Then, right-click at the last point (to connect
your last point to the first point and complete the shape).
When the shape is created, the Object URL dialog box appears
(see fig. 12.3). Enter the URL that you want to associate with
your new hot zone. (You also can enter comments, if you want.)
Then click OK to continue.
Add more shapes by following steps 4 and 5 until you finish
mapping your graphic.
Choose File, Save. Now you have a .MAP
file for your image map.
Figure 12.3 : Associating an URL with the hot zone.
Tip
By choosing File, Edit Default URL, you can determine whether your image map includes a default URL for clicks outside your hot zones.
Example: MapEdit
and a Simple Button Bar
In this example, you use MapEdit to create a simple button bar-a
little like the menu bar that you created with clickable graphics
in Chapter 11, except for the fact that
this one is an image map. Start by drawing an appropriate graphic
in a graphics application and saving it as a GIF file. For this
example, name the file testbar.gif.
Then follow these steps:
Open MapEdit, and choose File, Open/Create.
The Open/Create Map dialog box appears.
In this dialog box, enter testbar.map for the map file
and testbar.gif for the graphics file. (If you saved the
GIF file in a different directory, use the Browse button to find
and load it.)
When the graphic loads, pull down the Tools menu and
make sure that Rect is selected.
Draw rectangles for the buttons, providing an appropriate
URL for each button. For this example (four buttons in all), use
the following URLs:
http://www.fakecorp.com/index.html
http://www.fakecorp.com/product.html
http://www.fakecorp.com/service.html
http://www.fakecorp.com/help.html
Choose File, Edit Default URL. The Default URL
dialog box appears.
Enter the following URL:
http://www.fakecorp.com/error.html
Choose File, Save.
Choose File, _Quit.
You've created your map definition file. To look at the file,
open Notepad (or a similar text editor), and load the file testbar.map
into it. The file should look something like figure 12.4 (although
the coordinates are bound to be slightly different).
Figure 12.4 : A successful map definition file created in MapEdit.
WebMap for Macintosh
If you're a Macintosh user, you can use a program called WebMap,
which is similar to MapEdit. You can download WebMap from http://www.city.net/cnx/software/webmap.html.
Install the program; then double-click its icon to start it.
To create an image map in WebMap, follow these steps:
Choose File, Open.
In the Open dialog box, select the graphic that you want to
use for your map and the name of the map definition file that
you want to create.
Click the OK button. After a moment, MapEdit displays your
image file.
To create a new hot zone, choose the shape from the floating
tool palette, and drag to create a hot zone. For a rectangle,
circle, or oval, click and hold the mouse in the top left corner
of your shape, drag the mouse to make the shape the desired size,
and then release the mouse button. To create a polygon, choose
the polygon shape from the tool palette and then click once on
the graphic for each point in your polygon. To complete the shape,
click once on the first point you created.
When the shape is created, enter the URL in the space provided
above the graphic file (see fig. 12.5). You can use the pointer
tool (the one that looks like a mouse pointer) to select different
shapes that you've created and then edit their URLs.
To create a default URL, use the pointer tool to click the
graphic background (not a shape). Default
URL should appear in the comment window. Then enter
the default URL in the URL text box.
Figure 12.5 : Using WebMap to create hot zones.
To create your map definition file, pull down the File menu and
choose Export As Text. In the resulting dialog box, you can name
your map file and save it in CERN or NCSA format. Now you're free
to save the graphic and quit the program.
Adding
Image Maps to Your Web Page
After you create your image map and your map definition file,
you're ready to add a link for your image map to your HTML page.
You can accomplish this task in a couple of ways, depending on
your Web server. In essence, though, the only major difference
between an image map and a clickable image (refer to Chapter 11)
is a new attribute for the <IMG>
tag: ISMAP.
Image maps follow this format:
<IMG SRC="graphic.ext"
ISMAP>
Note
It's perfectly acceptable to add other <IMG> tag attributes (such as ALT) to your image map definition.
Using the ISMAP attribute
doesn't do much for you unless the image map is also a hyperlink,
so the following code is everything that you need to add an image
map to your Web page:
<A HREF="URL"><IMG
SRC="graphic.ext" ISMAP></A>
Our next step is to figure out what to use as the URL in this
hyperlink.
The Image Map URL
The URL that you're interested in accessing isn't a particular
Web page, because using an URL to a particular Web page would
defeat the image map concept; the link would act like a regular
clickable graphic. Instead, you want the URL to access the map
definition file. You'll have to ask your ISP (or figure out for
yourself) where on the server the map file is stored.
Some Web servers allow you to store the map definition file anywhere
on the server; the servers are smart enough to figure out that
you're accessing a map definition file and take care of the rest.
In that case, you could simply store the map definition file in
the current directory and access it as follows:
<A HREF="mymap.map"><IMG
SRC="mymap.gif" ISMAP></A>
If you have an understanding server, this method may work for
you.
Other servers may require you to access a particular directory
on the server, such as the /cgi-bin/
or /bin/ directory, where
server scripts (mini computer programs) are stored. In such a
case, something like the following examples may be the way to
access the image map:
<A HREF="http://www.myserver.com/cgi-bin/mymap.map><IMG
SRC="mymap.gif" ISMAP></A>
or
<A HREF="http://www.myserver.com/bin/mymap.map><IMG
SRC="mymap.gif" ISMAP></A>
If the server requires you to access one of these scripting directories,
though, it may not want you to access the map definition file
directly. Instead, the server will want you to use an alias.
Some servers store all map information in a single database file
(often called imagemap.conf)
and require you to access information within the database by using
an alias. You and your Web server administrator have to determine
what this alias is. In that case, your link would look more like
the following:
<A HREF="http://www.myserver.com/bin/mymap><IMG
SRC="mymap.gif" ISMAP></A>
Example: Testing Your Link
The best way by far to participate in this example is to confer
with your ISP, place your map definition file on the Web server,
and test it from a remote location using the correct URL. If that
procedure doesn't work, you can manage some testing on your own.
Save your template as a new HTML file, and have an image-mapped
graphic handy in the same directory. Then enter Listing 12.1 between
the <BODY> tags.
Listing 12.1 img_map.html Adding
Image Maps in HTML
<BODY>
<A HREF="http://www.server.com/mymap.map><IMG SRC="mymap.gif"
ISMAP ALT=
"My Image Map"></A>
<H2>Welcome to my page!</H2>
</BODY>
Note
If you're going to test this example on an actual Web server, you need to replace the URL with the appropriate one for your Web site (and add the type of link to your map info file that's required for your server). Also, use the real name of the mapped GIF file in the <IMG> tag.
Save the HTML file and then load it in a graphical browser. If
your graphic came up, chances are that you set the <IMG>
tag correctly. Notice that many browsers do not display a colored
link border around the graphic, because the graphic is now considered
to be an image map.
Before clicking any of the hot zones, move your mouse pointer
around on the image map graphic. If you have a status bar at the
bottom of your browser window, you may notice that the link keeps
changing (see fig. 12.6). Along with the URL of your map definition
file, you should be seeing the current coordinates of your pointer.
All this information is sent to the map server to help it figure
out what region you clicked. (If you're testing this image map
from your local drive, the status bar test is the only part of
the example that will work.)
Figure 12.6 : An example image map, showing the URL and the coordinates that it will access if clicked.
Now, if you are testing your image map on the Web server, go ahead
and click the map to make sure that all the links work. If you're
viewing the image map locally, turn off the graphics-loading option
in your browser, and reload the page. You should notice that there's
now no way to access the hyperlinks in the image map-that's why
you also need text links for your image map pages.
Image
Map Design Tips
This chapter has covered creating and linking an image map to
your Web page fairly thoroughly. Image maps are a bit of a departure
from standard text-markup HTML, however, so you should learn a
little bit of design theory and Web-related netiquette before
you leave this chapter. Please try to keep some of the following
suggestions in mind when you add image maps to your Web pages:
Use image maps sparingly. The best way to use an image
map is as a clickable menu bar or some other easy-to-recognize
interface element. The point isn't really to see how graphical
you can make your Web pages-just how intuitive.
Remember that image maps are usually little more than big
graphics files. Ultimately, the key to graphics on the Web
is keeping them small. Even if your image map is incredibly attractive,
users will be annoyed if they have to wait many minutes for their
four possible choices to download to their browsers. Use all the
tips in Chapter 9 to keep your graphic
as small as possible, and use image maps only to enhance usability.
Image maps require redundant text links. Unless you
plan to leave out everyone who can't view your graphics, you need
to create text links that do everything that your image map does.
Remember that with clickable graphics, the ALT
attribute takes care of the problem. The ALT
attribute doesn't work for image maps, because a single image
map graphic can have many links, so you need to create an identical
text link on your page for every hot zone link in your image map.
Stick to normal shapes whenever possible. Rules
are made to be broken, but in general, you should try to be conservative
with your image maps (see fig. 12.7). A graphic that looks as
though it has rectangular buttons should function as though it
has rectangular buttons. In other words, make your hot zones correspond
logically to the image map graphics. Random hot zones randomly
annoy users.
Figure 12.7 : Some sites make it their business to use image maps that break the rules. This one doesn't.
Summary
Image maps allow you to create hot zones in individual graphics
files. These hot zones point to different URLs, effectively turning
a single graphic into a Web interface. By creating creative graphics
and pointing different sections of those graphics to pages in
your site, you can make it very easy for Web users to get around
on your site.
Image maps work in conjunction with your Web server, which must
be running a special map server program. In such a case, you need
to create a graphic and a map definition file. Fortunately, programs
for Windows, UNIX, and Macintosh exist to help you create this
definition file.
In conjunction with your system administrator, you place the map
definition file in the correct directory on your Web server (most
often in the /cgi-bin or
/bin directory), and create
a link to the image map on your Web page. Placing the image map
in your HTML document requires the same anchor and <IMG>
tags, but you need to include the ISMAP
attribute in the <IMG>
tag.
After you finish with all your tags, test your new image map.
If all goes well, you'll have a new interface for your Web pages.
You should consider some design rules. Basically, keep the graphics
small and fairly standard, so that you don't annoy or confuse
your users.
Review
Questions
Why are the graphics discussed in this chapter called image
maps?
What three steps do you follow to create an image map?
What file format is the map definition file saved in?
Is it important to know what type of map server program your
Web server is using? Why or why not?
How do you find out where to store your map definition file?
How many points are required for a rectangle in a map definition
file? What is the maximum number of points that you can use for
a polygon?
True or false. You can create an image map without a map editing
program.
Which files must you create for an image map to work?
Do the shapes (rect, poly, point, and so on) that you draw
in a map editing program show up in the Web browser window? Why
or why not?
Why is defining a default map definition redundant if you
have already defined a point?
Aside from the URL to the map definition file, what information
does the Web browser send to the Web server? What does the designer
do to make this happen?
Review
Exercises
Create two different map definition files for the same graphic,
one using the CERN method and one using NCSA. Compare the two
definition files and notice the differences.
Again create two different map definition files for the same
graphic, this time using all polygon shapes for one of the definitions
and all squares for the other definition. Compare the two definition
files. Are polygons considerably more complicated than standard
shapes?
Create a button bar (or menu bar) using a series of clickable
graphics. Then, create a similar button bar using an image map.
Which takes more work? Which will take more time to download to
a browser (i.e., which method takes up more drive space)?
Use of this site is subject to certain
Copyright (c) 1996-1998
EarthWeb, Inc.. All rights reserved. Reproduction in whole or in part in any form or medium without express written permission of EarthWeb is prohibited.
Please read the .
Contact with questions or comments.
Copyright 1998 Macmillan Computer Publishing. All rights reserved.
zanotowane.pldoc.pisz.plpdf.pisz.plteen-mushing.xlx.pl