Chapter 12
Creating Clickable Images
CONTENTS
If you've experimented with images and links, which you learned
about in previous chapters, you've probably already discovered
that you can use an image to create a hyperlink to another HTML
document. But what about using a single image to link to several
different documents? It can be done using clickable images, also
known as image maps.
When you use a clickable image map, the user clicks on a part
of the image. The server records the coordinates of the part that
was clicked, and your image map directs the server to process
a hyperlink accordingly.
You've probably seen image maps on a lot of Web sites that you
have visited. Image maps are an excellent way to visually present
links in an intuitive and friendly fashion. Creating your own
image maps isn't hard to do, but it requires some careful preparation.
In this chapter you'll learn how to create and prepare image maps
for use with your own HTML documents.
The first part of building a clickable image map is creating the
image to be used. Your image should be simple and easy to understand,
with clearly delineated sections.
- If you use a clickable image map in your HTML documents, keep
in mind that users with text-only browsers will be left out in
the cold. It's always a good idea to provide text-only versions
of any documents that use a clickable image map.
Figure 12.1 :
- Create your clickable image using Paint Shop Pro or another
image editing program that can save files in GIF or JPEG format.
In this ex-ample, we'll use a button bar.
Figure 12.2 :
- When creating an image map, make the actual image as simple
to understand as possible. You should always try to place text
in the image to help your readers understand which sections of
the image to click. Photographs and other images that lack clearly
defined sections are usually poor choices for image maps.
- Plan out in advance the different sections of your image map
and where their associated links will point. Making substantial
changes to images is always time-consuming and difficult, so you'll
want to account for all the possibilities before you create your
image.
- Sketch out the pixel boundaries of all the various sections.
Your clickable sections can be rectangles, circles, or polygons.
You can also define single pixels as regions, but this is discouraged.
Figure 12.3 :
- In our button bar example, all of the clickable regions are
rectangles, which makes things easy. Rectangles are measured using
two sets of coordinates: the upper-left corner and the lower-right
corner.
Figure 12.4 :
- Polygons are defined by supplying the coordinates of all the
corners. For example, to define a triangle, you would need to
supply three sets of coordinates.
- Circles are defined by finding the coordinates of the circle's
center and measuring the radius in pixels.
- Once you've finished creating or editing your image, save
it in GIF or JPEG format.
The second part of building a clickable image map is creating
the map file. This text file contains a list of coordinates that
form the map regions. Each clickable region has an associated
hyperlink. The Web server reads the map file to match the
coordinates of the pixel that was clicked by the user, and then
determines which hyperlink to send the user to.
You can find the latest version of Map This! by pointing
your Web browser to http://galadriel.ecaetc.ohio-state.edu/tc/mt.
- You can test out your map file by choosing Test Map from the
Goodies menu. This allows you to see what links will be activated
when certain parts of the image are clicked on by the user.
- You can use the image magnification tools on the toolbar to
zoom in on the image. This gives you greater precision when
defining the clickable regions for your image.
- If you have a large number of click-able regions defined,
using the Area List window will help you track and select them.
Choose Area List from the View menu to display a separate window
which lists all of your defined regions.
Figure 12.5 :
- Start Map This! and select New from the File menu. You'll
be prompted to locate an image to use for the map. Open your existing
GIF or JPEG file.
Figure 12.6 :
- Select the appropriate icon shape from the toolbar for the
type of clickable region you want to define.
Figure 12.7 :
- Click and drag the selec-tion marquee across the region. The
status bar will display exact coordi-nate information.
Figure 12.8 :
- Click on the arrow icon in the toolbar to select an existing
area. Then double-click on the region you just defined.
Figure 12.9 :
- In the Area Settings dialog box, specify the URL of the item
that this region should link to. For example, to link to an HTML
document named about.html in a subdirectory called info/,
type info/about.html. For more information on URLs and
links, refer back to Chapter 6
Figure 12.10:
- Repeat steps 2-5 until all of the click-able regions in your
image have been defined and associated with links.
Figure 12.11:
- When you're finished defining clickable re-gions, choose Save
As from the File menu. You'll be prompted to fill out the Info
dialog box. Type in a title for your Map file and put your name
in the Author field. The de-fault URL is used when the user clicks
on a part of the image that is not defined by one of your regions.
You should also supply a brief description of what your map file
does.
Figure 12.12:
- Repeat steps 2-5 until all of the clickable re-gions in your
image have been defined and associated with links.The last item
in the Info dialog box is the map file format. Different Web servers
recognize different image map file formats. The default format
is NCSA, which is the most widely used. You should check with
your server administrator to see which format you need to select.
- Click on the OK button. Then, choose a file name for your
map file. Your file should have the extension .map. Click
on the Save button when you're finished.
Figure 12.13 :
The last thing you need to do to create an image map is to place
it on your Web server and place a reference to it in your HTML
document.
An image map works just like a CGI script, and usually belongs
in the same directory as scripts on your server. Consult your
Web server administrator for details on how to upload your completed
map file to the appropriate directory. The actual image can be
placed anywhere you like, although it's generally a good idea
to place it in the same directory as your HTML document.
- For more information on hyperlinks, refer back to Chapter
6.
- Turning images into hyperlinks usually causes a blue border
to be displayed around the image. To turn the border off, type
BORDER=0 inside the <IMG> tag.
Figure 12.14:
- Open your HTML document in Notepad, and position the cursor
where you'd like to place the image map. An image map is placed
into HTML as a hyperlink. Type <A HREF="">
and insert the name of your map file inside the quotation marks.
For example, if your map file is named buttons.map and is located
in the cgi-bin directory on your server, you would type <A
HREF="cgi-bin/buttons.map">.
Figure 12.15 :
- Some Web servers handle image maps differently than normal
CGI scripts. Be sure to check with your server administrator for
exact instructions on how to link to your image map.
- Now you need to include a reference to the actual image, with
one important attribute specified. Image map graphics need to
include the attribute ISMAP inside the <IMG> tag. For example,
to include the image buttons.gif as an image map graphic, type
<IMG SRC="buttons.gif" ISMAP>.
Figure 12.16 :
- You should also specify the height and width of your image
inside the <IMG> tag using the HEIGHT and WIDTH attributes.
Figure 12.17 :
- Close your link by typing </A>.
Figure 12.18 :
- Save the edited HTML file by selecting Save from the File
menu in Notepad.
Figure 12.19:
- Unfortunately, you can't test out an image map on a local
machine. You'll need to upload everything to your Web server before
you can fully test your image map. See the Appendix for more information
on transferring files to your Web server.
