|
Division of Information Technology
Web Publishing @ SFSU Clickable Images |
| What Are Clickable Image Maps ? | Image maps are used to create sensitive clickable images
that respond to the area of the image the visitor click on. Not all browsers
can view or interact with clickable images, so alternate text based links
must always be provided. Image maps are created by mapping the different
areas of an image using the x,y coordinates. The coordinates are recorded
as circles, squares, rectangles, oblongs, and polygons. Fortunately there
are programs that can be used to select an area and automatically record
the coordinates. Each object's coordinates are assigned a URL that is to
be linked when they are selected. A default URL is also assigned for those
areas that lead nowhere. The coordinates and URL's are stored in a configuration
file that must be placed in the server's script area.
Here is are some examples of clickable image maps.
The Clickable Garden example uses images stored in a subdirectory called flowers.
|
| Step by Step Process for Creating a Clickable Image Map | An HTML document is created that:
|
| Imagemap Configuration File | We recommend using imagemap software tools
to determine the map coordinates. To manually create an imagemap coordinate file
determine the xy coordinates of the parts of the image
which will be mapped. Then create an imagemap configuration file, which maps regions
to URLs for the given image. In other words, this file contains information
about the regions in the picture that correspond to other URLs.
The format of a imagemap file is fairly straightforward. The first line of the file specifies the default response, or the URL that corresponds to a click outside any defined regions. It syntax is: default URL Subsequent lines specify the regions in the image that correspond to URLs. |
| Definable Regions | There are four types of regions that can be defined:
These above keywords can be abbreviated as def, circ, rect, and poly. Lines beginning with the pound symbol are comments. |
| Special Considerations | Each keyword is evaluated in the order it is placed in the imagemap configuration file. Therefore, if in the case of overlapping regions, such as if a circle was defined inside a rectangle, whichever region should be activated first should be before the other in the imagemap configuration file. |
| For More Information | Clickable
Image Map Software ISMAP server-side programs Yahoo's Imagemaps Resources. Image map Authoring Guide & Tutorial Site. |
Home
Search
Need Help?
1600 Holloway Avenue, San Francisco, CA 94132 (415) 338-1111
Last modified February 11, 2008 by the Web Team