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
Image Map Development Overview
In order to create image maps you need three components:
- 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.
- A map file that defines the areas of the image that are "hotspots".
This is explained below.
- 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
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:
- 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.
- Your .gif image will then be loaded. Use the menu tools to select a shape for your first hotspot. You can use
- Use the circle tool to draw circular hotspot shapes. Once you
have finished drawing, right-click and enter a URL to apply to the
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
Note: Should any of your hotspots overlap, the link that
takes priority will be determined by the order in which you define
- 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.
- Save your image map file -- it should appear similar to this:
http://www.yourname.com/page2.html 5,5 120,110
http://www.yourname.com/page3.html 220,136 220,212
http://www.yourname.com/page4.html 345,134 381,16 414,212
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
<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.