An image map, also called a clickable image, is a single image that contains multiple links. Clicking on a portion of an image map takes you to the link connected with that part of the visual presentation. For example, a physician might present an image map of the human body to a patient to "click where it hurts". Another good use replaces individual images with a single graphical menu.

	Understanding Image Map Types
	Image Maps and Text Only Browsers
	Creating Server-Side Image Maps
	Creating Client Side Image Map
	Building Web Pages that support Both Types of Image Maps

The two types of image maps are - Server-side and Client-side. The feature distinguishing the two types is where the processing takes place (where a visitor's mouse-click is translated into a link to another document). The processing can occur either on the server (hence, server-side image map) or on the visitor's computer (hence, client-side image map).

	Client Side Image Map
	Server Side Image Map
	Image Maps and Text Only Browsers

Client-side image maps are faster, because there's no need for back and forth communication between client and server to process the map. Client-side image maps are user-friendlier than server-side image maps. When a visitor moves the cursor over an image-map link within a document, the status bar displays the URL of the link. Client-side image maps are better for you, because you can use and test them before you put the image map on the server.

Although server-side image maps have been in common use for some time, the problems associated with them have led to the development of a new type of image map called a client-side image map.

When you create a client-side image map, many of the steps for finding the coordinates of each area on the map are exactly the same as they are for creating server-side image maps. Unlike a server-side image map, however, which uses a separate file to store the coordinates and references for each hyperlink, client-side image maps store all the mapping information as part of an HTML document.

In this exercise, you will learn to create an Imagemap.

In the above Notepad, BANNER is the map name, AREA is to define the clickable area, SHAPE represents the area's shape and COORDS represent the upper left and lower right corners of the rectangle.

Point the cursor on any of the front windows or doors of the above picture and click to see the changes.

In a server-side image map, the coordinates of the click are transmitted to the server computer, which determines what instructions apply to that click. The server then sends that information back to the client, which then sends a request for the appropriate document. The server computer does the calculating and tells the client what to do.

The problems associated with server-side image maps:

	Normally, when you move your cursor over a hyperlink, the URL pointed to by the link is displayed in the Web browser's status bar. Because, however, the Web browser has no idea where the parts of a server-side image map point, all you see when you place your cursor over a server-side image map is either the URL of the image map program itself, or that URL and a set of x, y coordinates.
	You cannot use or test server-side image maps with local files. Image maps require the use of a Web server to run the image map program and process the x and y coordinates.
	Because a special program must run by the server each time a user clicks a page that contains image maps, image maps are much slower to respond to mouse clicks than normal links or images as links. Consequently, the image maps seem to take forever to respond to request for a new page.

If you try to view a document with an image map in a text-only browser such as Lynx, you don't even get an indication that the image exists - unless the image contains an ALT attribute. But even with the ALT attribute, you won't be able to navigate the presentation without a graphical browser. If you decide to create a Web page with an image map on it, it's important that you also create a text-only equivalent so that readers with text-only browsers can use your page.

Copyrights : Layout Galaxy All Rights Reserved No part of this tutorial may be reproduced, stored in a retrieval system or transmitted in any form or by any means, electronic, electrostatic, magnetic tape, mechanical or otherwise, without prior permission in writing from Layout Galaxy.