Chapter 10. Using CSIM (Client side image maps)

Table of Contents

10.1. The principles
10.2. The basic structure of an image map script
10.3. Specifying targets for image map plots
10.3.1. Creating popup-windows as targets for CSIM
10.4. Using StrokeCSIM()
10.4.1. Optional argument to StrokeCSIM()
10.4.2. How does StrokeCSIM() work?
10.4.3. Image maps and the cache system
10.5. Getting hold of the image map
10.6. Mixing several CSIM images in an HTML page with text
10.6.1. Adding one CSIM graph in a HTML page
10.6.2. Adding multiple CSIM graphs in a HTML page

Image maps makes it possible to create images with "active" areas that will react for a mouse-click. It is then up to the designer to decide what actions should be taken. Image map is often used to create drill-down charts where it is possible to dynamically zoom into an image. Image maps is part of the HTML standard.

There are actually two types of images maps, client and server-side. This refers to where the actual processing of the image click happens. Without doubt the best (and most commonly used) type is the client side. This is also what the library supports. In the remainder of this manual this will be referred to as CSIM, Client Side Image Maps.

The principles

Image maps works so that each hotspot area in the graph that should be used must have an associated URL. When the user clicks somewhere in that particular hotspot area the browser will open the specified URL. Typical hotspot areas in the graphs are

  1. Texts, for example titles

  2. Markers in line graphs

  3. Slices in pie graphs

  4. Legends

  5. Bars in barplots

  6. etc.

The way the CSIM HTML standard works is that the HTML page must have a section with coordinates that defines the various hotspots together with the associated URL that should be called. Each section of coordinates are connected to a specific image that is included with a standard <img> by a common id. This will now add some complexity since the library must return an HTML page for the coordinates and not image data as normal for the library. How this is done is the topic of the next section.

A number of examples of CSIM graphs are included in the Examples/ directory. Some of the available examples are listed in Table 10.1. CSIM Examples (in Examples/ directory)

Table 10.1. CSIM Examples (in Examples/ directory)

CSIM Examples (in Examples/ directory)
bar_csimex1.phpbar_csimex2.php
bar_csimex3.phpbarline_csimex1.php
barlinefreq_csimex1.phpboxstockcsimex1.php
ganttcsimex01.phpganttcsimex02.php
imgmarkercsimex1.phppie3d_csimex1.php
piec_csimex1.phppie_csimex1.php
scatter_csimex1.phptitlecsimex01.php


In order to easily access all of these examples it is possible to call the testsuit.php example with an additional argument "t=2". By following the link "testsuit.php?t=2" a separate window will open with all the possible CSIM examples.