Mercurial > hg > digilib-old
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> |