comparison client/digitallibrary/digilib-new.html @ 392:20f6c41a3f69

interactive highlighting for new digilib
author hertzhaft
date Wed, 07 Dec 2005 18:51:11 +0100
parents
children b153f014e3c7
comparison
equal deleted inserted replaced
391:0ee258ca0a23 392:20f6c41a3f69
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
2
3 <html xmlns="http://www.w3.org/1999/xhtml">
4
5 <head>
6 <title>The new digilib</title>
7 <meta name="author" content="Martin Raspe" />
8 <meta name="date" content="07.12.2005, 19:14 h" />
9 <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1" />
10
11 <style type="text/css">
12 body { background-color: #E0E0E0; color: black; font-size: 8pt }
13 code { font-family: monospace; color: blue; }
14 pre { color: #006060; }
15 img.png { border: none; }
16 a.icon { margin: 0px; padding: 0px; }
17 div.button { margin: -4px; padding: 0px; }
18
19 </style>
20
21 <script language="JavaScript" src="baselib.js"></script>
22
23 <script language="JavaScript" src="dllib.js"></script>
24
25 <script language="JavaScript">
26
27 function highlightPNG(id, on) {
28 var elem = document.getElementById(id);
29 //var div = elem.parentNode.parentNode;
30 elem.style.backgroundImage = on
31 ? "url('corona.png')"
32 : null;
33 }
34
35 </script>
36 </head>
37
38 <body>
39
40 <div id="buttons"
41 <div class="button">
42 <a
43 class="icon"
44 href="javascript:showOptions(0);setMark()"
45 >
46
47 <img
48 class="png"
49 id="mark"
50 onmouseover="highlightPNG('mark', 1)"
51 onmouseout="highlightPNG('mark', 0)"
52 title="set a mark"
53 src="greyskin\mark.png"
54 >
55 </a>
56 </div>
57
58 <div class="button">
59 <a
60 class="icon"
61 href="javascript:removeMark()"
62 >
63
64 <img
65 class="png"
66 id="delmark"
67 onmouseover="highlightPNG('delmark', 1)"
68 onmouseout="highlightPNG('delmark', 0)"
69 title="delete the last mark"
70 src="greyskin\delmark.png"
71 >
72 </a>
73 </div>
74
75 <div class="button">
76 <a
77 class="icon"
78 href="javascript:getRefWin()"
79 >
80
81 <img
82 class="png"
83 id="reference"
84 onmouseover="highlightPNG('reference', 1)"
85 onmouseout="highlightPNG('reference', 0)"
86 title="get a reference URL"
87 src="greyskin\reference.png"
88 >
89 </a>
90 </div>
91
92 <div class="button">
93 <a
94 class="icon"
95 href="javascript:zoomBy(1.4)"
96 >
97
98 <img
99 class="png"
100 id="zoom-in"
101 onmouseover="highlightPNG('zoom-in', 1)"
102 onmouseout="highlightPNG('zoom-in', 0)"
103 title="zoom in"
104 src="greyskin\zoom-in.png"
105 >
106 </a>
107 </div>
108
109 <div class="button">
110 <a
111 class="icon"
112 href="javascript:zoomBy(0.7)"
113 >
114
115 <img
116 class="png"
117 id="zoom-out"
118 onmouseover="highlightPNG('zoom-out', 1)"
119 onmouseout="highlightPNG('zoom-out', 0)"
120 title="zoom out"
121 src="greyskin\zoom-out.png"
122 >
123 </a>
124 </div>
125
126 <div class="button">
127 <a
128 class="icon"
129 href="javascript:showOptions(0);zoomArea()"
130 >
131
132 <img
133 class="png"
134 id="zoom-area"
135 onmouseover="highlightPNG('zoom-area', 1)"
136 onmouseout="highlightPNG('zoom-area', 0)"
137 title="zoom area"
138 src="greyskin\zoom-area.png"
139 >
140 </a>
141 </div>
142
143 <div class="button">
144 <a
145 class="icon"
146 href="javascript:zoomFullpage()"
147 >
148
149 <img
150 class="png"
151 id="zoom-full"
152 onmouseover="highlightPNG('zoom-full', 1)"
153 onmouseout="highlightPNG('zoom-full', 0)"
154 title="view the whole image"
155 src="greyskin\zoom-full.png"
156 >
157 </a>
158 </div>
159
160 <div class="button">
161 <a
162 class="icon"
163 href="javascript:mirror('h')"
164 >
165
166 <img
167 class="png"
168 id="mirror-h"
169 onmouseover="highlightPNG('mirror-h', 1)"
170 onmouseout="highlightPNG('mirror-h', 0)"
171 title="mirror horizontally"
172 src="greyskin\mirror-horizontal.png"
173 >
174 </a>
175 </div>
176
177 <div class="button">
178 <a
179 class="icon"
180 href="javascript:mirror('v')"
181 >
182
183 <img
184 class="png"
185 id="mirror-v"
186 onmouseover="highlightPNG('mirror-v', 1)"
187 onmouseout="highlightPNG('mirror-v', 0)"
188 title="mirror vertically"
189 src="greyskin\mirror-vertical.png"
190 >
191 </a>
192 </div>
193
194 <div class="button">
195 <a
196 class="icon"
197 href="javascript:setParamWin('rot', 'Rotate (0..360) clockwise')"
198 >
199
200 <img
201 class="png"
202 id="rotate"
203 onmouseover="highlightPNG('rotate', 1)"
204 onmouseout="highlightPNG('rotate', 0)"
205 title="rotate image"
206 src="greyskin\rotate.png"
207 >
208 </a>
209 </div>
210
211 <div class="button">
212 <a
213 class="icon"
214 href="javascript:setParamWin('brgt', 'Brightness (-255..255)')"
215 >
216
217 <img
218 class="png"
219 id="brightness"
220 onmouseover="highlightPNG('brightness', 1)"
221 onmouseout="highlightPNG('brightness', 0)"
222 title="set brightness"
223 src="greyskin\brightness.png"
224 >
225 </a>
226 </div>
227
228 <div class="button">
229 <a
230 class="icon"
231 href="javascript:setParamWin('cont', 'Contrast (0..8)')"
232 >
233
234 <img
235 class="png"
236 id="contrast"
237 onmouseover="highlightPNG('contrast', 1)"
238 onmouseout="highlightPNG('contrast', 0)"
239 title="set contrast"
240 src="greyskin\contrast.png"
241 >
242 </a>
243 </div>
244
245 <div class="button">
246 <a
247 class="icon"
248 href="javascript:setParamWin('rgb', '...')"
249 >
250
251 <img
252 class="png"
253 id="rgb"
254 onmouseover="highlightPNG('rgb', 1)"
255 onmouseout="highlightPNG('rgb', 0)"
256 title="set rgb values"
257 src="greyskin\rgb.png"
258 >
259 </a>
260 </div>
261
262 <div class="button">
263 <a
264 class="icon"
265 href="javascript:setParamWin('size', '...')"
266 >
267
268 <img
269 class="png"
270 id="size"
271 onmouseover="highlightPNG('size', 1)"
272 onmouseout="highlightPNG('size', 0)"
273 title="resize page"
274 src="greyskin\size.png"
275 >
276 </a>
277 </div>
278
279 <div class="button">
280 <a
281 class="icon"
282 href="javascript:setQualityWin('Quality (0..2)')"
283 >
284
285 <img
286 class="png"
287 id="quality"
288 onmouseover="highlightPNG('quality', 1)"
289 onmouseout="highlightPNG('quality', 0)"
290 title="set image quality"
291 src="greyskin\quality.png"
292 >
293 </a>
294 </div>
295
296 <div class="button">
297 <a
298 class="icon"
299 href="javascript:gotoPage('-1')"
300 >
301
302 <img
303 class="png"
304 id="back"
305 onmouseover="highlightPNG('back', 1)"
306 onmouseout="highlightPNG('back', 0)"
307 title="goto previous image"
308 src="greyskin\back.png"
309 >
310 </a>
311 </div>
312
313 <div class="button">
314 <a
315 class="icon"
316 href="javascript:gotoPage('+1')"
317 >
318
319 <img
320 class="png"
321 id="fwd"
322 onmouseover="highlightPNG('fwd', 1)"
323 onmouseout="highlightPNG('fwd', 0)"
324 title="goto next image"
325 src="greyskin\fwd.png"
326 >
327 </a>
328 </div>
329
330 <div class="button">
331 <a
332 class="icon"
333 href="javascript:gotoPageWin()"
334 >
335
336 <img
337 class="png"
338 id="page"
339 onmouseover="highlightPNG('page', 1)"
340 onmouseout="highlightPNG('page', 0)"
341 title="specify image"
342 src="greyskin\page.png"
343 >
344 </a>
345 </div>
346
347 <div class="button">
348 <a
349 class="icon"
350 href="javascript:help()"
351 >
352
353 <img
354 class="png"
355 id="help"
356 onmouseover="highlightPNG('help', 1)"
357 onmouseout="highlightPNG('help', 0)"
358 title="help"
359 src="greyskin\help.png"
360 >
361 </a>
362 </div>
363
364 </div>
365
366 </body>