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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
|
<!doctype html public "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<head>
<title>WN Clickable Image Examples</title>
<link rev="made" href="mailto:john@math.nwu.edu">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="last-modified" content="Sun, 10 May 1998 18:07:18 GMT">
<meta http-equiv="keywords" content="WN clickable image example">
</head>
<body bgcolor="#FFFFFF">
<p>
<a href="http://hopf.math.nwu.edu/"><img
src="../images/powered.jpg"
border="0"
width="190"
height="41"
align="right"
alt="WN home page"
></a>
</p>
<strong>Version 2.0.0</strong>
<br>
<!-- pnuts --> <a href="index.html">[Up]</a> <a href="../index.html">[Top]</a>
<br clear="right">
<hr size="4">
<h2 align="center"><em>WN</em> Clickable Image Examples</h2>
<hr size="4">
<p>
As of version 1.07 the <em>WN</em> server has built in support for
clickable images. You no longer need to compile and use the <a
href="http://hoohoo.ncsa.uiuc.edu/docs/tutorials/imagemap.txt">NCSA C
<code>imagemap.c</code> program</a>. This page illustrates the new
<em>WN</em> functionality with two examples. If you want to set up your
own imagemaps you should read the chapter "<a
href="../click.html">Clickable Images and Imagemap files on the
<em>WN</em> Server</a>" from the "<a href="../manual.html">User's Guide
for the <em>WN</em> Server</a>".
</p>
<h3>1 <a name="shape">A Simple Example Using the Shape Method</a></h3>
<center>
<a href="shape.map"><img src="shape.gif" alt="Imagemap Shape Example"
width="245" height="164" ismap></a>
</center>
<p>
Here is a very simple sample of the <em>WN</em> clickable image
capability. Click in the box with the picture above and the server will
produce a response indicating in which area you clicked.
</p>
<p>
In order to create such a clickable image you must create a file called a
"<a href="../click.html#format">map file</a>" telling the server which
coordinates in the image correspond to which document. The format of
this file is the same as that used with the <a
href="http://hoohoo.ncsa.uiuc.edu/docs/tutorials/imagemap.txt">NCSA C
<code>imagemap.c</code> program</a> (with a few minor enhancements).
</p>
<h4>1.1 <a name="shape.map">The Map File <code>shape.map</code></a></h4>
<p>
The map file for this example contains the following:
</p>
<blockquote>
<pre>
<!-- #include -->
</pre>
</blockquote>
<p>
In this example all the URL's refer to the file <code>shape.html</code>
with a different "query" (the stuff after the ?). Then <em>WN</em>'s
conditional text gives a different response for each request. In real
life each of the URL's would probably refer to a different document.
</p>
<p>
In general these can be arbitrary URLs in one of three formats: Either
full, as in <code>http://webhost/docs/shape.html</code> or local as
in <code>/docs/shape.html</code> or relative as in
<code>shape.html</code> This last form is not supported by other
imagemap handlers, so should not be used if you plan to move your work to
a non-<em>WN</em> system. It refers to a document in the same directory
as the map file.
</p>
<h4>1.2 <a name="shape.index">The <code>index</code> File Entries</a></h4>
<p>
The <code>index</code> file entries for this example are:
</p>
<blockquote>
<code>
<a href="../appendixB.html#fdir.file">File=</a>shape.gif
<br>
<br>
<a href="../appendixB.html#fdir.file">File=</a>shape.html
<br>
<a href="../appendixB.html#fdir.attributes">Attributes=</a>parse
<br>
<br>
<a href="../appendixB.html#fdir.file">File=</a>shape.map
<br>
<a href="../appendixB.html#fdir.attributes">Attributes=</a>imagemap
</code>
</blockquote>
<h3>2 <a name="point">A Simple Example Using the Point Method</a></h3>
<center>
<a href="points.map"><img src="points.gif" alt="Imagemap Point Example"
width="229" height="148" ismap></a>
</center>
<p>
Click in the box with the dots above and a response will tell you the
color of the dot closest to the point where you clicked.
</p>
<h4>2.1 <a name="point.map">The Map File <code>points.map</code></a></h4>
<p>
The map file for this example contains:
</p>
<blockquote>
<pre>
<!-- #include -->
</pre>
</blockquote>
<h4>2.2 <a name="point.index">The <code>index</code> File Entries</a></h4>
<p>
The index file entries for this example are:
</p>
<blockquote>
<code>
<a href="../appendixB.html#fdir.file">File=</a>points.gif
<br>
<br>
<a href="../appendixB.html#fdir.file">File=</a>points.html
<br>
<a href="../appendixB.html#fdir.attributes">Attributes=</a>parse
<br>
<br>
<a href="../appendixB.html#fdir.file">File=</a>points.map
<br>
<a href="../appendixB.html#fdir.attributes">Attributes=</a>imagemap
<br>
</code>
</blockquote>
<p>
Of course you can use the point method and the shape methods in the same
map file. When you do this the point method acts like a default. That
is, if any of the methods "rect", "circle", or "poly" succeed the URL
corresponding to the first to do so will be returned. Otherwise the URL
corresponding to the closest point to the click location will be
returned.
</p>
<hr size="4">
<address>
<em>WN</em> version 2.0.0
<br>
Copyright © 1998 <a href="mailto:john@math.nwu.edu">John Franks
<john@math.nwu.edu></a>
<br>
licensed under the <a href="http://www.gnu.org/copyleft/gpl.html">GNU
General Public License</a>
<br>
last-modified: Sun, 10 May 1998 18:07:18 GMT
</address>
<!-- pnuts --><a href="index.html">[Up]</a> <a href="../index.html">[Top]</a>
</body>
</html>
|
