Chapter 10. Using CSIM (Client side image maps)
| Part II. Basic graph creation |

## Chapter 10. Using CSIM (Client side image maps)

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.php` | `bar_csimex2.php`
`bar_csimex3.php` | `barline_csimex1.php`
`barlinefreq_csimex1.php` | `boxstockcsimex1.php`
`ganttcsimex01.php` | `ganttcsimex02.php`
`imgmarkercsimex1.php` | `pie3d_csimex1.php`
`piec_csimex1.php` | `pie_csimex1.php`
`scatter_csimex1.php` | `titlecsimex01.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.

| Up |
| Home |