[Previous] [Contents] [Next]


Image Maps

Image maps allow users to interact with the page by selecting a part of the image to navigate to another page or a location within the same page. Image maps are simply files that contain a list of area shapes on an image and their corresponding URLs. When a pixel on the image is clicked, the URL associated with the area containing that pixel is returned. The Perl package CGI::Imagemap is available for creating image maps within your Perl5 CGI script. The following are the possible pixel area groupings:

  • circle--Defines a circle of points given a center and edge point.
  • rect--Defines a rectangle of points given the upper-left and lower-right points.
  • point--Defines a single point.
  • poly--Defines a polygon of points given n number of points.
  • default--Defines the default action if the point matches none of the existing criteria.

This image map is stored on your Web server and is referred to using a standard URL. Following is an example of a simple image map file:

circle food.html 10,10 15,15

 rect entertainment.html 20,20 30,0

 rect sports.html 50,20 60,0

You can use this image map together with the <A> and <IMG> HTML tags. In the following example, I will assume that the preceding map is stored in the file maps/menu.map and that it corresponds to an image called my_menu.gif.

<A HREF="maps/menu.map">

 <IMG SRC=my_menu.gif ISMAP></A>

To use this image map along with an image in your form, use the CGI::Imagemap module. Using CGI::Form, create an image_button; for example,

print $q->image_button( -name=>'menu', -src=>'images/my_menu.gif',

                         -align=>'MIDDLE' );

Then, assume this image map is stored in the file maps/menu.map on your server. You can now associate the image map with the image using the following code:

use CGI::Imagemap;

 use CGI::Form;



 $q = new CGI::Form;

 $x = $q->param( `menu.x' );

 $y = $q->param( `menu.y' );

 $map = $q->param( `maps/menu.map' );

 $action = action_map( $x, $y, $map );

[Previous] [Contents] [Next]