Imagemaps allow you to create images with clickable links, or hotspots, which take someone to other pages.
While still supported, server-side imagemaps are now uncommon; most users prefer client-side imagemaps which provide more simplicity and added functionality. See htmlhelp.com for more information about client-side imagemaps.
Imagemap development overview In order to create imagemaps you need to have three components:
1. An image (preferably in gif format). This is not covered in this overview. You can use software packages such as Adobe Photoshop or Corel Draw for this purpose. You can also "borrow" images that you find on the internet.
2. A map file which indicates which parts of the image are hotspots. This is covered below.
3. An HTML document, using regular markups, and the ISMAP keyword associating the image with the imagemap. This is also covered below.
Creating an imagemap file This overview assumes that you have created, or have available, a gif file that you will use as the clickable image. You also need to have access to MapEdit, Map This!, or other free image mapping utility. Check TUCOWS to find these utilities. The following instructions relate to MapEdit. While other mapping utilities may vary, they all have the same basic function:
1. Open Mapedit.
2. Create a new map. You will be asked to enter the name of the gif file and of the corresponding (new) imagemap file. Make sure to note that this is an NCSA-type imagemap.
3. You will see the gif image shown. Use the tools from the pull-down menu to select a shape for your first hotspot. You can use rectangles, circles, or polygons:
• Use the circle if your image has areas of this shape. You usually right-click to end drawing the circle. A dialog will be displayed asking for the URL name for this hotspot. IMPORTANT: use the absolute address (start with http://...) and NOT the relative address. The mapping will not work if you use relative addresses.
• Use the rectangle if, again, your image has areas of this shape. Again, right-click to end, and enter the absolute address (see above) where the hotspot should lead to.
• Use the polygon for all other cases. Left-click to begin and again at each point of the polygon. When you complete marking all points to define the contour of the hotspot right-click, and enter the absolute address (see above) where the hotspot should lead to. Please note that the order you define the hotspots will be the order the server will use to resolve priorities when overlapping "hotspots" occur.
4. Enter a default link location. This is the location used if the user selects an area which was not mapped. You can do this by choosing the File pull-down menu and selecting "Edit default URL."
5. You are almost done. Use the File pull-down menu and save your imagemap file. It should look something like this:
default http://yourdomain.com/default.html rect http://yourdomain.com/square.html 10,10 132,103 circle http://yourdomain.com/circle.html 230,146 230,216 poly http://yourdomain.com/triangle.shtml 340,137 397,15 428,225 340,137
Make sure that your imagemap file ends in ".map". You should upload your map file to your account at Domain Support into the same directory as your image file. HTML for showing imagemaps Before testing your imagemap, it's a good idea to create and upload all possible branching pages, including the default page, defined in your imagemap file. Although this isn't completely necessary, you will not be able to test the function of the imagemap if you do not have the branching pages. Here's how to include an imagemap on you pages:
• Include your images, text, links, formats, etc, as usual.
• Use the following format for specifying the imagemap:
<a href="sample.map"><img src="sample.gif" ismap></A> Replace "sample.map" and "sample.gif" with the files you have created. These addresses can be absolute or relative. The exact sequence is required, as well as the keyword ISMAP.
Copy the files to your web directory. Copy the image, map file, and HTML file into your Domain Support directory, or a subdirectory. Test, and enjoy!