Creating an Image Map

Steps in the Creation of an Image Map illustrated with this Image Map  

Note: If you use Fireworks to create your image maps, most of the HTML code will automatically be created for you by Fireworks!!

1. Create a single graphic, then set up hotspots within the image.  A hotspot is a defined area of the image that acts as a hypertext link.  Hot spots can come in three shapes:  rectangle, circle or polygon.   (I will illustrate this process using Fireworks later.)

2. The next step is to put this graphic image and the coordinate information together using HTML.

• Insert the image file, using the img tag, and associate the image to map information with the tag:  USEMAP, note the # before the named map area,  or USEMAP="#Kansas" here.
    
• The map area/coordinate information is defined within tags:   <MAP    NAME="Kansas">  ... </MAP>
    
• Each set of coordinates developed within the image describes an area.  AREA tags do not require closing tags, but they do require:
  • The browser needs to know the URLs to which these coordinates are linked, indicated with HREF  followed by url.
     
  • Shape attribute, possible values are RECT,  POLY and CIRCLE, note in this example only the RECT shape is used.
     
  • Coordinates are marked by the COORDS  tag, 
    • Rectangle shapes have four coordinates, the coordinates of the upper left corner and the lower right corner are needed.  Rectangular coordinates are of the form:  X,Y,X₁,Y₁
       
    • To map a circular shape, the coordinates of the center point and the length of the radius are required.  The coordinate form at will be of the form: X,Y,Radius.
        
    • To map a polygon, or many-sided shape, the coordinates for each point in the shape are required and must be listed in order. The coordinates for a polygon above will be of the form: X,Y,X₁,Y₁,X₂,Y₂,X₃,Y₃,X₄,Y₄ etc.