An image map is one of the best ways to build interactivity into your Web page. With mapped graphics, you can reach various Web sites by clicking on different spots in an image. Also, an image map is widely used to create a visual display for navigating your site. To perform its magic, an image map needs to coordinate two sets of information:

1. what areas of the image map graphic are hotspots
2. what URL to link to when the user clicks within one particular hotspot The key that links the information together is a "map" text file that lists coordinates of the areas in the image map that are "hotspots", and what URLs to link to.

   There are two types of image maps: server-side and client-side. Since most graphical browsers support server-side image maps, they have become the de facto standard on the Web. Server-side image maps reply on a Web server to interpret each click and serve up the appropriate HTML file, making them a little slower than client-side image maps.

   Server-Side Image Maps

   There are several steps you need to take when creating a server-side image map:
   1. Get an image and decide where to put the hotspots (the areas that trigger links)
      • The graphic needs to be in GIF format for widest portability
        

   2. Map the hotspots in a map file

      • Use any text editor to create a map file
      • Each line of the image map file may contain a definition of a single rectangle-shaped region and a corresponding URL
      • The regions are defined by (x,y) coordinates within your image
      • Rectangles, circles and polygons are the primary shapes that can be defined in map files, although some servers will also support ovals
      • Include a default URL to specify a URL for non-defined regions of the image map
      • Save the map file with ".map" extension. Example: button.map
      • Consider using a utility like WebMap for Macintosh or MapEdit for Unix or Windows to help you define the hotspots
        
        

      The MAP file is simply a text file that contains a set of coordinates and URLs. Here is the general format for the MAP text file:

      method url coord1 coord2 ... coordn

      coord are each coordinates, format x,y. The method is one of the following:
      

      • default For the default Url. Coordinates: none
        
      • circle For a circle. Coordinates: center edgepoint
      • poly For a polygon of at most 100 vertices. Each coordinate is a vertex.
      • rect For a rectangle. Coordinates: upper-left lower-right
        
        

      Here is an example of the map file on my Web site:

      default yuenlink.htm
      rect asia.htm 17,22 68,78
      rect computer.htm 162, 21 222, 79
      rect educ.htm 235, 22 296, 79
      rect edtech.htm 306, 22 376, 82
      rect schools.htm 239, 163 295, 227
      rect weather.htm 310, 163 374, 228
      rect www.htm 389, 165 447, 228
      rect astro.htm 88, 23 146, 79
      

   3. Reference the image map in your HTML document

      Here is an example of HTML codes that I used on my page to link to the image map:

      <a href="http://dragon.ep.usm.edu/cgi-bin/imagemap/~yuen/button.map"><IMG SRC="http://dragon.ep.usm.edu/~yuen/coolmap.gif" border=0 ISMAP ></a>

      There are three important points here:

      • <a href> points to the server-side image map file, which in turns targets multiple URLs based on region
      • The /cgi-bin/imagemap/ is a program my Dragon server uses to interpret image maps which I put it (button.map) in my Web directory
      • The ISMAP keyword within the <IMG> tag alerts the Web browser that the image has a corresponding map on the server
        
        
   4. upload the map file, image file, and HTML document to your Web site

   5. Test the image map

   Client-Side Image Maps

   • not as widely supported as server-side image maps
   • more efficient by saving the client's browser extra queries to the server
   • provide the ability to show the exact address of each hot spot as the pointer moves over the image map
   • Can test Web page containing client-side maps by opening them from a local hard drive. To test a server-side map, you must actually upload pages to a Web server and install the CGI application that handles the image map

   It is easy to create a client-side image map if you know how to build a server-side image map. Follow the steps to create a server-side image map and then modify the map file as well as the HTML codes on the Web document.

   • Port the server-side map file into your HTML document and transform it into the following format:

   <map name="banner">
   <area shape="rect" href="asia.htm" coords="17,22 68,78">
   <area shape="rect" href="computer.htm" coords="162, 21 222,79">
   <area shape="rect" href="educ.htm" coords="235, 22 296, 79">
   <area shape="rect" href="edtech.htm" coords="306, 22 376, 82">
   <area shape="rect" href="schools.htm" coords="239, 163 295, 227">
   <area shape="rect" href="weather.htm" coords="310, 163 374, 228">
   <area shape="rect" href="www.htm" coords="389, 165 447, 228">
   <area shape="rect" href="astro.htm" coords="88, 23 146, 79">
   <area shape="default" href="yuenlink.htm">
   </map>
   
   

   The Map tag denotes the beginning of the client-side image map's definition. The Name tag that follows gives the definition a name you'll use when referring to the map in the USEMAP tag.

   Put the map file between </title> and </head>, or between </head> and <body> , or between <body> and </body>.

   • Modify the HTML codes linking to the client-side image map

     <IMG SRC="http://dragon.ep.usm.edu/~yuen/coolmap.gif" USEMAP="#banner" border=0 ISMAP>

     The USEMAP tag tells a client-side-aware browser to use the map definition whose name appears after the pound sign (#).

Additional resurces and tutorials:

Creating a Client-Slide Image Map

Imagemap Authoring Guide and Tutorial Sites

Image Map Tutorials