📄 ch6.htm
字号:
<P>
There are also the many users who search the Web with the graphics
option on their browsers turned off to save time. It is important
to remember this when designing a page with an image map so that
you also include alternatives for these users. You can include
this script, bi_modal.pl, which will screen the user's browser,
and return either the image map page, or a nonimage alternative.
<BLOCKQUOTE>
<PRE>
#!/usr/bin/perl
# bi_modal.pl
print "Content-type: text/html\n\n";
# decide if the browser is text or graphics
if ( $ENV{HTTP_USER_AGENT} =~ /Lynx|LineMode|W3/i ) {
print <<EOG; # this is the non-image page
<HTML><HEAD><TITLE>Page Title</TITLE></HEAD>
<BODY><H2>Choices - Text Version</H2>
<A HREF="http://my_server.com/choice1.htm">
Choice One</A>
<A HREF="http://my_server.com/choice2.htm">
Choice Two</A>
<A HREF="http://my_server.com/choice3.htm">
Choice Three</A>
<BR><H></BODY></HTML>
EOG
}
else {
print <<EOI; # this is the image map page
<HTML><HEAD><TITLE>Page Title</TITLE></HEAD>
<BODY><H2>Choices - Image Map Version</H2>
<A HREF="http://my_server.com/choice.map">
<IMG src="http://my_server.com/choice.gif></A>
<BR><H></BODY></HTML>
EOI
}
exit;
</PRE>
</BLOCKQUOTE>
<P>
where the text choices are found in the files choice1.html, choice2.html,
and choice3.html. The file choice.map is the map file, and choice.gif
is the graphics file that is being used as the image map. These
different file types are explained in depth later in this chapter.
<P>
The actual Perl scripts that are used with image maps are too
advanced for the scope of this book, but most HTTP servers come
with a Perl script that handles image maps.
<P>
Normally, what happens in an image map is that you make an
<BLOCKQUOTE>
<PRE>
<A HREF="pic-name.map"><IMG SRC="picture.gif" ISMAP></a>
</PRE>
</BLOCKQUOTE>
<P>
and the server will check the "pic-name.map" file for
the coordinates corresponding to each document, like so
<BLOCKQUOTE>
<PRE>
RECT 4ØØ,3ØØ 5ØØ,35Ø newpage.html
CIRCLE 2ØØ,1ØØ,5Ø anotherpage.html
</PRE>
</BLOCKQUOTE>
<P>
There is usually space for polygons as well. The server would
normally do all of this work. There is, however, another way.
If you make a form using
<BLOCKQUOTE>
<PRE>
<FORM METHOD=POST
ACTION="http://www.my_server.com/cgi-bin/script.pl>
</PRE>
</BLOCKQUOTE>
<P>
You can enter a line like so:
<BLOCKQUOTE>
<PRE>
<INPUT TYPE="IMAGE" NAME="picture.html" IMG
SRC="http://www.yourserver.com/picture.gif" BORDER="Ø" HEIGHT=5Ø WIDTH=155>
</PRE>
</BLOCKQUOTE>
<P>
If the picture is selected, it will be passed as form data to
the CGI program in the form of picture.html.<I>x</I>=500 picture.html.<I>y</I>=200,
where 500 and 200 are the clicked <I>x </I>and <I>y</I> coordinates,
respectively. The CGI program then has to handle the <I>x</I>
and <I>y</I> material, check the map file, and figure out the
coordinate information.
<H3><A NAME="TheThreeStepstoDefininganImageMap">
The Three Steps to Defining an Image Map</A></H3>
<P>
There are three basic steps that each image map has to go through
to be completely functional. The first is to create a graphic
that will be used for the image map. The second is to write a
file that will store the destinations of the "hot spots"
specified in the image map. Finally, in the third step, you must
make sure there is a reference to this file in your HTML document.
<P>
A quick overview of these steps will give you the gist of what
you need to know. Then we can examine each area in greater depth.
<H4>How to Create an Image Map</H4>
<P>
The first step in defining an image map is to select an appropriate
graphic to use as your image. The best graphics are those that
are easy to understand, small in file size (meaning they will
load quickly) and have well-defined areas from which the user
can choose.
<P>
If the graphic you want to use is not divided in an obvious way,
then you should alter it so that these borders are readily apparent
to the user. In these separate areas you will be selecting the
area that will have the link, called a "hot spot." These
hot spots are pixels that have been specified to have an URL,
which is called the same way as an HTML link can call an URL.
<H4>Writing a Map File</H4>
<P>
Once the image is designed and divided, you have to create a map
file of the different destinations of the image map's hot spots.
In this file, you designate the hot spots' locations and what
shape these areas will have under the image map. The standard
format for a map file is as follows:
<BLOCKQUOTE>
<PRE>
default default-URL
rect URL UL-corner LR-corner
poly URL POINT1 POINT2 POINT3
circle URL CENTER EDGE-POINT
</PRE>
</BLOCKQUOTE>
<P>
where the default-URL is the location of the default file if the
user selects an area of the active image map that does not have
a specified destination. The commands stand for the different
shapes: rect means a rectangle, poly means a polygon, and circle
means a circle. The commands after the shape operators define
the area of that shape. If two areas overlap, then the first area
defined will be the one to which the image map link responds.
<P>
Each server has its own shape designations, so check your documentation
carefully when you are writing your image map file.
<H4>Referencing the Image Map File</H4>
<P>
The final phase of image map design requires you to reference
your image map in the HTML document displaying the image map.
This is done by using an HTML tag that identifies the image map
file location, and has this general format:
<BLOCKQUOTE>
<PRE>
<A HREF="http://my_server.com/cgi-bin/image.map">
<IMG SRC="image_map.gif" ISMAP></A>
</PRE>
</BLOCKQUOTE>
<P>
where an <A HREF> tag with the map file location is associated
with an <IMG> tag of the image map itself. Different servers
have different requirements for how this information should be
sent, so be sure to read your HTTP server's documentation.
<H4>A Sample Image Map</H4>
<P>
To solidify a basic understanding of the image map process before
you move into the related Perl scripts, this example will illustrate
the steps you've just covered.
<P>
The image you are going to use is shown in Figure 6.6. It is a
simple map of three crests.
<P>
<A HREF="f6-6.gif" tppabs="http://210.32.137.15/ebook/PC%20Magazine%20Programming%20Perl%205.0%20CGI%20Web%20Pages%20for%20Microsoft%20Windows%20NT/f6-6.gif"><B>Figure 6.6 :</B> <I>An image of three crests for an image map</I>.</A>
<P>
The shape underneath each of the crests is a rectangle, and the
pixel locations for the upper-left and lower-right corners to
define are 33,69/137,197 for the first crest, 175,69/279,197 for
the second, and 309,69/419,197 for the third.
<P>
This HTML document is from a medieval Web game that uses these
pixel coordinates to link the map definition to the image and
its assigned links.
<BLOCKQUOTE>
<PRE>
<HTML>
<HEAD>
<TITLE>
Choose Your Army
</TITLE>
</HEAD>
<BODY>
<H2>
Choose your army!
</H2>
<A HREF="http://www.my_server/cgi-bin/game/crests.map">
<IMG src="http://www.my_server/game/crests.gif" ISMAP></A>
<P>
<HR>
</BODY>
</HTML>
</PRE>
</BLOCKQUOTE>
<P>
where the <A HREF> address is the location of the map file
and the <IMG> address in the location of the image, crests.gif,
is used as the map.
<P>
There is a call in the <A HREF> tag to the file crests.map,
which is the image map file defining the various links.
<BLOCKQUOTE>
<PRE>
# crests.map
default http://www.my_server.com/cgi-bin/game/armies.html
rect http://www.my_server.com/cgi-bin/game/army_one.html 33,69 137,197
rect http://www.my_server.com/cgi-bin/game/army_two.html 175,69 279,197
rect http://www.my_server.com/cgi-bin/game/army_three.html 3Ø9,69 419,197
</PRE>
</BLOCKQUOTE>
<P>
When this HTML file is called up with the associated map file,
you get something like the figure shown in Figure 6.7.
<P>
<A HREF="f6-7.gif" tppabs="http://210.32.137.15/ebook/PC%20Magazine%20Programming%20Perl%205.0%20CGI%20Web%20Pages%20for%20Microsoft%20Windows%20NT/f6-7.gif"><B>Figure 6.7 :</B> <I>A sample image map</I>.</A>
<P>
So, now that you've made a brief pass over the different facets
of the image map, let's review them in greater depth.
<H3><A NAME="DividinganImageMap">
Dividing an Image Map</A></H3>
<P>
To demonstrate dividing up an image we'll use the graphic in Figure
6.8. Using an actual map is a good example to work with, because
the original borders create ready-made sections. This is a map
of Canada, which is divided into the various regions, or provinces,
that make up the country. With this map the user can select a
province and get more information about that area.
<P>
<A HREF="f6-8.gif" tppabs="http://210.32.137.15/ebook/PC%20Magazine%20Programming%20Perl%205.0%20CGI%20Web%20Pages%20for%20Microsoft%20Windows%20NT/f6-8.gif"><B>Figure 6.8 :</B> <I>A map of Canada</I>.</A>
<H3><A NAME="TheCGIImageMapMethods">
The CGI Image Map Methods</A></H3>
<P>
There are several ways to send the image map coordinates to the
CGI. Each of these ways has its merits, but the method you choose
will be based on what your https require.
<P>
After the graphic, or image, is clearly divided, the hot spots
must be defined. This is done by selecting the <I>x</I> and <I>y</I>
coordinates for each hot spot. Once the hot spots are defined,
you only have to test the image map before you add it to your
Web page.
<P>
Once you have an appropriate graphic for your image map you have
to determine the size of your image. The important size when dealing
with image maps is not the memory size, but the pixel size. This
example is 560 pixels by 480 pixels. Pixels are always measured
from the upper-left and lower-right of the screen. The uppermost
pixel location has an <I>x</I> location of 0 and a <I>y</I> location
of 0, which is written in pixel coordinate notation like this:
0,0. The <I>x </I>coordinate increases going from left to right
on the image and the <I>y</I> coordinate increases going from
top to bottom. A hot spot that was located 300 pixels to the left
and 250 pixels down would have the <I>x</I>,<I>y </I>coordinates
of 300,250.
<P>
An easy way to determine the location of a pixel for a hot spot
is to use a graphics viewer. Viewing the image you have selected
for your image map, the cursor will pass over the hot spot and
display the <I>x</I> and <I>y</I> coordinates. You also can use
this Perl script to produce an HTML document that will display
the <I>x</I> and <I>y</I> coordinates of an image that is clicked
on with the cursor.
<BLOCKQUOTE>
<PRE>
#!/usr/bin/perl
# imap.pl
push (@INC, "your_directory_location/cgi-bin");
require("CGI-lib.pl");
&parse(*location);
print &header;
print "<HTML><HEAD><TITLE>\n";
print "Finding Hot Spots</HEAD></TITLE>\n";
print "<BODY><H2>/n";
print "Your X & Y Coordinates Are:</H2>\n";
print "<P><HR><P>/n";
print "X Coordinate is $location{'xyhot.x'}<BR>/n";
print "Y Coordinate is $location{'xyhot.y'}<BR>/n";
print "</BODY></HTML>";
</PRE>
</BLOCKQUOTE>
<P>
The result is something like that seen in Figure 6.9.
<P>
<A HREF="f6-9.gif" tppabs="http://210.32.137.15/ebook/PC%20Magazine%20Programming%20Perl%205.0%20CGI%20Web%20Pages%20for%20Microsoft%20Windows%20NT/f6-9.gif"><B>Figure 6.9 :</B> <I>The results of an x,y coordinate search</I>.</A>
<P>
It is important not to limit the size of your image maps the same
way you limit the size of other images on your Web pages. The
image map has to maintain a certain pixel size which can be hindered
if you set an image size for it. If the user's browser cannot
immediately display your entire image map, the user will be able
to scroll around to view the entire map.
<P>
To send these coordinates, the user clicks on the hot spot and
that location is sent to an image map script. Many servers have
a standard image map script that you can use, so, again, be sure
to check your server's documentation. You can also use one of
the many freeware and shareware programs for creating image maps,
like Map Edit and Web Hotspots, both of which are on the CD-ROM
included with this book.
<H2><A NAME="Conclusion"><FONT SIZE=5 COLOR=#FF0000>
Conclusion</FONT></A></H2>
<P>
These programs are all basic to using Perl with the CGI, and use
a basic call and response cycle. The user, either the Web browser
or a human being, makes a call to the Perl script on your server
through the CGI, and the Perl script sends a response, again through
the CGI. Understanding this cycle is very important to the effective
operation of your Perl scripts through the CGI. Although the scripts
in this chapter operate on a single data request, the scripts
in the next chapter often rely on multiple requests for data being
passed from the user to the Perl script, and vice versa.
<HR>
<CENTER><P><A HREF="ch5.htm" tppabs="http://210.32.137.15/ebook/PC%20Magazine%20Programming%20Perl%205.0%20CGI%20Web%20Pages%20for%20Microsoft%20Windows%20NT/ch5.htm"><IMG SRC="PC.GIF" tppabs="http://210.32.137.15/ebook/PC%20Magazine%20Programming%20Perl%205.0%20CGI%20Web%20Pages%20for%20Microsoft%20Windows%20NT/PC.GIF" BORDER=0 HEIGHT=88 WIDTH=140></A>
<A HREF="#CONTENTS"><IMG SRC="CC.GIF" tppabs="http://210.32.137.15/ebook/PC%20Magazine%20Programming%20Perl%205.0%20CGI%20Web%20Pages%20for%20Microsoft%20Windows%20NT/CC.GIF" BORDER=0 HEIGHT=88 WIDTH=140></A>
<A HREF="contents.htm" tppabs="http://210.32.137.15/ebook/PC%20Magazine%20Programming%20Perl%205.0%20CGI%20Web%20Pages%20for%20Microsoft%20Windows%20NT/contents.htm"><IMG SRC="HB.GIF" tppabs="http://210.32.137.15/ebook/PC%20Magazine%20Programming%20Perl%205.0%20CGI%20Web%20Pages%20for%20Microsoft%20Windows%20NT/HB.GIF" BORDER=0 HEIGHT=88 WIDTH=140></A>
<A HREF="ch7.htm" tppabs="http://210.32.137.15/ebook/PC%20Magazine%20Programming%20Perl%205.0%20CGI%20Web%20Pages%20for%20Microsoft%20Windows%20NT/ch7.htm"><IMG SRC="NC.GIF" tppabs="http://210.32.137.15/ebook/PC%20Magazine%20Programming%20Perl%205.0%20CGI%20Web%20Pages%20for%20Microsoft%20Windows%20NT/NC.GIF" BORDER=0 HEIGHT=88 WIDTH=140></A>
<HR WIDTH="100%"></P></CENTER>
</BODY>
</HTML>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -