You should already be wondering what those 2nd and 3rd elements of our png variable are for! Let’s try a little experiment! In your Notepad, make a new html file such as ...

This is some very boring text about the second pie sector

... and save it as c:\temp\boring.htm. Now for the hard part – we want our web readers to be able to access this vital information by simply clicking on the pie sector. If you really want to know what is going on here, you can read about “Client-side Image Maps” in any good introduction to HTML. For now, we want to let Rain do the work, so let’s try telling it that the second data element has a jump to make:

       ch.Set 'head' 'My First Chart'
       ch.Set 'xlabs' 'One' 'Two' 'Three' 'Four'
       ch.Href 2 1 'boring.htm'
       ch.Pie 5 4 3 2
       PG„ch.Close
       png„ PostScrp.MakePNG PG

The new function introduced here ch.Href has a simple job to do. For any data point (addressed by row,column – piecharts have all their values in column-1) you can associate an internet address. The hard work is done for you by PostScrp.MakePNG – let’s have a look at the 2nd element of png ...

      2œpng
<MAP name="chart17487">
<area shape="poly" coords="225,159,163,208,183,226,209,236,236,237,262,228,284,211,286,208" href="boring.htm">
</MAP>

The rest we can do with careful cut-and-paste. For simplicity, use the Clip utility (in the root namespace) to copy the MAP data into the clipboard, then paste it into Notepad, preferably at the very beginning of the file.

     Clip 2œpng

Now you need to make one small change to that IMG tag – we must associate it with the correct map.

Check carefully the name that Rain gave to your map (“chart17487” in the script shown above – these are unique to each chart, so you will all have different numbers) and please do not copy mine! Typically your html code will now look like ...

<MAP name="chart17487">
<area shape="poly" coords="225,159,163,208,183,226,209,236,236,237,262,228,284,211,286,208" href="boring.htm">
</MAP>
<h2>Here is My Chart</h2>
<img src="mychart.png" usemap="#chart17487" border=0>
<p>That was easy!</p>

I added ‘border=0’ out of neatness, as I object to the heavy blue line that browsers put around pictorial jumps! You can safely leave it out. Now you can also see why we need those uniquely numbered maps – it allows you to have several mapped charts in the same page.

Save the file yet again from Notepad, go back to the browser and hit F5 or press the Refresh button. The pie should look much the same as before, but now when you wave the mouse over the second pie sector, hey presto! The mouse turns into a pointing hand, and you can click anywhere on the sector to see the detailed notes.

As a final touch, in IE4 and IE5 you can have little pop-up tips when you wave the mouse over the active areas. Try adding a call to ch.Hint to your script ...

        ch.Href 2 1 'boring.htm'
        ch.Hint 2 1 'Click ME!'

Clip the imagemap again, and paste it over the MAP section in first.htm. Change the magic number in the “usemap” parameter to match; when you resave it and hit F5 in the browser you should get a suitably encouraging tip as you wave the mouse over the second sector.

Summary
Charts are saved as image files, and may be referred to from the IMG tag in normal HTML code. If you make a special section called an image map, this can contain various shape definitions which may themselves act as hypertext jumps. You associate your image with the map by referring to its name in the usemap attribute of the IMG tag.