Explanation of the Image Map Example

Using csDrawGraph to dynamically generate an image map requires a different approach from the usual method of producing a graph. Normally the component is called from a script embedded in an <img> tag. This script generates the binary data stream that is the graph image. The image map is HTML and must go in the outer page. The image still needs to come from a separate file included in the <img> tag. The example solves this by temporarily storing the image as a session variable, allowing it to be created in one script and streamed from another.

The outer page is "imagemap.asp". This has three relevant pieces of code. First the component is used to create the chart:

<%
Set Graph = Server.CreateObject("csDrawGraph.Draw")
Graph.AddData "Data 1", 10, "ff0000"
Graph.AddData "Data 2", 18, "00ff00"
Graph.AddData "Data 3", 7, "0000ff"
Graph.AddMapArea "url1.asp", "Data 1", "target=_blank"
Graph.AddMapArea "url2.asp", "Data 2", "target=_blank"
Graph.AddMapArea "url3.asp", "Data 3", "target=_blank"
Session("Chart") = Graph.GIFPie
%>

Three data items are added, just using fixed values for this example. Then the AddMapArea method is called three times (once for each data item). The first two parameters for this method are the URL and the help string (the title attribute of the AREA tag). Whatever is assigned to the third parameter will be added inside the <area> tag immediately before the closing bracket. This allows you to set such things as target and style attributes or a Javascript mouseover. If it is not required a pair of empty quotes must be used. Finally, the chart is produced (as a pie chart) and written to a session variable for use in the next script.

The image map itself must be written somewhere inside the HTML body. This is done using the following code:

<%
Response.Write Graph.ImageMapText
%>

The image tag needs to point to a script that streams the image:

The script that streams the image to the browser is called "chart.asp". The default name of the image map is "map1". Here is a listing of "chart.asp":

<%
  Response.Buffer = true
  Response.Expires = 0
  Response.ContentType = "image/gif"
  Response.BinaryWrite Session("Chart")
  Session("Chart") = nil
%>

This takes the session variable that was used to store the binary image of the chart and streams it to the browser. It is set to nil afterwards.

There are some other features of image maps not used in this example. The SetImageMapParams method can be used to specify the name of the image map. This method also takes three Boolean parameters that control which parts of the image will be used as hotspots. These are the data area (the pie chart sector or bar chart bar), the label next to the data area and the entries in the legend. The property ImageMapExtra can be set to add some HTML code immediately before the </map> tag. This could be used for creating additional <area> tags or setting a default action. These properties and methods are documented in the csDrawGraph instructions.

Click Here to return to the example or to download the code.