Basic Definition of an Image Map
An image map will contain numerous "hotspots" that will result with a different URI being loaded given the user clicks on the image map. Each hotspot has its own designated URI. Web designers have two methods for setting up an image map: client-side image maps and server-side image maps. The primary use of image maps is to assist with site navigation.

Client-side Image Maps Setup
Typically, you require the following items in your page to actuate the client-side image map.
  1. First you need an object that acts as the image. This object can be defined with the IMG, OBJECT, or INPUT element.
  2. Next, you need to map the hotspots for the image. This is accomplished with the MAP and AREA elements. Specifically, the COORDS attribute of the AREA element defines the region of each hotspot. The MAP tags act as a container for all AREA tags.
  3. Then, you need to establish the hyperlink associated with each hotspot. This is accomplished with the HREF attribute on each of the AREA tags.
  4. You repeat the last two steps for each hotspot (add an AREA tag with the COORDS and HREF attributes).
  5. Finally, you must associate the image with the map.
    • First give the map a name with the NAME attribute on the MAP element.
    • Next, associate the object (image) to the map with the USEMAP attribute. All three elements (IMG, OBJECT, or INPUT) have the USEMAP attribute. Set this attribute to the name given the map (use the fragment identifier #).

Client-side Image Maps Process
Here is what happens when the user interacts with an image map that is set up for client-side processing. All processing occurs on the client.
  1. Given: you have associated the image with the map and you have specified the USEMAP attribute for your image as specified via either the IMG, INPUT or OBJECT element.
  2. First the image (to be used for the map) is rendered via the browser (this is the URI specified in the HREF attribute of one of the IMG, INPUT or OBJECT tags). This image file probably exists on the client but need not be.
  3. The user moves the mouse cursor over the image and clicks inside the image map (the look of the cursor changes as it moves over a hotspot).
  4. The coordinates are captured by the browser.
  5. The coordinates are associated to a hotspot as determined by COORDS attribute of the AREA element.
  6. The URI specified by the HREF attribute of the AREA element will cause a hyperlink to be taken (this is the AREA element related to the hotspot that was clicked).
  7. The document is retrieved and rendered via the browser.

Server-side Image Map Setup
There are two methods to actuate the server-side image map.
  1. Use the IMG element:
    • In the case of IMG element, the IMG tag must be inside an A (anchor) element and the boolean attribute ISMAP must be set on the IMG tag. In other words, the IMG tag serves as the content of the anchor tags.
    • The anchor elements HREF attribute should point to the URI of a server program that serves to decode the image map.
    • The IMG tag's HREF attribute points to the graphic file (gif, jpeg) that also exists on the server.
    • The IMG tag's ISMAP attribute is set (ismap="ismap").
  2. Use the INPUT element: nearly the same setup as the IMG tag.
    • In the case of INPUT element, the INPUT element must be of type="image".
    • The INPUT tag must be inside an A (anchor) element and the boolean attribute ISMAP must be set on the INPUT tag.
    • The anchor elements HREF attribute should point to the URI of a server program that serves to decode the image map.
    • The INPUT tag's SRC attribute points to the graphic file (gif, jpeg) that also exists on the server.
    • The INPUT tag's ISMAP attribute is set (ismap="ismap").

Server-side Image Map Process (using the IMG Element)
Here is what happens when the user interacts with an image map that is set up for server-side processing.
  1. First the image is rendered via the browser (this is the URI specified in the HREF attribute of the IMG tag). The image probably originated from the same server that will ultimately decode the coordinates.
  2. The user clicks inside the image map.
  3. The coordinates clicked are sent to the Web server along with a request for the URI of the document that is associated with the area clicked in the image. Here is more detail of the step:
    • Screen coordinates are expressed as screen pixel values relative to the image. They will appear in the status bar of your browser.
    • The URI sent to the server is from the HREF attribute of the A element. But before this URI is sent, it will be altered.
    • The browser derives a new URI by appending `?' followed by the x and y coordinates, separated by a comma.
    • The link is then followed using the new URI.
    • For an example:

      Given the HREF attribute of the anchor was initially: http://www.webservices.com/cgi-bin/img01.map

      And your coordinates are x=60, y=400: then the revised URL is:

      http://www.webservices.com/cgi-bin/img01.map?60,400

  4. The server goes into action. It has two jobs. It decodes the coordinates by consulting a file that contains the mapping of coordinates to the associated URI. And second, it sends this URI back to the client.
  5. The Client (browser) receives the URI response and then links to this URI and renders the related document.

Comparison of the Two Methods
Each method for rendering image maps have there advantages. Here is a look at each method. Before you read on, Client-side wins!

Additional comments
Here are some additional comments that may aid with your image map:

Top            

Rx4AJAX        About Us | Contact Us | Privacy Policy | 2008 This Site Built By PPThompson