Defining Image Maps

• There are two types of image maps, Client-side and Server-side.

• Server-side image maps can be created through the use of one of the various shareware programs available to create a map file that can be read by a CGI program on your web server.

• However, since most people do not have the privilege of executing CGI applications, the developers of HTML came out with the <MAP> tag to allow HTML designers to create client-side image maps.

• The <MAP> tag allows a designer to embed information about the image within the HTML code itself. Thus, the browser is able to decide what areas of the image are hot-linked without using a server CGI script.

• Client-side image maps introduce two tags(<MAP>, <AREA>) and the USEMAP attribute for the <IMG> tag.

• The tags and attribute are described in the table below

• To define an image map, you will use the <MAP> tag. This tag takes an attribute that defines the name of the map. The name is necessary so that you can tie a specific image to its corresponding map in case you have more than one image map on a page.

• To define clickable areas within the image, you use the <AREA> tag with its corresponding SHAPE, COORDS and HREF attributes.

• The shape attribute specifies a circle, rectangle, or a polygon. The COORDS attribute specifies the points that define those shapes. The HREF specifies the URL that should be linked to if the given shape is clicked on.

• A POLY shape will take a set of x/y coordinates to use as the dots in a connect-the-dot game. For example, the following AREA description would make a triangle:

  <AREA SHAPE = "POLY" 
       COORDS = "0,0,  10,10,  0,20" 
       HREF = "poly.html">
  

• The RECT works just the same except that it expects four sets of points whereas the POLY does not care.

• Finally, the CIRCLE shape takes a center point and radius such as in the following example that creates a circle area centered at 10,10 with a radius of 30 pixels

  <AREA SHAPE = "CIRCLE" 
           COORDS = "10,10,  30" 
           HREF = "circle.html">
  

• In addition you can use NOHREF instead of HREF to specify that the area does not link anywhere.
• Once you have defined the clickable areas of your image, you need to tie the image to the mappings. To do so, you specify the map name in the USEMAP attribute of the <IMG> tag.
• Let's take a look at the code for the Selena Sol Homepage imagemap.

  <IMG SRC = "Graphics/sol_frontpage.gif" 
            BORDER = "0" 
  	  WIDTH	 = "365" 
            HEIGHT = "273" 
            ALT = "[Navigation Image Map.]"
            USEMAP = "#solmap">
  
  <MAP NAME  	= "solmap">
  <AREA SHAPE 	= "rect" 
  	 HREF  	= "Personal/" 
           COORDS = "1,1 96,24">
  <AREA SHAPE 	= "rect" 
  	 HREF 	= "Personal/Resume/" 
           COORDS = " 212,47 254,60">
  <AREA SHAPE 	= "rect" 
  	 HREF 	= "Personal/creations.html" 
           COORDS =  "214,62 317,73">
  <AREA SHAPE 	= "rect" 
  	 HREF 	= "Scripts/" 
           COORDS = " 291,77 365,103">
  <AREA SHAPE 	= "rect" 
  	 HREF 	= "Library/Struggle/" 
           COORDS = " 0,89 113,115">
  <AREA SHAPE 	= "rect" 
  	 HREF 	= "Library/" 
           COORDS = " 211,144 360,169">
  <AREA SHAPE 	= "rect" 
  	 HREF 	= "Library/Barnaby/" 
           COORDS = " 1,201 77,220">
  <AREA SHAPE 	= "rect" 
  	 HREF 	= "Launchpad/" 
           COORDS = " 233,175 340,206">
  <AREA SHAPE 	= "rect" 
  	 HREF 	= "kudos.html" 
           COORDS = " 87,224 142,243">
  </MAP>
  

Additional Resources:

• Client-Side Imagemaps
• Server-Side Imagemaps
• Image maps

Image Maps
Introduction to Web Design | Table of Contents
Introduction to Web Design Day Three