Image Maps

PAGE (2 of 4)

Client Side Map Components

Client side image maps are composed of 3 parts: 1. the image file, 2. pixel coordinates and 3. the HTML Map file.

1. Image File

   Any valid GIF or JPEG file may serve as an image map. Care should be taken to choose or create the file in such a manner that the user can easily distinguish between the boundaries of the different linked regions of the image.

2. Image Map Pixel Coordinates

   The Image Map Pixel Coordinates are simply the Cartesian pixel coordinates of bounding geometric shapes, (rectangle, circle, & polygon) of the image, to which one wishes to associate a hyperlink.

   Coordinates are relative to the image starting at (0,0), the upper-left corner. Many drawing/image editing programs give this information.

   Rectangle regions are specified by the upper left (x₁,y₁) and lower right (x₂,y₂) pixel coordinate corner locations.

   Circle regions are specified by the center point (x₁,y₁) and the length of the radius (in pixels).

   Polygon regions are specified by the coordinates of each vertex in order of the polygon, (x₁,y₁), (x₂,y₂), (x₃,y₃), etc. A polygon region has a limit of < 100 points.

   An image is identified as an image map by use of the USEMAP attribute of the IMG tag. The format of the IMG tag and USEMAP attribute are as follows:

   1. <IMG SRC="imageFile.gif" USEMAP="#mapFileName">
3. HTML Map File

   The #mapFileName associates the image file with the embedded HTML map file.

   The map file is embedded in an HTML document containing an image map by use of the HTML MAP tag. The name must correspond with the name used in the USEMAP attribute of an IMG tag. The format of the MAP tag is as follows:

   1. <MAP NAME=" mapFileName">

   The MAP tag is immediately followed by the AREA tag with SHAPE, COORDS and HREF attributes. The format of the AREA tag is as follows:

   <AREA SHAPE="shapeType" COORDS=" x₁,y₁ , x₂,y₂ , ..." HREF="URL">

   The shape type must be one of the following: "RECT", "CIRCLE", "POLYGON". The COORDinateS must adhere to the pixel specification explained above. The URL gives the document link for the map region.