Assignment #7

Image Maps

An image map combines one graphic with HTML code that enables the graphic to have links to multiple URL's. Back in Assignment #4, we learned how to use a graphic as a link. An image map is different in that it permits one graphic to handle multiple URL's.

An image map has two HTML parts. The first part is very similar to the HTML used to display a graphic. The second part is more complicated. HTML is created that acts as a "mask" that is placed over the graphic. This "mask" consists of geometric shapes (circles, squares, rectangles, etc) placed over the graphic. Each geometric shape is associated with a URL. If someone clicks inside the shape, the browser will respond by going to the corresponding URL.

There are two types of image maps, a server-side image map and a client-side image map.

A server-side image map uses a separate "map" file that is placed on the server. When someone clicks on the graphic, the X and Y positions of the click are sent back to the server, and the "map" file sends back the appropriate URL. A client-side image map has all the X and Y coordinate information in the HTML of the page that contains the image map. When you click on the image map, the browser looks in the code, and figures out the appropriate destination URL.

Server-Side Example

Below is the HTML code for the server-side image map. All the X and Y coordinate information is in the serverside.map file on the server.

Client-Side Example

Here is the HTML code for the above client-side image map. Notice that the first part of the code is exactly the same as the image HTML code with the addition of the "usemap" information at the end. This tells the graphic to use the X and Y coordinates detailed in the "map" area listed below it. All the geometric shapes in this image map are rectangles, which is why shape is "rect".

Roll the mouse around on each of the above image maps. Watch the status bar (bottom left area) in your browser. Notice that the server-side only shows the X and Y coordinate of the link, and the client-side image map shows the URL of the map area.