ncsa2csim

Demo instructions
ncsa2csim Demo
Client-Side Image Map Demo

All Rights Reserved. These functions can be re-used or modified, if credit is given in the source code. I will not be held responsible for any unwanted effects due to the usage of these functions or any derivative. No warrantees for usability for any specific application are given or implied.
Philip Tan, 11th of May, 1996.

function ncsa2csim(`ncsaString,mapName`)

This code is not really meant for plugging into your own pages...it's pretty useless (as far as I can tell) other than how it is presented in the demo: a one-time tool to convert NCSA Image Maps to Client-Side Image maps. ncsa2csim uses replaceAll to turn all instances of 'circ' to 'circle', since NCSA maps can be used with either terminology.

convCircle is also used to convert NCSA-specified oval shapes into Client-Side circles.

ncsa2csim will also invert the order in which the image map areas are defined, so that overlapping areas are handled according to their NCSA definitions.

function convCircle(`coodStr`)

convCircle is needed to convert a string of four coordinates specifying an oval (as used in NCSA maps) into a string of two coordinates (the center of the circle) and a radius specifying a circle. This is necessary for circles to be used in Client-Side maps. This also means that you can't have ovals as specified areas, only perfect circles. If you have ovals specified, they will be turned into circles with the radii derived from the width of the ovals. coodStr must have its coordinates all separated by commas.

Example: convCircle takes in "5,48,70,114" as an input string and returns "38,81,33".

About the functions...

ncsa2sim was written to allow me to keep my client-side imagemaps consistent with server-side imagemaps. Without ncsa2csim, I wouldn't think it worth the trouble to implement imagemaps at all...at least, not for my home page.

In case you're looking for other imagemaps in the FireHazard web site, don't bother. I thought them unnecessary after much consideration. This might change after time.

Look at the source of this HTML document to get at the code. They are fully annotated and should be easy enough to tailor for your own uses.

Demo Instructions

Name of CS-Imap: Implementing Client-Side maps

The name of the map specifies where the images will refer to for their appropriate maps. When you actually code the HTML for your image, it will look like this:

<IMG SRC="http://your.domain.name/your/graphic/path.gif usemap="#imapname">

If you wish to use Client-Side and Server-Side maps together (for compatibility) use this code:

<a href="http://your.domain.name/your/serverside/map/path.map>
<IMG SRC="http://your.domain.name/your/graphic/path.gif ismap usemap="#imapname">
</a>

The output of ncsa2csim can be copied into anywhere inside the actual HTML code of that particular page. However, if you wish to keep the CS-maps located in a central file, you can put the CS-map definitions into a text file all by itself. Let's assume this text file is named csimage.map.

<IMG SRC="http://your.domain.name/your/graphic/path.gif usemap="http://your.domain.name/your/csimap/path/csimage.map#imapname">

It's like using anchors (or targets) to link to one particular place in a HTML document, right?

What if you have no `default` specified?

If there is no URL specified as the default, it will not be added to the CS-map produced. So, in the example below, instead of:

default http://home.pacific.net.sg/~firehzrd/

You'll put this to prevent the addition of a default URL for the whole image:

default

But 'default' must still be there! This is important!

ncsa2csim Demo

Make sure that there are no extra spaces in your NCSA map, since that can lead to problems.

The image below is an example of a Client-Side Image Map

Back to the JavaScript Archives