<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>The basic structure of an image map script</title><link rel="stylesheet" type="text/css" href="manual.css"><meta name="generator" content="DocBook XSL Stylesheets V1.76.0"><link rel="home" href="index.html" title="JpGraph Manual"><link rel="up" href="ch10.html" title="Chapter 10. Using CSIM (Client side image maps)"></head><body bgcolor="white" text="black" link="#0000FF" vlink="#840084" alink="#0000FF"><div class="navheader"><table width="100%" summary="Navigation header"><tr><th colspan="3" align="center">The basic structure of an image map script</th></tr><tr><td width="20%" align="left"> </td><th width="60%" align="center">Chapter 10. Using CSIM (Client side image maps)</th><td width="20%" align="right"> </td></tr></table><hr></div><div class="sect1" title="The basic structure of an image map script"><div class="titlepage"><div><div><h2 class="title" style="clear: both"><a name="id2535815"></a>The basic structure of an image map script</h2></div></div></div>
<p>The basic structure for a HTML page using client side image maps will have the
following layout</p>
<p>
</p><pre class="screen">// Image map specification with name "mapname"
<MAP NAME=...>
... specification ...
</MAP>
// Image tag
<img src="..." ISMAP USEMAP="mapname">
</pre><p>
</p>
<p>This poses an interesting question. Since we normally call the graphing script
directly in the <span class="markup"><img></span> tag how do we get hold of the image map
(which is available only in the image script) in this "HTML wrapper" script?</p>
<p>In JpGraph there is actually two ways of solving this.</p>
<p>
</p><div class="orderedlist"><ol class="orderedlist" type="1"><li class="listitem">
<p>Use the preferred "builtin" way using the modified
<code class="code">Stroke()</code> method <code class="code">StrokeCSIM()</code> instead of
the standard <code class="code">Graph::Stroke()</code> method.</p>
</li><li class="listitem">
<p>Directly use the <code class="code">Graph::GetHTMLImageMap()</code> which gives you
fine control at the expense of more complex coding. This is necessary if
several image map graphs are needed on the same page.</p>
</li></ol></div><p>
</p>
<p>The first (and preferred) way modifies the stroke method so that instead of
returning an image (like the standard <code class="code">Stroke()</code> method)
<code class="code">StrokeCSIM()</code> actually returns an HTML page containing both the
image map specification and the correct<code class="code"> <IMG></code> tag.</p>
<p>This means that it is necessary to treat an image map returning image script
differently from a non-CSIM image script, for example it is not posible to use it
directly as the target for the "<code class="code">src</code>" attribute of the
<span class="markup"><IMG></span> tag since it sends back a HTML page containing both an
image tag together with an image map.</p>
</div><div class="navfooter"><hr><table width="100%" summary="Navigation footer"><tr><td width="40%" align="left"> </td><td width="20%" align="center"><a accesskey="u" href="ch10.html">Up</a></td><td width="40%" align="right"> </td></tr><tr><td width="40%" align="left" valign="top"> </td><td width="20%" align="center"><a accesskey="h" href="index.html">Home</a></td><td width="40%" align="right" valign="top"> </td></tr></table></div></body></html>