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.
• 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. Ignore any 'point' shapes
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)^2 + (centerY - circumferenceY)^2)
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.connpad.com/toolbox.htm 

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.connpad.com/toolbox.htm" />
</map>

Written by Chris Ridpath
Jan. 18, 2001