How to Create Clickable Image Maps For Your Web Pages

What is a Clickable Image map?

Any graphic image on a Web page with designated "hot spots". A hot spot is an physical area on the image that when click by a mouse, will load a new Web page. An image can have several hot spots pointing to different Web pages. The following is an example of a Clickable Image Map:

How to Set up a Clickable Image:

To setup a clickable imagemap for your web site, you need to do three things:

1. Create an image
2. Create an imagemap map file
3. Connect your image to the imagemap through a reference

Create an image: An image can be created using any Computer Graphics Package. If you have a scanner, you can scan pictures and save then as a Web compatible image (.gif or .jpg file).

Create an imagemap map file: The map file connects areas of your image to HTML files in your Web directory (filename.map). The following image map file was used to create the hot spots in the clickable image map example above:

default outside.htm
rect (198,61) (353,108) rectangl.htm
circle (301,160) 45 circle.htm
poly (157,83) (121,198) (252,162) (156,83) triangle.htm
poly (55,74) (88,78) (99,49) (112,77) (142,73) (125,100) (141,121) (113,122) (101,152) (88,123) (57,126) (75,101) (53,75) star.htm

Each line begins with a method. The methods used in the above example are:

1. default
   The default Web page to display when the user clicks on an undefined area of the image.
2. rect
   A rectanglular area defined by pixel coordinates x1,y1 x2,y2
3. circle
   A circular area defined by the center pixel coordinate x1,y1 and the radius 45 pixels.
4. poly
   For a polygon of at most 100 vertices Coordinates: Each coordinate is a vertex.

The point method can also be used for mouse clicks in one spot.

Both HTTP address or the relative HTML filename in your Web directory needs to be specified after the method. This is the destination Web page after the user clicks on the current area.

Each method is evaluated in the order it is placed in the map file. If you have overlapping areas, such as a circle inside of a rectangle, you should place whichever one you want evaluated first before the other in the map file. In this case, we would put the circle before the rectangle.

<A HREF="clickmap1.map"> <IMG SRC="clickmap1.gif"  Border=0 ISMAP> </A>

Map Edit Utility for Creating Image map files

Developer's Corner| Contact SpiderLink| SpiderLink Home Page