Dynamically Generating Image Maps

 An image map describes areas of an image which can be clicked on in the browser. Clicking on the designated area will then reference a designated URL, which can be another HTML page or a cgi-bin script.

Image maps are commonly used to create tool bars on HTML pages, but they can also be used to allow users to "drill down" into the image for a more detailed view. Page designers can make elements of their images, such as bars in a bar chart or segments in a pie chart, reference additional data related to the selected image area. This technique is often referred to as information drill down.

Gsharp includes a function, bounding_polygon(), which returns the coordinates of any graphical component found in a Gsharp graph hierarchy. Bounding polygon coordinates can be used to create HTML image map elements which link the graphical component to a specific URL.

Image Maps

A mapped image is a standard HTML image, with an extra tag, USEMAP, specifying the name of an image map to use. The following HTML is a simple example of an image map: 
<IMG SRC="toolbar.gif" USEMAP=#mymap>
<MAP NAME="mymap">
   <AREA SHAPE=rect COORDS="0,0,115,33" HREF="support.html">
   <AREA SHAPE=circle COORDS="116,30,20" HREF="sales.html">
   <AREA SHAPE=polygon COORDS="217,0,247,33,277,0"
    HREF="info.html">
</MAP>
Elsewhere in the HTML the image map is defined, usually just following the reference to the image. The MAP consists of any number of AREA elements. Each AREA can be either a rectangle, circle or a polygon and contains the definition of the active image area, and the URL which should be referenced if the area is clicked on. It is also possible to include a DEFAULT element defining the URL to referenced if no active area is selected.

Creating Image Maps with Gsharp

In addition to the built-in function bounding_polygon(), GsharpWE includes functions for creating the HTML elements for the image map. The following functions are included in $UNIDIR/lib/libhtml.gsl ($UNIDIR is an environment variable set dynamically by GsharpWE. $UNIDIR points to the path of the top level GsharpWE directory): 
	HTMLimagemap(stream, image, mapname)
	HTMLmaprect(stream, url, left, bottom, right, top)
	HTMLmapcircle(stream, url, centre, radius)
	HTMLmappoly(stream, url, x, y)
The following code make use of these functions to simplify the image map example in the previous section: 
include "$UNIDIR/lib/libhtml.gsl";

HTMLimagemap(stdout,"toolbar.gif","mymap");
HTMLmaprect(stdout,"support.html",0,0,115,33);
HTMLmapcircle(stdout,"sales.html",(116,30),20);
HTMLmappoly(stdout,"info.html",217//247//277,0//33//0);
echo("</MAP>");

Retrieving Bounding Polygons

The function bounding_polygon() has the following syntax: 
  float bounding_polygon(string object, float numvertices,
	      float x, float y);
  • The value returned by the function is the number of polygons making up the specified object.
  • numvertices is an array containing the number of vertices in each of those polygons
  • x and y are arrays containing the polygon data.

Note:

  • When retrieving the polygons of a bar graph or a pie chart, the order of the polygons will be the reverse of the order of the data - the first polygon in the arrays will correspond to the last bar or segment of the specified object, and the last polygon in the arrays represents the first bar or segment.
  • The GSL repaint command must be called before bounding_polygon().
  • The coordinates are based on the screen size - to be used with images they must be converted to pixel coordinates.
A convenience function, HTMLbounding_polygon(), is provided in $UNIDIR/lib/libhtml.gsl, which performs the repaint, calls the function bounding_polygon() and then converts the coordinates into pixel coordinates.

HTMLbounding_polygon() has the same syntax as bounding_polygon(), but has two additional float arguments imagewidth and imageheight. The following example combines HTMLbounding_polygon() with the image map functions in libhtml.gsl to create a bar chart image map. 

include "$UNIDIR/lib/libhtml.gsl";
float xpixs; xpixs = 400;
float ypixs; ypixs = 300;
float nvert, x, y;

create Viewport page_1.view;
create Domain page_1.view.domain;
create Graph page_1.view.domain.graph
 ( XuNgraphType = "bar",
   XuNyData = "log(1:4)+1"
 );

f = fopen("bars.html","w");

HTMLheader(f,"Drillable Bar Chart","Anon");

HTMLimagemap(f,"bars.gif","bars");

npoly = HTMLbounding_polygon("page_1.view.domain.graph",
                    nvert, x, y, xpixs, ypixs);

offset = 1;    #index into coordinate array

for i = 1 to npoly
  lines = offset:(offset+nvert[i]-1);
     # lines=(1:5), (6:10), ... for i = 1, 2, ...
  offset = offset+nvert[i];
  X = slicex(x,lines);
  Y = slicex(y,lines);
  url = "/Gsharp-bin/drill.gsw?bar="+(npoly-i+1);
  HTMLmappoly(f, url, X, Y);
endfor

fwrite(f,"</MAP>");

make_image(400,300,"bars.gif");
This example can be run with the command:
  /bin/GsharpWE bars.gsw

This will produce bars.html and bars.gif. Would you like to view the result?.

More complicated examples of drill down can be found in the GsharpWE example Seismic Drill Down.

Return to Gsharp Web Edition User Guide