Image Map Basics

 

Introduction.  Image maps are something you have almost surely used on the web, though you may not be familiar with how to develop them.  For example, when you click on a state on a map and it connects you to another page based on the image rather than a link with words you are likely making use of an image map or hotspot.

In this page we will develop a simple image map.  Consider the following image called MontyPython.gif.

 

 

This is actually an image of the words Monty Python rather than text.  It was developed with a transparent background and converted into gif format.

There are several ways to create a hotspot or image map.  One of the easiest involves using FrontPage.  This following image should help in developing some insight into how they can be created.

 

 

The developer should 
  1. insert the image into a page in FrontPage
  2. select the image so that the image editor toolbar appears
  3. select the rectangular hotspot tool (next to the pointer)
  4. use it to draw a rectangle around the region you want as a hotspot/image map
  5. insert the link in the dialog window that appears

 

 

The code associated with this page follows and should be called MontyPythonImageMap.html.

 

<html>

<head>
<title>Monty Python Image Map</title>
</head>

<body bgcolor="#CC99FF" link="#000066" vlink="#000066">

<p align="center">&nbsp;</p>
<p align="center">&nbsp;&nbsp; 

<map name="MPIMap">
<area href="http://www.montypython.net/" shape="rect" coords="45, 45, 340, 96"></map>
<img border="0" src="images/MontyPython.gif" width="397" height="141" usemap="#MPIMap"></p>

</body>

</html>

 

Notice where the image map is named and started and completed.  The
  • href gives the link
  • the shape is a rectangle
  • the coordinates are relative to the upper left corner of the image