Imagemap

This web page has been accessed

times since 1/25/2000.

Reference
See imagemap section on HTML 4.01 specification.
http://www.w3.org/TR/html4/struct/objects.html#h-13.6

Server-side Image Map

Click on the Building for the related web sites.

Client-side Image Map

Click on the Building for the related web sites.

With netscape navigator, you can see the url to be requested while moving cursor around the image map.
For the server-side image map, the status window shows the url similar to
http://owl.uccs.edu/~cs401/imap/uccscamp.map?155,93
For the client-side image map, the status window shows the url similar to
http://www.uccs.edu/~library

Server-side image map vs. Client-side image map

Server-side imag map involves additional communications and processing overhead at
the web server. The coordinator will be sent as query string to a cgi/built-in program,
the map file needs to be read in, the corresponding url will be return with 302 code in
the Location meta info header. The browser will then retrieve the web page.

Here is what happens:

bash# telnet owl 80
Trying 128.198.2.69...
Connected to owl.uccs.edu.
Escape character is '^]'.
GET /~cs401/imap/uccscamp.map?155,93 HTTP/1.0

HTTP/1.0 302 Found
Server: Netscape-Communications/1.1
Date: Thursday, 05-Mar-98 16:53:34 GMT
Location: http://www.uccs.edu/~library
Content-type: text/html
Content-length: 214

<HTML><HEAD><TITLE>Found</TITLE></HEAD><BODY><H1>Found</H1>
This document has moved to a new <a href="http://www.uccs.edu/~library">location
</a>. Please update your documents and hotlists accordingly.</BODY></HTML>Connec
tion closed by foreign host.

Client-side image map embeds additional url translation specification using the <MAP> tag in
the original web page (larger size). But the browser handles the translation to url and it is much quicker.

Steps of server side image map creation:

Decide the image file and create the image map with the following html tag

Specify the areas you would like to translate into urls.

Rectangle is typcial. (Client-side image map only support Rectangle?)

Specify as four tuples, upper left corner coordinate followed by lower right corner coordinate. Note that the y axis pointed downward.

Polygon is more flexible.
Circle (Specify center and radius)
Points (The closest point is chosen).

For identifying the coordinators of the area, use drawing package which displays the coordinates of the cursor, or use the netscape browser which shows the cursor location when it is on an image map.
Create a .map file. Here is an example (uccscamp.map):

default http://www.uccs.edu/

rect http://piglet.uccs.edu/         27,20 130,68
rect http://www.uccs.edu/~library    131,71 177,131
rect http://www.uccs.edu/~athletic   135,20 188,71
rect http://www.uccs.edu/~slc        191,54 272,107

Apache Image Map Directives

AddHandler imap-file map
ImapBase map
#ImapDefault default.html
#ImapDefault error
#ImapDefault referer
ImapDefault map
#ImapMenu semiformatted

ImapDefault is used to handle the situation where the selection does fall in the specify area.
ImapMenu is used for text-based browers.

Steps of client side image map creation:

Decide the image file
Specify the areas you would like to translate into urls.
Shape of the area can be rectangles, circles, polygons.
For identifying the coordinators of the area, use drawing package which displays the coordinates of the cursor, or use the netscape browser which shows the cursor location when it is on an image map.
Specify the <IMG> tag with USEMAP attribute, and add the <MAP> tag . Here is an example (imagemap.htm):

<AREA SHAPE="POLY" COORDS="91,81,131,133,122,111,122, 100,111, 91,81"

HREF="http://web.uccs.edu/elpomar/">

<AREA SHAPE="CIRCLE" COORDS="226,121,20"

HREF="http://www.uccs.edu/">

</MAP>

See imagemap section on HTML 4.01 specification.
http://www.w3.org/TR/html4/struct/objects.html#h-13.6

Here is the new uccsmap.