Using Server-Side Image Maps

Image maps allow you to create images with clickable hotspots that link to other pages of your web site.

Although server-side image maps are still supported, most users prefer to use client-side image maps, which are easier to implement and provide greater functionality. Information about client-side image maps can be found on the HTML Help web site.

Image Map Development Overview

In order to create image maps you need three components:

1. An image (preferably in .gif format) to use for your image map. This is not covered in this guide. You can either use an existing image, or create your own image using a graphics package, such as Adobe Photoshop.
2. A map file that defines the areas of the image that are "hotspots". This is explained below.
3. An HTML document with the correct code for calling the map file and associated image. This is also explained below.

Creating an Image Map

This guide assumes that you have already created (or have available) a .gif file to use as the clickable image. You also need MapEdit, Map This!, or other image mapping utility.

The following instructions relate to MapEdit. While other mapping utilities vary, they all have the same basic function:

1. Open MapEdit and create a new map. Enter the name of the .gif image and the provide a name for the new image map file. This should be an NCSA-type image map.
    
2. Your .gif image will then be loaded. Use the menu tools to select a shape for your first hotspot. You can use circles, rectangles, or polygons:
    
   • Use the circle tool to draw circular hotspot shapes. Once you have finished drawing, right-click and enter a URL to apply to the hotspot.
     
     Important: Mapping will not work with relative URLs, so make sure you enter absolute URLs (i.e. http://www.yourname.com/yourpage.html).
      
   • Use the rectangle tool to draw rectangular hotspot shapes. Once you have finished drawing, right-click and enter the URL to apply to the hotspot.
      
   • Use the polygon tool to draw irregular hotspot shapes. Click to begin drawing, then again at each point of the polygon. Once you have finished drawing, right-click and enter the URL to apply to the hotspot.
     
     Note: Should any of your hotspots overlap, the link that takes priority will be determined by the order in which you define your hotspots.
3. Select "Edit Default URL" from the "File" menu and enter a default URL for your image. This will be used if the user clicks on an area of your image that was not mapped.
    
4. Save your image map file -- it should appear similar to this:
   
   default http://www.yourname.com/page1.html
   rect http://www.yourname.com/page2.html 5,5 120,110
   circle http://www.yourname.com/page3.html 220,136 220,212
   poly http://www.yourname.com/page4.html 345,134 381,16 414,212 311,125

The extension for this file should be ".map". Upload your map file and the .gif image to the same directory on your site.

HTML For Displaying Your Image Map

Make sure you have already uploaded all the pages that you reference in your image map, including the default page. Then enter the following code on the page where you want the image map to be displayed:

<A HREF="myimagemap.map"><IMG SRC="mymappedimage.gif" ISMAP></A>

Remember to replace "myimagemap" and "mymappedimage" with your actual map file and image file names.