Image Map Conversion

This document describes how to convert a server-side image map file into a client-side image map file.

Background

Server-side image maps are normally stored in a standard ASCII text file. There are 2 common formats for the map files, NCSA (Netscape) and CERN. Each format associates active areas of an image (hot spots) with a URL.

• The NSCA file describes an active area using the 3 parameters: shape URL coordinates. Example: rect http://www.foo/bar.html 7,15 9, 20
• The CERN file describes an active area using the 3 parameters: shape coordinates URL. Example: rect (7,15) (9,20) http://www.foo/bar.html (Note that the URL and coordinate parameters are reversed from the NSCA format.)
• NSCA coordinate pairs are separated by whitespace.
• CERN coordinate pairs are enclosed in parenthesis.
• CERN format files often place the URL on the line following the coordinates. Example:
  rect (7,15) 20
http://www.foo/bar.html
• NCSA format describes circle shapes using their center location and radius location. Example: circle http://www.foo/bar.html 7,15 9, 20
• CERN format describes circle shapes using their center and radius size. Example: circle http://www.foo/bar.html (7,15) 17
• Client-side image maps require the circle shape to be described in the NCSA format.
• NCSA format uses the shape names 'circle, 'rect', 'poly'.
• CERN format uses the shape names 'circle, 'rectangle', 'polygon'.
• Both types of server-side image maps have a shape called 'point' that is not supported in client-side image maps. You can convert the 'point' a rectangle with an area of 1 pixel.
• Lines that begin with a hash mark '#" are comments and can be ignored

Client-side image maps are described in HTML code using the 'AREA' element. AREA elements have the 3 attributes, SHAPE, COORDS and HREF, that correspond to the shape, coordinates and URL parameters of the server-side image map. Example:

Conversion Algorithm

1. Read in a shape/coordinate/URL line. Each line starts with a shape name and will end just prior another shape name.
2. Ignore any comment lines (they start with a '#')
3. Parse the shape name, coordinates and URL from the line
4. Convert the 'point' shapes to rectangles with an area of 1 pixel.
5. Convert the shape names 'polygon' to 'poly' and 'rectangle' to 'rect'
6. Convert any CERN style circle coordinates to NCSA style circle coordinates using the formula: square root of ((centerX - circumferenceX)squared + (centerY - circumferenceY)squared)
7. Write out a MAP start element to the client-side image map file
8. Write out the AREA elements for the client-side image map with the SHAPE, COORDS and HREF attributes set to the shape, coordinates and URL values.
9. Write out a MAP end element to the client-side image map file

Example

Server-side Image Map File

# testmap

rectangle (5,9) (110,43) http://www.yahoo.com/
polygon (111,9) (220,43) http://www.infoseek.com/
circle (415,77) 16 http://www.hello.com/
point (45,45) http://www.w3c.org/

Client-side Image Map File

<map name="testmap.map">
<area shape="rect" coords="5,9,110,43" href="http://www.yahoo.com/" />
<area shape="poly" coords="111,9,220,43" href="http://www.infoseek.com/" />
<area shape="circle" coords="415,77,16" href="http://www.hello.com/" />
<area shape="rect" coords="45,45,46,46" href="www.w3c.org" />
</map>

Written by Chris Ridpath
Feb. 2, 2001