Creating Clickable Images

Summary of Steps

1. If the image you want to use for the clickable image does not exist, create it.
2. Create an imagemap file that maps regions of the image to specific URLs.
3. Place a reference to the image and imagemap file in the HTML file you want to contain the clickable image.

Steps in Detail

1. If the image you want to use for the clickable image does not exist, create it.

2. Create an imagemap file that maps regions of the image to specific URLs.

   Place imagemap records in a file. Each imagemap record maps an area of the image to a URL to service when a web browser user clicks on the defined area.

   You can define circular, polygonal, and rectangular areas and a default URL to service if a web browser user does not click on an area you define. Or, you can define points in an image and the URLs to service when a web browser user clicks closest to a point you define.

3. Place a reference to the image and imagemap file in the HTML file you want to contain the clickable image.

   Use the HTML anchor tag to associate the imagemap with the image you want to map. The following shows the format to use:

                 +--Required elements that
                 |  tell VM:Webgateway that   
                 |  the remaining part    
                 |  of the URL identifies 
                 |  an imagemap file      
                 |                        
                 |                     +--Full
                 |                     |  path
                 |                     |  that
                 |                     |  points
             +--+-----------------+    |  to the
             |                    |    |  imagemap
             |                    |    |   
    <A HREF="/VM:WEBGATEWAY/IMAGEMAP/imagemap">
      <IMG SRC="image" ISMAP></A>
                  |      |                       
                  |      +--Tells the web browser
                  |         this is a mapped image
                  |                        
                  |                        
                  +-- URL that points to   
                      the image 

   Example 1

   The VM user with userid AL wants to map the image ROOM GIF using the imagemap file ROOM MAP. Both files are located in user AL's user page. The ROOM HTML file contains the reference (as described above) to the clickable image. The following URLs identify the files:

   ROOM GIF (image)

   http://www.comp.com/~al/room.gif

   ROOM MAP (imagemap)

   http://www.comp.com/~al/map/room.map

   ROOM HTML (refers to the clickable image)

   http://www.comp.com/~al/room.html

   Include the following in the ROOM HTML file to map the ROOM GIF image with the ROOM MAP imagemap:

   <A HREF="VM:Webgateway/Imagemap/~al/map/room.map"> 
   <IMG SRC="http://www.comp.com/~al/room.gif" 
        ISMAP></A> 

   Because the ROOM GIF and the ROOM HTML files are stored in the same path (http://www.comp.com/~al/), you can use a relative path when specifying the URL for ROOM GIF. In other words, you can leave off the path identifying where the ROOM GIF file is located. You must specify the full path of the imagemap file after VM:Webgateway/Imagemap.

   <A HREF="VM:Webgateway/Imagemap/~al/map/room.map">
<IMG SRC="room.gif" ISMAP></A>

   Example 2

   The server root domain contains the image file GROUP JPG. The VM user with userid AL created the ALGROUP MAP imagemap file to map the GROUP JPG image. The imagemap file is located in user AL's user page. The VM user with userid MOLLY wants to include the GROUP JPG image in her MOLLYPG HTML file and make it a clickable image by using the ALGROUP MAP file in user AL's user page. The following URLs identify the files:

   GROUP JPG (image)

   http://www.comp.com/images/group.jpg

   ALGROUP MAP (imagemap)

   http://www.comp.com/~al/algroup.map

   MOLLYPG HTML (refers to the clickable image)

   http://www.comp.com/~molly/mollypg.html

   Include the following in the MOLLYPG HTML file to map the GROUP JPG image with the ALGROUP MAP imagemap:

   <A HREF="VM:Webgateway/Imagemap/~al/algroup.map"> 
   <IMG SRC="http://www.comp.com/images/group.jpg" 
        ISMAP><A>