Table of Contents
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.
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
Texts, for example titles
Markers in line graphs
Slices in pie graphs
Legends
Bars in barplots
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.