CLICKABLE MAP TUTORIAL

A Clickable map is a graphic tool that has certain areas on it defined to link to another URL address when clicked. These areas can do what normal HTML links do i.e. email, ftp, gopher, etc. The most common use of a clickable map is to take the user from the macroscopic to the microscopic level of the subject at hand. For example, one may see a picture of a computer system and by running the mouse over this picture, you can see the mouse pointer. This a clue that there is a link to another source. By clicking on the computer tower, one may be taken to a picture of a motherboard of floppy disk drive, etc. Two basic types of clickable maps can be used. These are server-side and client-side maps. Client-side maps can be very efficient and will probably be the wave of the future; however, they may not be supported by some of the older servers. For this reason, it is convenient to use the server-side method. This method downloads each image (upon clicking) individually, thus making numerous trips to the server. This is the basic difference from client-side mapping which downloads all of the pictures at one time. The most important part of getting the clickable maps to work is to write the HTML code correctly. Server-side HTML should look something like this:

<A HREF="yourmap.map"><IMG src="graphic.gif"ISMAP></A>

HREF is the URL address of the map to send to the web server. IMG src= is the actual filename of the picture being used. ISMAP is the command that shows that this will be a clickable map. Image mapping uses the basic shapes to highlight clickable images. These are defined by coordinates (0,0) in the top right of the screen and becoming greater to the right and down on the screen. These basic commands are as follows:

<area shape= "circle" coordinates= "x1,y1,r" HREF="URL.htm">

The coordinates for the circle are the center and the radius.

<area shape= "rectangle" coordinates= "x1,y1" "x2,y2" HREF="URL.htm">

The coordinates of the rectangle are two opposite corners.

<area shape= "polygon" coordinates= "x1,y1" "x2,y2" "xn,yn" HREF="URL.htm">

The coordinate of the polygon are adjacent vertices where the first and last connect. The images for a clickable map need to be saved as basic .GIF images. Our final product is the file Fracturemap. For some help in the basics of image mapping, various programs can be used. The one that we chose was Map This! This is a highly rated program whose download site has a walk-through tutorial. Another useful tool for making image maps is LVIEW. We found this program useful in making modifications to our images prior to mapping in Map This!


Table of Contents


By Tiffany Brunetti and Keith Lyon