📄 ch12.htm
字号:
<HTML>
<HEAD>
<TITLE>Chapter 12 -- Imagemaps </TITLE>
<META>
</HEAD>
<BODY TEXT="#000000" BGCOLOR="#FFFFFF" LINK="#0000EE" VLINK="#551A8B" ALINK="#CE2910">
<H1><FONT COLOR=#FF0000>Chapter 12</FONT></H1>
<H1><B><FONT SIZE=5 COLOR=#FF0000>Imagemaps </FONT></B>
</H1>
<P>
<HR WIDTH="100%"></P>
<P>
<H3 ALIGN=CENTER><FONT COLOR="#000000"><FONT SIZE=+2>CONTENTS<A NAME="CONTENTS"></A>
</FONT></FONT></H3>
<UL>
<LI><A HREF="#ImagemapsMythMetaphorandMeaning" >Imagemaps-Myth, Metaphor, and Meaning</A>
<LI><A HREF="#AnatomyofanImagePixelsandCoordinat" >Anatomy of an Image-Pixels and Coordinates</A>
<LI><A HREF="#HTMLISMAPandQUERY_STRINGPassingIm" >HTML, ISMAP, and QUERY_STRING - Passing Imagemap Information to a CGI Program</A>
<LI><A HREF="#FlatlandRevisitedAnIntroductiontoth" >Flatland Revisited-An Introduction to the Standard Imagemap System</A>
<UL>
<LI><A HREF="#ImagemapcTheStandardImagemapHandler" >Imagemap.c-The Standard Imagemap Handler</A>
<LI><A HREF="#mapFilesDescribingShapestheImagema" >.map Files-Describing Shapes the Imagemap Way</A>
</UL>
<LI><A HREF="#ClientSideImagemapsandMagicMIMETyp" >Client-Side Imagemaps and Magic MIME Types</A>
<UL>
<LI><A HREF="#ClientSideImagemaps" >Client-Side Imagemaps</A>
<LI><A HREF="#ThemapMagicMIMEType" >The .map Magic MIME Type</A>
</UL>
<LI><A HREF="#TakeaWalkontheServerSideDevelopin" >Take a Walk on the Server-Side-Developing Imagemap Code</A>
<LI><A HREF="#CreativeImagemapProgrammingBreakingt" >Creative Imagemap Programming-Breaking the Paradigm with Glorglox</A>
<LI><A HREF="#ImagebuttonsTheEndofImagemapsIsNig" >Imagebuttons-The End of Imagemaps Is Nigh</A>
<UL>
<LI><A HREF="#TheHTMLSideofImagebuttons" >The HTML Side of Imagebuttons</A>
<LI><A HREF="#ButWhatDoesItAllMean" >But What Does It All Mean?</A>
</UL>
<LI><A HREF="#Summary" >Summary</A>
</UL>
<HR>
<P>
Imagemaps have been a commonly found CGI feature on the World
Wide Web for years now-and with good reason. They allow Web designers
to create a powerful and attractive hyperlinking user interface.
Unfortunately, the very success of imagemaps has lead to stagnation
in their development as CGIs. This chapter shows that this does
not have to be the case.
<H2><A NAME="ImagemapsMythMetaphorandMeaning"><FONT SIZE=5 COLOR=#FF0000>Imagemaps-Myth,
Metaphor, and Meaning</FONT></A></H2>
<P>
One of my earliest memories of the World Wide Web is of an imagemap
a friend of mine put together. This was back in late 1993 when
I really didn't see the point behind the Web, and <I>aich-tee-tee-pee</I>
(HTTP) meant nothing to me. By virtue of adequate hardware and
abundant time, graduate students at the University of Western
Ontario Astronomy Department started experimenting with CGI programming-hey,
this was recreation! So much nicer than coding Runge-Kutta solvers
and Simplex Minimization routines.
<P>
My friend Marc grabbed a GIF image of a bunch of Matt Groening
cartoon characters-Akbar and Jeff, Binky the Rabbit, and so on-and
if you clicked on a character, the system would go to a shell,
finger the "appropriate" person in the department, and
return the finger status to the Web. Marc was kind enough to revive
this many-year-old page for the sake of this book (see Figure
12.1). Thanks, Marc!
<P>
<A HREF="f12-1.gif" ><B>Figure 12.1: </B><I>The "Web finger" imagemap</I>.</A>
<P>
In its day, this was state-of-the-art CGI programming. (Please
forgive us, but forms weren't widely used back then.) I was mystified
by it and mentioned this "Web finger" to a friend of
mine at the University of Toronto. He was so impressed that he
posted its URL to Usenet and as a result, the Astro department
server stats shot through the roof for the next few weeks. (This
UofT friend later went on to become a part of Damien Doligez's
Netscape SSL-cracking team-I knew Netscape was cracked two months
before Netscape did!)
<P>
This small story took place three years ago. Now, I want to ask
you a question: When was the last time you saw an imagemap that
did something remotely as complicated as finger someone? That's
my point-it doesn't happen! Imagemap programming has come to the
doldrums of click-on-a-shape-and-we'll-put-you-on-a-new-page period.
<P>
But why is that? My guess is because imagemaps have become so
commonplace and so uniform and so standardized that Web developers
just don't think of all the other possibilities that imagemaps
can hold. In my own small way, I hope to change that view here.
<P>
<CENTER><TABLE BORDERCOLOR=#000000 BORDER=1 WIDTH=80%>
<TR><TD><B>Note</B></TD></TR>
<TR><TD>
<BLOCKQUOTE>
You can see many of the principles I discuss in this chapter in action by going to the following URL:</BLOCKQUOTE>
<BLOCKQUOTE>
<TT><FONT FACE="Courier"><A HREF="http://www.anadas.com/cgiunleashed/imagemaps/">http://www.anadas.com/cgiunleashed/imagemaps/</A></FONT></TT>
</BLOCKQUOTE>
</TD></TR>
</TABLE></CENTER>
<H2><A NAME="AnatomyofanImagePixelsandCoordinat"><FONT SIZE=5 COLOR=#FF0000>Anatomy
of an Image-Pixels and Coordinates</FONT></A></H2>
<P>
Imagemaps allow locations on images to be determined and dealt
with through the CGI. So, before we talk about imagemaps, it seems
wise to learn something about computer image measurement systems.
<P>
Just about any image you'll find on the World Wide Web will be
described by <I>pixels</I> and <I>coordinates</I>. Pixels, a distorted
contraction of "Picture Elements," are colored squares
of light that appear on your monitor. If ever you hear that a
monitor's video mode is 1024<FONT FACE="Symbol">¥</FONT>768<FONT FACE="Symbol">¥</FONT>256,
then that means the monitor is displaying 1024 pixels in the horizontal,
768 in the vertical, and that each pixel can assume one of 256
colors. Occasionally, you might hear that last designation referred
to as some number of bits. 8-bit color is the same as 256 colors,
while 16-bit color is 65,536 colors, and 24-bit color is the same
as 16,777,216 colors. The connection between "bit color"
and "colors" is that 2 raised to the power of the bit
number equals the number of colors displayable.
<P>
<CENTER><TABLE BORDERCOLOR=#000000 BORDER=1 WIDTH=80%>
<TR><TD><B>Note</B></TD></TR>
<TR><TD>
<BLOCKQUOTE>
Have you ever wondered why your video card might not be capable of certain video modes? Consider this: A full screen at 1024<FONT FACE="Symbol">¥</FONT>768<FONT FACE="Symbol">¥</FONT>24-bit resolution will require 18,874,368 bits of memory on
your video card. This is equal to 2,359,296 bytes. If you have only 1 megabyte of video memory on your video card, you simply don't have enough memory for your video card to "remember" what it's supposed to display on your screen.
</BLOCKQUOTE>
</TD></TR>
</TABLE></CENTER>
<P>
<P>
Each pixel can be referenced by an ordered pair coordinate (see
Figure 12.2). The top-leftmost pixel on the screen is pixel (x=0,y=0).
The bottom rightmost pixel is pixel (x=x<FONT SIZE=1>max</FONT>-1,y=y<FONT SIZE=1>max</FONT>-1),
where x<FONT SIZE=1>max </FONT>and y<FONT SIZE=1>max</FONT> are
the numbers stated when describing the video mode.
<P>
<A HREF="f12-2.gif" ><B>Figure 12.2:</B> <I>A friendly diagram showing how pixels are mapped onto a rectangular image.</I></A>.
<P>
<CENTER><TABLE BORDERCOLOR=#000000 BORDER=1 WIDTH=80%>
<TR><TD><B>Caution</B></TD></TR>
<TR><TD>
<BLOCKQUOTE>
In mathematics, x is the variable traditionally used to measure horizontal displacement from some reference point, while y is used to measure vertical displacement. With computer images, the same holds true. In mathematics, x increases towards the right,
and y increases going up the page. In computer images, x increases in the same direction, but y increases going down. Watch out for this!</BLOCKQUOTE>
</TD></TR>
</TABLE></CENTER>
<P>
<P>
A completely analogous system is used to describe any image, only
x<FONT SIZE=1>max</FONT> and y<FONT SIZE=1>max</FONT> don't have
any predefined restrictions placed upon them. Also, the top-left
(0,0) corner is defined relative to the image and not the screen.
<P>
<CENTER><TABLE BORDERCOLOR=#000000 BORDER=1>
<TR><TD>Caution</TD></TR>
<TR><TD>As with so many other areas in computer science, the index of pixels within an image starts at zero, not one. So, if you have an image that is 100 pixels wide, its x coordinate will run between 0 and 99; likewise for its y coordinate. Be aware of
this when planning out your map files and any programs that might process them.
</TD></TR>
</TABLE></CENTER>
<P>
<H2><A NAME="HTMLISMAPandQUERY_STRINGPassingIm"><FONT SIZE=5 COLOR=#FF0000>HTML,
</FONT><TT><FONT SIZE=5 COLOR=#FF0000 FACE="Courier">ISMAP</FONT></TT><FONT SIZE=5 COLOR=#FF0000>,
and </FONT><TT><FONT SIZE=5 COLOR=#FF0000 FACE="Courier">QUERY_STRING</FONT></TT><FONT SIZE=5 COLOR=#FF0000> -
Passing Imagemap Information to a CGI Program</FONT></A><BR>
</H2>
<P>
<A NAME="OLE_LINK1">Passing Imagemap Information to a</A><BR>
<P>
This far into your CGI programming experience, I'm sure you've
encountered the <TT><FONT FACE="Courier">GET</FONT></TT> and <TT><FONT FACE="Courier">POST</FONT></TT>
methods of passing information from the Web browser to the Web
server and CGI program. These two techniques take name/value pairs
created within a form and encode this information in a standardized
fashion. The CGI program on the server is then responsible for
decoding the provided string and reclaiming the name/value pairs.
<P>
The preceding is all true, but it's a very form-centric way of
looking at things. The <TT><FONT FACE="Courier">GET</FONT></TT>
and <TT><FONT FACE="Courier">POST</FONT></TT> methods aren't the
most basic way to look at the problem of getting information from
browser to server. Underlying these methods are <TT><FONT FACE="Courier">STDIN</FONT></TT>
and <TT><FONT FACE="Courier">QUERY_STRING</FONT></TT>: The <TT><FONT FACE="Courier">GET</FONT></TT>
method places its encoded name/value string and places it in the
<TT><FONT FACE="Courier">QUERY_STRING</FONT></TT>, while <TT><FONT FACE="Courier">POST</FONT></TT>
places its encoded string within <TT><FONT FACE="Courier">STDIN</FONT></TT>.
However, <TT><FONT FACE="Courier">GET</FONT></TT> doesn't have
a monopoly on the use of <TT><FONT FACE="Courier">QUERY_STRING</FONT></TT>.
Because imagemaps, too, rely on <TT><FONT FACE="Courier">QUERY_STRING</FONT></TT>,
I'll restrict my discussion to it from now on.
<P>
Consider the following mock URL:
<BLOCKQUOTE>
<TT><FONT FACE="Courier">http://www.anyfirm.com/cgi-bin/getrichquick.cgi</FONT></TT>
</BLOCKQUOTE>
<P>
It obviously invokes a CGI program. This fairly straightforward
URL can be made more complex. If we were to append a <TT><FONT FACE="Courier">?</FONT></TT>
to the end of the line, we could continue onward with more text:
<BLOCKQUOTE>
<TT><FONT FACE="Courier">http://www.anyfirm.com/cgi-bin/getrichquick.cgi?on_your_back</FONT></TT>
</BLOCKQUOTE>
<P>
In a URL, <TT><FONT FACE="Courier">?</FONT></TT> is a reserved
character. Anything following it becomes the <TT><FONT FACE="Courier">QUERY_STRING</FONT></TT>.
The <TT><FONT FACE="Courier">QUERY_STRING</FONT></TT> can be read
by a CGI program and used within that program to do whatever a
program might do with string data. For instance, it could be parsed
and used as data within mathematical calculations:
<BLOCKQUOTE>
<TT><FONT FACE="Courier">http://www.math.org/cgi-bin/whatis?6_times_9
<BR>
</FONT></TT>
</BLOCKQUOTE>
<P>
<CENTER><TABLE BORDERCOLOR=#000000 BORDER=1 WIDTH=80%>
<TR><TD><B>Note</B></TD></TR>
<TR><TD>
<BLOCKQUOTE>
In a rare show of short-sightedness, HTML has imposed a limit of 1,024 characters on the length of a URL. This includes its <TT><FONT FACE="Courier">QUERY_STRING</FONT></TT> and its <TT><FONT FACE="Courier">PATH_INFO</FONT></TT>. Even then, there is no
guarantee that any given Web browser can handle a URL of that length. For this reason, many forms that have to pass halfway decent amounts of information to a CGI program will use <TT><FONT FACE="Courier">POST</FONT></TT> rather than <TT><FONT
FACE="Courier">GET</FONT></TT>, even though <TT><FONT FACE="Courier">GET</FONT></TT> is the "preferred" method.
</BLOCKQUOTE>
</TD></TR>
</TABLE></CENTER>
<P>
<P>
<TT><FONT FACE="Courier">QUERY_STRING</FONT></TT> information
is extracted by a CGI program in a number of different ways. In
UNIX, the most common is through environment variables. Within
a Borne shell script, you can reference it as in this example:
<BLOCKQUOTE>
<TT><FONT FACE="Courier">#!/bin/sh<BR>
echo Content-type: text/html<BR>
echo ""<BR>
echo Your query string was:<BR>
echo $QUERY_STRING</FONT></TT>
</BLOCKQUOTE>
<P>
In Perl, this same mini-program would be written as the following:
<BLOCKQUOTE>
<TT><FONT FACE="Courier">#!/usr/bin/perl<BR>
print "Content-type: text/html\n\n";<BR>
print "Your query string was: $ENV{QUERY_STRING}\n";
<BR>
exit 0;</FONT></TT>
</BLOCKQUOTE>
<P>
The <TT><FONT FACE="Courier">QUERY_STRING</FONT></TT> is the heart
and soul of imagemaps. A Web browser will generate a <TT><FONT FACE="Courier">QUERY_STRING</FONT></TT>
appropriate to the x,y value of a mouse-click upon an image when
the following HTML is used:
<BLOCKQUOTE>
<TT><FONT FACE="Courier"><A HREF=URL><IMG SRC=image_URL
ISMAP></A></FONT></TT>
</BLOCKQUOTE>
<P>
Note that it takes a combination of both the <TT><FONT FACE="Courier">ISMAP</FONT></TT>
attribute within the <TT><FONT FACE="Courier"><IMG></FONT></TT>
tag and the presence of an <TT><FONT FACE="Courier"><A HREF></FONT></TT>
statement for x,y <TT><FONT FACE="Courier">QUERY_STRING</FONT></TT>
information to be produced.
<P>
To use a slightly less generic example, let's say I had an image
file called mercator.gif that had dimensions of 600<FONT FACE="Symbol">¥</FONT>300
pixels. I place my mouse pointer somewhere around Toronto, which
might be located at 200,90. I want this information to be processed
by a CGI program called imagemap.cgi. Some possible HTML that
could be written to accomplish all this is
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -