WWW Graphics

Imagemaps:

You can create clickable images with either a server-side script or a client-side script. There are advantages and disadvantages to both methods which you should consider before beginning a project.

Server Side

not all server administrators allow clickable images
server-side maps run on the server, slowing it down for other uses and tying up bandwidth
BUT, server-side imagemaps work on all browsers which support graphics

Client Side

the imagemap script executes on the local browser (client machine) so there is no drain on server resources or network bandwidth
BUT, client-side imagemaps only work on browsers that support them (IE 3.0.1 or NN 2.0>)

An imagemap, regardless of whether it is client-side or server-side has three parts.

First is the graphic itself. This should be a .gif file.
Second is a segment of code with pixel addresses that directs the computer to go find a file at a given URL when the imagemap is clicked on
Third is the .html file that the graphic displays in.

example

Where client-side maps differ from server-side maps is the location of the second part (the "address" file). On a server-side imagemap, the addresses reside in a .map file which the .html file refers to. On a client-side imagemap, the addresses are included within the .html file, itself. So, if you are using a server-side graphic, you need 3 files to make it work (.html, .gif, .map). A client-side graphic only needs 2 files (the .html and .gif).

To create SERVER-SIDE clickable imagemaps, follow these steps:

Create a graphic and save it as a GIF.
In a graphic viewer such as Lview or XV, locate the X,Y coordinates of the upper left-hand and lower right-hand pixels of each area you want to activate on the graphic. If you work on a Mac, there are helper applications that will do this, and write the .map file, for you. One such application is WebMap 1.0.1. Windows users can use Map This or MapEdit. Instructions for using these helper applicatons are available.
If you are manually preparing your imagemap (ie: not using a helper app such as WebMap, you need to prepare a .map file. This file contains the URL for each active area on your map.
In the .html file the imagemap is to appear in, type:

< P>

at the location in which you want the image to appear.

5. The .gif and .map files should have the same name and need to be in the same directory. They do not, however, have to be in the same publishing directory as the .html file.

You must upload the .map file, .gif file, and .html file which displays the graphic onto the server.

Sample imagemap:

The .map file for this imagemap looks like this:

default http://www.utexas.edu/depts/grg/gstudent/grg394l/crum/demo.html
rect http://www.utexas.edu/depts/grg/gstudent/grg394l/baird/baird.html 54,311 133,334
rect http://www.utexas.edu/depts/grg/gstudent/grg394l/behr/behr.html 49,333 137,351
rect http://www.utexas.edu/depts/grg/gstudent/grg394l/berglund/berglund.html 28,353 159,372
rect http://www.utexas.edu/depts/grg/gstudent/grg394l/crossley/crossley.html 184,334 291,354
rect http://www.utexas.edu/depts/grg/gstudent/grg394l/foote/foote.html 12,37 609,308
rect http://www.utexas.edu/depts/grg/gstudent/grg394l/gao/gao.html 189,355 290,375
rect http://www.utexas.edu/depts/grg/gstudent/grg394l/helzer/helzer.html 323,315 448,330
rect http://www.utexas.edu/depts/grg/gstudent/grg394l/heubner/heubner.html 333,334 441,351
rect http://www.utexas.edu/depts/grg/gstudent/grg394l/roy/roy.html 481,314 571,332
rect http://www.utexas.edu/depts/grg/gstudent/grg394l/slaughter/slaughter.html 464,334 588,351
rect http://www.utexas.edu/depts/grg/gstudent/grg394l/sokoll/sokoll.html 473,354 580,372
rect http://www.utexas.edu/depts/grg/gstudent/grg394l/christian/christian.html 172,314 305,332
rect http://www.utexas.edu/depts/grg/gstudent/grg394l/molch/molch.html 335,355 441,372

sample server-side map and files

To create client-side image maps, follow these steps:

Remember the line of code that makes a server-side map work:

Well, to modify this link so that it looks for a client-side map rather than a .map file on the server, change the ismap to usemap="#name_of_imagemap" and place the ismap at the END of the tag:

The other thing you have to do is incorporate the .map file into the .html file. You do this by copying the .map file into your .html file in the region between the <head> and <body> tags, with some minor modifications.

Remember what the address lines in the .map file look like?

You need to add a couple of things to this in order for it work as part of the .html file. The 3 lines above (prepared for a server-side map) will look like the following lines when "translated" into client-side maps:

name_of_imagemap

Sample client-side image map and file

Back to the main graphics page.

Created by Shannon Crum, October 1995. Last updated 16 February 1998 by slc.