HTML/XHTML:Image maps

Overview
An image map is an image that has defined clickable areas that trigger HTML events. When a mouse rolls over an image map, the cursor turns into a hand to indicate the "hotspots" of the image.

They are mostly used for navigation, though can also be used to rigger advanced HTML and JavaScript events. Flash is a commonly used alternative.

Hot spots can be defined as circular, rectangular and as a polygon (connected straight lines).

Creating an image map
To create a client-side image map you will need:
 * An Image. Usually in gif, jpg or png format
 * An HTML editor (it helps if it has image map functionality), otherwise you can use a drawing program that shows x (horizontal) x y (vertical) positioning of the mouse on the canvas.
 * Client-side image map compatible web-browser: (Supported by most major browsers since Netscape 2.0 +, Internet Explorer 2.0 +, or other compatible browser )

The image map is create by locating the co-ordinates of the image, as follows:



This is then converted into HTML code

To create a map:

Then add an entry for each "hot-spot" using this syntax:

With your map ready you have to add one last piece of code, assigning the map to your image. Simply add a USEMAP line to your IMG tag.

In Microsoft Expression Web
To add an image map in Microsoft Expression Web.


 * 1) Insert the image
 * 2) Click on the image, then right click and select Show Pictures Toolbar
 * 3) Click on the rectangular, circular or polygonal Hotspot tool (towards the right of the toolbar), then drag the area over the part of the image you want to create a hotspot for
 * 4) On release a dialog window will open for you to enter the hyperlink



Code similar to the following will be added to the HTML

In Adobe Dreamweaver
To add an image map in Adobe Dreamweaver.


 * 1) Insert the image
 * 2) Click on the appropriate hotspot tool (bottom left of window)
 * 3) Drag over object
 * 4) Add Hotspot Properties



Code similar to the following will be added to the HTML

Sample images for hotspot tasks
For the following tasks try to create a hotspot using an image drawing program (like PaintShop Pro, PhotoShop), Expression Web, and Dreamweaver.

Task 1: Create an image map for the basic shapes
Using the following image, create an image map that allows a rectangle, circle and polygon to be selected.



Task 2: Create an image map from a digital photo
Using the following image, create an image map that allows user to select the backgammon board, the ball and the castle that connects them to web page that briefly describes what was selected