CGI and Perl

Creating the Map

Now that you have an image, you can map out the locations of your image in pixels. Pixel areas can be defined as rectangles, circles, polygons, and points. The coordinate system originates at the top-left corner of the image. If you do not cover all areas of your image in the map, you can set a default URL value for those pixels not covered. The following example shows a map for an image.

rect http://vader/sales.html 167,32 262,155
 rect http://vader/service.html 16,14 40160,68
 circle http://vader/support.html 215,215 , 215, 175
 poly http://vader/training.html 25, 130, 100, 80, 160, 140, 105, 195poly http://vader/software.html 20, 285, 90, 200, 160, 285

To set up your image map, use the following HTML code:

<A HREF="http://vader/imagemaps/splash_map.map">
 <IMG SRC=/images/splash_map.gif ISMAP>
 </A>

This method of referring to an image map with the <HREF> tag does not work with all Web servers. You should make sure your Web server supports this before attempting to use it.

You also can display an image from your CGI script and query the pixel coordinate that has been clicked by the user. Listing 7.7 shows how to do this, using CGI::Form. Figure 7.4 shows how the image map appears in the browser.

Listing 7.7. Clickable image CGI example.

#!/public/bin/perl5
 use CGI::Form;
 use CGI::ImageMap qw(action_map map_untaint);
 $q = new CGI::Form;
 print $q->header;
 print $q->start_html("Clickable Map Demonstration");
 print "<H1>Clickable Map Demonstration</H1>\n";
 print $q->startform;
 print $q->image_button(`picture', "/images/cool_image.gif");
 print $q->endform;
 print "<HR>\n";
 if ($q->param) {
    ($x,$y) = ($q->param(`picture.x'),$q->param(`picture.y'));
    print "<P>The user clicked location <EM>($x,$y)</EM>\n";
    my $map = $q->param( `splash_map.map' );
    $action = action_map($x,$y,@map);
    print "<P>The corresponding action is <EM>$action</EM>\n";
 }
 print $q->end_html;

Image map in the browser

Figure 7.4. The image map as it appears in the browser.

This returns the coordinate clicked by the user. You can imagine the possibilities of visual navigation using clickable maps. The more visual your page is, the easier it should be for the average user to navigate through it. You can also sometimes cross language barriers with this approach. The limitation today, of course, is the bandwidth at which images are transferred through the wire. Given the advances in network technology, this problem should soon be alleviated.

Review

Clickable maps are a great way to present a friendly navigation model. However, you have to be considerate of the average user when creating your images. Even though you might have a 100Mbs network running at your location, you should keep in mind that most users today are accessing your page at a rate of 28.8Kbs; thus, the larger the image, the more frustrating your page may be. When ISDN or cable modems become the standard means of connection, you will have more freedom and flexibility when it comes to image size.

Text File Search

The earlier example of the hit counter showed you how to scan a single file for occurrences of a string. This text file search example shows you how to scan your entire Web site for occurrences of a string. You may have visited the popular Web search sites available, such as Yahoo!, Excite, Lycos, and InfoSeek. These search engines work with large amounts of indexed data from Web sites around the world. In some cases, these search engines are implemented in Perl. As you have already seen in previous chapters, Perl is a perfect language for text manipulation and searching. It is very efficient in processing files, which, combined with its powerful regular expression capability, make it a perfect language for this type of work.