Blame view

site/jpgraph/docs/chunkhtml/ch10s02.html 3.88 KB
d72ac078   Guillaume   Ajout graphe V1.1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
  <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"
  &lt;MAP NAME=...&gt;
  ... specification ...
  &lt;/MAP&gt;
  
  // Image tag
  &lt;img src="..." ISMAP USEMAP="mapname"&gt;
  </pre><p>
              </p>
              <p>This poses an interesting question. Since we normally call the graphing script
                  directly in the <span class="markup">&lt;img&gt;</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"> &lt;IMG&gt;</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">&lt;IMG&gt;</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>