Well, here we are at part eight of this series of articles on producing Web pages. There is so
much that can be done, it seems like this series could go on forever. On top of that, things are
changing at a dizzying pace. It's getting hard just to keep up. Enough lamenting, let's get on with
it.
What is an Image Map?
An image map is really quite a simple concept. It is a regular image that has some mapping information associated with it. The mapping information specifies links to be followed when various parts of the image are clicked on. There are basically two types of image maps that can be created: server-side and client-side.
For server-side image maps, a map file is stored on the server and referenced by the image embedded in the HTML code. The map file contains hot spot information along with link references. When the user clicks on the image, the coordinates of the pointer are sent back to the server for interpretation of what to do.
For client-side image maps, map information is stored directly in the HTML file itself.
(NOTE: it can also reside in a separate HTML file; however, this is usually only done when the map
information is used more than once.) The browser is then responsible for reading this information
and interpreting the user's mouse clicks. Thus, this technique can only be used by browsers that
support this feature.
Which Method Should I Use?
Since client-side image maps are more efficient, it is preferable to use them. However, some
people may not be using a browser that supports them. Fortunately, it is possible to write the HTML
code such that the client-side method will be used by browsers that support it and the server-side
method will be used by browsers that do not. Remember that some people will be browsing with
a non-graphical browser or will have graphics turned off because of a slow connection. Therefore,
it's also a good idea to have all of your image map links available on your page as text also.
Server-Side Image Maps
To create a server-side image map, you simply embed an image in the HTML code for the
page using the IMG tag as usual. Just as you would for making the entire image a link, you wrap the
IMG tag with anchor tags, <A>...</A>. However, instead of the HREF attribute pointing to another
page, it points to a map file. To let the browser know that the image is to be mapped, the ISMAP
attribute is specified within the IMG tag. For example, suppose you have an image named
MapImage.gif that uses a map file named MapImage.map in the maps directory on the server. The
following code would be used in the HTML file:
<A HREF="maps/MapImage.map"><IMG SRC="MapImage.gif" ISMAP></A>
The map file, MapImage.map is a text file containing information about what links to take when certain areas of the image are clicked on. The way this file is written is determined by the operating system of the server. The two most common methods are NCSA and CERN. Since my ISP's server uses NCSA, I will concentrate on it.
Typically, a map file will specify the coordinates of different shapes like a rectangle, a circle, or a polygon. Each shape will have associated with it an address to link to when the user clicks within the bounds of the shape. As an example, Figure 1 shows my new and improved home page. All of the text in the image, except for "Randy Finch's Home Page", is a link to another page on my Web site. The NCSA map file associated with this image is shown in Listing 1. I use seven rectangles, one circle, and two polygon shapes for creating the hot spots on Figure 1. Rectangles are used for hot spots on most of the text. A circle is used for "Media" so the entire circular portion of the Mandelbrot set in which the word resides is a hot spot. Polygons enclose the "Fiction" and "Poetry" text. These polygons are similar in shape to quarter circles as defined by the Mandelbrot set graphic.
Notice that each line in Listing 1 contains the name of a shape, the link address, and some
coordinates. The default line specifies where to link if the user clicks on the image but not on any
of the hot spots. Another entity known as a point can also be used. It overrides the default method.
When several points are defined in the map file, the closest one to where the user clicked, assuming
he did not click inside a shape, is selected. Here is a list of the formats used by each shape.
Rectangle:
rect address upper-left-x,upper-left-y lower-right-x,lower-right-y
Circle:
circle address center-x,center-y any-point-on-circle-x,any-point-on-circle-y
Polygon:
poly address 1st-point-x,1st-point-y 2nd-point-x,2nd-point-y ... last-point-x,last-point-y
Point:
point address x,y
For the polygon, there is an assumed connection from the last point to the first. The x and y coordinates for all shapes are measured from the upper-left corner of the image.
The CERN method for producing map files is very similar to the NCSA method. The
coordinates come before the address and each x,y pair is enclosed in parentheses. Also, a center
point and radius is specified for the circle rather than a center point and a point on the circumference.
Client-Side Image Maps
To create a client-side image map, you embed an image file in the HTML code using the
IMG tag, but add an attribute named USEMAP that references a MAP tag in the HTML code itself.
Thus, for the example given above, the code would look like this:
<IMG SRC="MapImage.gif" USEMAP="#mymap">
Somewhere else in the HTML file will be some code that looks like this:
<MAP NAME="mymap">
...
...
...
</MAP>
Notice that the USEMAP attribute is used the same way that an HREF attribute is in an A tag. If
the MAP tag resides in another HTML file, it can be referenced like this:
<IMG SRC="MapImage.gif" USEMAP="path/anotherpage.html#mymap">
To see what the code between the <MAP> and </MAP> tags look like for the image map on my
home page, look at the bottom of Listing 2. The AREA tag is used to define shapes for the map.
The SHAPE attribute is used to define what type of shape is to be used, the COORDS attribute is
used to define the coordinates for the shape, and the HREF attribute is used to define the link for the
shape. Although there is no pairing of the coordinate numbers, you should visualize them being
paired as x,y sets just as with the map file on the server side. Note that the CERN method is used
for circles in that the center coordinate and a radius is used.
Using Server-Side and Client-Side Image Maps Simultaneously
As I mentioned earlier, it is best to use both server-side and client-side image maps together
in your HTML code. This will allow newer browsers supporting the latter to be more efficient, but
still allow older browsers to work also. If you look near the beginning of Listing 2, you will see how
I implemented both methods in my home page. The relevant line looks like this:
<A HREF="maps/homeimgmap.map"><IMG SRC="titles/homeimgmap.gif" ALT="Homepage
Image Map" ISMAP USEMAP="#homepage"></A>
As you can see, this is just a total merger of the two methodologies. The link to the map file on the server is there along with the ISMAP attribute in the IMG tag. Also, the USEMAP attribute is used to point to the MAP tag near the end of the listing.
As stated earlier, for people who are using non-graphical browsers, you need to provide your
links in text format also. You can see this as a bunch of links in Figure 1 below the image map.
You can reference the appropriate code in Listing 2.
Ptolemy
If you have a rather complex image map containing many shapes, it can be a pain to create
the map file and/or the MAP tag contents. This is where image map software comes in handy.
These programs typically let you load an image, draw the various allowable shapes on the image, and
then specify link addresses for the shapes. John Tyler has written such a program for the Amiga.
The name of the program is Ptolemy. As of this writing, version 1.0 is available on the Web at
http://www.ids.net/~nightspd/ptolemy/ptolemy.html Figure 2
When I first used Ptolemy, I had several problems. The rectangle coordinates were being written in reverse order, sometimes a coordinate in a polygon would be written twice, and sometimes the program locked up with a shape blinking at me. I contacted John via Email and he had a fix to me in a day or two. It turns out that his computer was struck by lightning and he was having to reconstruct version 1.0 from an unfinished version 2.0. Thanks again, John.
John tells me that Ptolemy is a small part of a much larger, more integrated product named
Arachne. You can get more information at
http://www.ids.net/~nightspd/arachne/arachne.html
More Reader Pages
I keep getting more and more reader Web page addresses. Here are the ones I received
recently. If you sent me your address and I have not shown it yet, please send it to me again. I get
so much mail, it is hard to keep it all straight.
GamaSoft
This is the creation of Ted Wallingford and is located at
http://members.aol.com/GamaSoft/index.htm. It currently has fairly light content, but check it
out anyway (Figure 3).
Cooksey
This site is brought to you by Terry Cooksey (Figure 4). The address is
http://www.inet-direct.com/cooksey/index.htm. As you can see, Terry plans to have quite a bit
of content on this site. However, as of this writing, most of the site is under construction including
the Amiga links.
Ptolemy
Figure 5a shows the home page for Ptolemy by John Tyler. The address again is
http://www.ids.net/~nightspd/ptolemy/ptolemy.html. If you like this program, send John his $10
shareware fee.
Arachne
Figure 5b shows John Tyler's other page I mentioned earlier. The address is
http://www.ids.net/~nightspd/arachne/arachne.html. It gives information about the WWW
desktop publisher named Arachne.
Scott's Corner
Rickie Scott put together the page in Figure 6. The address is
http://www.ldd.net/scribers/rscott2/index.htm. There is some good content here including a
history of Scott's Corner, KY. There are some great Digiview images and Scenery Animator images.
Links to some of Rickie's favorite spots are also included.
Whyy's
Because Roy Nash decided to create it, that's whyy. Figure 7 shows Roy's page at
http://www.geocities.com/Tokyo/4987. He has some general links as well as Amiga links
(including my home page) for the Web.
Hy Noom
This is a rather bizarre page sent to me by Pete Wason (Figure 8). Most of the page is about
the company, but the links page has an eclectic mix of links ranging from Amiga sites to the Led
Zeppelin home page. Check it out at http://www.stumpworld.com/hynoom.
DarkWolf
DarkWolf is Patrick Kellum. His home page (Figure 9) is located at
http://www.otn.net/mypage/kellum. He has information about DarkWolf and links to Amiga sites.
According to his Web page, he also runs a BBS named Pup-Tek.
</MAP>
Well, that's it for this time. Remember to check out the new image map on my home page at http://fly.hiwaay.net/~rcfinch. Let me know how you like it. Next time, frames.