IMAGE MAPS AND SENSITIVE IMAGES
You can produce sensitive or clickable images on your pages in two ways.
First we will describe the original method using server-side maps and
then the newer client-side method. Server-side maps have the mapping
information in a separate file on the server which the server handles.
Client-side image maps include the mapping information within the
original page for handling by the browser. Client-side maps reduce
network traffic, improve response time for the user, and allow better
handling by browsers (including some text-only browsers). Server-side
maps are still more universally supported (particularly by older
browsers) and may be more appropriate with very large maps. For now,
using both forms provides the benefits of the client-side method and
compatibility with older browsers. Most newer browsers, including recent
versions of Netscape Navigator, will use the client-side map if both are
available.
Server-Side Maps
This will involve an HTML file that will reference a GIF image file as
an embedded image. An additional text file will contain information that
maps areas of the image to web links. For example, consider this
fragment of an HTML file:
<a href="sample.map">
<img src="sample.gif" alt="alt text" ismap>
</a>
This refers to an image file called "sample.gif" and is associated with
"sample.map" for the sensitive area definitions.
The map file is simply a text file in this format (known as the NCSA
format):
default http://www.uky.edu/whatever
rect http://www.uky.edu/whateverelse 1,1 10,10
The "rect" line defines a selectable rectangle by giving two diagonally
opposite corners. The units are pixels. When a point within the
rectangle is selected the given URL is used. The "default" line defines
a URL to be used if the point selected isn't defined otherwise. Circular
and polygonal areas are also supported. Determining the pixel
coördinates for the selectable areas can be the most time consuming
part of setting this up. There are utilities for some platforms (like
Webmap and Pagemill for the Mac) that can automate this, but most image
editing programs (Photoshop, for example) can give you exact pixel
addresses in an image and some can produce the map file or HTML
directly. Some web browsers display the coördinates of the cursor
within images that are link anchors.
Here's an example of a server-side map:
Additional directives are supported in map files. Consult the
Apache documentation
for more inforamation.
Client-Side Maps
Client-side maps have more complex HTML, but don't require a separate
map file. Within the HTML file you first define the map:
<map name="sample">
<area shape=rect coords="1,1,10,10" href="wherever" alt="description">
</map>
The information included is much like that used in the server-side map
file. This is then referred to later in the file:
<img src="imagemaps.gif" usemap="#sample">
Some browsers allow the usemap parameter to refer to another file.
Here's the image again, this time with a client-side map:
The Universal Example
Here's the same image one more time, this time with both server-side and
client-side maps defined:
These notes reflect the Apache web server. The
old instructions
for the CERN server are still available for reference purposes.
This page was last updated on 2003-07-18.
Please direct questions and comments regarding this page to
webmaster@www.uky.edu.
|