Mercurial > hg > digilib-old

comparison client/digitallibrary/greyskin/diginew.jsp @ 401:dbeb240fa170

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
use css-only highlight on buttons fix red div for zoom area
author robcast
date Fri, 09 Dec 2005 12:09:12 +0100
parents be66c85821ff
children 395db075906d
comparison
equal deleted inserted replaced
400:be66c85821ff 401:dbeb240fa170
43 pre { color: #006060; } 43 pre { color: #006060; }
44 44
45 a.icon { margin: 0px; padding: 0px; } 45 a.icon { margin: 0px; padding: 0px; }
46 46
47 img.png { border: none; } 47 img.png { border: none; }
48 img.png:hover { background-image: url('corona.png'); }
48 img.mark { border: none; } 49 img.mark { border: none; }
49 50
50 div.button { padding: 0px; } 51 div.button { padding: 0px; }
51 div.dot { position: absolute; left: -20; top: 100; visibility: hidden } 52 div.dot { position: absolute; left: -20; top: 100; visibility: hidden }
52 div#scaler-table { padding-right: 40px; } 53 div#scaler-table { padding-right: 40px; }
53 54
54 div#buttons { position: absolute; right: 5px; top: 5px; background-color: #E0E0E0; } 55 div#buttons { position: absolute; right: 5px; top: 5px; background-color: #E0E0E0; }
55 div#dloptions { position: absolute; right: 5px; top: 5px; background-color: #E0E0E0; visibility: hidden; } 56 div#dloptions { position: absolute; right: 5px; top: 5px; background-color: #E0E0E0; visibility: hidden; }
56 div#zoom { position: absolute; border: 2px solid #f0cccc; visibility: hidden; } 57 div#zoom { position: absolute; border: 2px solid red; visibility: hidden; }
57 58
58 </style> 59 </style>
59 60
60 <script type="text/javascript" src="baselib.js"></script> 61 <script type="text/javascript" src="baselib.js"></script>
61 62
156 > 157 >
157 158
158 <img 159 <img
159 class="png" 160 class="png"
160 id="reference" 161 id="reference"
161 onmouseover="highlightPNG('reference', 1)" 162
162 onmouseout="highlightPNG('reference', 0)"
163 title="get a reference URL" 163 title="get a reference URL"
164 src="reference.png" 164 src="reference.png"
165 > 165 >
166 </a> 166 </a>
167 </div> 167 </div>
173 > 173 >
174 174
175 <img 175 <img
176 class="png" 176 class="png"
177 id="zoom-in" 177 id="zoom-in"
178 onmouseover="highlightPNG('zoom-in', 1)" 178
179 onmouseout="highlightPNG('zoom-in', 0)"
180 title="zoom in" 179 title="zoom in"
181 src="zoom-in.png" 180 src="zoom-in.png"
182 > 181 >
183 </a> 182 </a>
184 </div> 183 </div>
190 > 189 >
191 190
192 <img 191 <img
193 class="png" 192 class="png"
194 id="zoom-out" 193 id="zoom-out"
195 onmouseover="highlightPNG('zoom-out', 1)" 194
196 onmouseout="highlightPNG('zoom-out', 0)"
197 title="zoom out" 195 title="zoom out"
198 src="zoom-out.png" 196 src="zoom-out.png"
199 > 197 >
200 </a> 198 </a>
201 </div> 199 </div>
202 200
203 <div class="button"> 201 <div class="button">
204 <a 202 <a
205 class="icon" 203 class="icon"
206 href="javascript:showOptions(0);zoomArea()" 204 href="javascript:zoomArea()"
207 > 205 >
208 206
209 <img 207 <img
210 class="png" 208 class="png"
211 id="zoom-area" 209 id="zoom-area"
212 onmouseover="highlightPNG('zoom-area', 1)" 210
213 onmouseout="highlightPNG('zoom-area', 0)"
214 title="zoom area" 211 title="zoom area"
215 src="zoom-area.png" 212 src="zoom-area.png"
216 > 213 >
217 </a> 214 </a>
218 </div> 215 </div>
224 > 221 >
225 222
226 <img 223 <img
227 class="png" 224 class="png"
228 id="zoom-full" 225 id="zoom-full"
229 onmouseover="highlightPNG('zoom-full', 1)" 226
230 onmouseout="highlightPNG('zoom-full', 0)"
231 title="view the whole image" 227 title="view the whole image"
232 src="zoom-full.png" 228 src="zoom-full.png"
233 > 229 >
234 </a> 230 </a>
235 </div> 231 </div>
241 > 237 >
242 238
243 <img 239 <img
244 class="png" 240 class="png"
245 id="back" 241 id="back"
246 onmouseover="highlightPNG('back', 1)" 242
247 onmouseout="highlightPNG('back', 0)"
248 title="goto previous image" 243 title="goto previous image"
249 src="back.png" 244 src="back.png"
250 > 245 >
251 </a> 246 </a>
252 </div> 247 </div>
258 > 253 >
259 254
260 <img 255 <img
261 class="png" 256 class="png"
262 id="fwd" 257 id="fwd"
263 onmouseover="highlightPNG('fwd', 1)" 258
264 onmouseout="highlightPNG('fwd', 0)"
265 title="goto next image" 259 title="goto next image"
266 src="fwd.png" 260 src="fwd.png"
267 > 261 >
268 </a> 262 </a>
269 </div> 263 </div>
275 > 269 >
276 270
277 <img 271 <img
278 class="png" 272 class="png"
279 id="help" 273 id="help"
280 onmouseover="highlightPNG('help', 1)" 274
281 onmouseout="highlightPNG('help', 0)"
282 title="help" 275 title="help"
283 src="help.png" 276 src="help.png"
284 > 277 >
285 </a> 278 </a>
286 </div> 279 </div>
292 > 285 >
293 286
294 <img 287 <img
295 class="png" 288 class="png"
296 id="options" 289 id="options"
297 onmouseover="highlightPNG('options', 1)" 290
298 onmouseout="highlightPNG('options', 0)"
299 title="more options" 291 title="more options"
300 src="options.png" 292 src="options.png"
301 > 293 >
302 </a> 294 </a>
303 </div> 295 </div>
308 300
309 <div id="dloptions"> 301 <div id="dloptions">
310 <div class="button"> 302 <div class="button">
311 <a 303 <a
312 class="icon" 304 class="icon"
313 href="javascript:showOptions(0);setMark()" 305 href="javascript:setMark()"
314 > 306 >
315 307
316 <img 308 <img
317 class="png" 309 class="png"
318 id="mark" 310 id="mark"
319 onmouseover="highlightPNG('mark', 1)" 311
320 onmouseout="highlightPNG('mark', 0)"
321 title="set a mark" 312 title="set a mark"
322 src="mark.png" 313 src="mark.png"
323 > 314 >
324 </a> 315 </a>
325 </div> 316 </div>
331 > 322 >
332 323
333 <img 324 <img
334 class="png" 325 class="png"
335 id="delmark" 326 id="delmark"
336 onmouseover="highlightPNG('delmark', 1)" 327
337 onmouseout="highlightPNG('delmark', 0)"
338 title="delete the last mark" 328 title="delete the last mark"
339 src="delmark.png" 329 src="delmark.png"
340 > 330 >
341 </a> 331 </a>
342 </div> 332 </div>
348 > 338 >
349 339
350 <img 340 <img
351 class="png" 341 class="png"
352 id="mirror-h" 342 id="mirror-h"
353 onmouseover="highlightPNG('mirror-h', 1)" 343
354 onmouseout="highlightPNG('mirror-h', 0)"
355 title="mirror horizontally" 344 title="mirror horizontally"
356 src="mirror-horizontal.png" 345 src="mirror-horizontal.png"
357 > 346 >
358 </a> 347 </a>
359 </div> 348 </div>
365 > 354 >
366 355
367 <img 356 <img
368 class="png" 357 class="png"
369 id="mirror-v" 358 id="mirror-v"
370 onmouseover="highlightPNG('mirror-v', 1)" 359
371 onmouseout="highlightPNG('mirror-v', 0)"
372 title="mirror vertically" 360 title="mirror vertically"
373 src="mirror-vertical.png" 361 src="mirror-vertical.png"
374 > 362 >
375 </a> 363 </a>
376 </div> 364 </div>
382 > 370 >
383 371
384 <img 372 <img
385 class="png" 373 class="png"
386 id="rotate" 374 id="rotate"
387 onmouseover="highlightPNG('rotate', 1)" 375
388 onmouseout="highlightPNG('rotate', 0)"
389 title="rotate image" 376 title="rotate image"
390 src="rotate.png" 377 src="rotate.png"
391 > 378 >
392 </a> 379 </a>
393 </div> 380 </div>
399 > 386 >
400 387
401 <img 388 <img
402 class="png" 389 class="png"
403 id="brightness" 390 id="brightness"
404 onmouseover="highlightPNG('brightness', 1)" 391
405 onmouseout="highlightPNG('brightness', 0)"
406 title="set brightness" 392 title="set brightness"
407 src="brightness.png" 393 src="brightness.png"
408 > 394 >
409 </a> 395 </a>
410 </div> 396 </div>
416 > 402 >
417 403
418 <img 404 <img
419 class="png" 405 class="png"
420 id="contrast" 406 id="contrast"
421 onmouseover="highlightPNG('contrast', 1)" 407
422 onmouseout="highlightPNG('contrast', 0)"
423 title="set contrast" 408 title="set contrast"
424 src="contrast.png" 409 src="contrast.png"
425 > 410 >
426 </a> 411 </a>
427 </div> 412 </div>
433 > 418 >
434 419
435 <img 420 <img
436 class="png" 421 class="png"
437 id="rgb" 422 id="rgb"
438 onmouseover="highlightPNG('rgb', 1)" 423
439 onmouseout="highlightPNG('rgb', 0)"
440 title="set rgb values" 424 title="set rgb values"
441 src="rgb.png" 425 src="rgb.png"
442 > 426 >
443 </a> 427 </a>
444 </div> 428 </div>
450 > 434 >
451 435
452 <img 436 <img
453 class="png" 437 class="png"
454 id="size" 438 id="size"
455 onmouseover="highlightPNG('size', 1)" 439
456 onmouseout="highlightPNG('size', 0)"
457 title="resize page" 440 title="resize page"
458 src="size.png" 441 src="size.png"
459 > 442 >
460 </a> 443 </a>
461 </div> 444 </div>
467 > 450 >
468 451
469 <img 452 <img
470 class="png" 453 class="png"
471 id="quality" 454 id="quality"
472 onmouseover="highlightPNG('quality', 1)" 455
473 onmouseout="highlightPNG('quality', 0)"
474 title="set image quality" 456 title="set image quality"
475 src="quality.png" 457 src="quality.png"
476 > 458 >
477 </a> 459 </a>
478 </div> 460 </div>
484 > 466 >
485 467
486 <img 468 <img
487 class="png" 469 class="png"
488 id="page" 470 id="page"
489 onmouseover="highlightPNG('page', 1)" 471
490 onmouseout="highlightPNG('page', 0)"
491 title="specify image" 472 title="specify image"
492 src="page.png" 473 src="page.png"
493 > 474 >
494 </a> 475 </a>
495 </div> 476 </div>
501 > 482 >
502 483
503 <img 484 <img
504 class="png" 485 class="png"
505 id="pixel-by-pixel" 486 id="pixel-by-pixel"
506 onmouseover="highlightPNG('pixel-by-pixel', 1)" 487
507 onmouseout="highlightPNG('pixel-by-pixel', 0)"
508 title="view image pixel by pixel" 488 title="view image pixel by pixel"
509 src="pixel-by-pixel.png" 489 src="pixel-by-pixel.png"
510 > 490 >
511 </a> 491 </a>
512 </div> 492 </div>
518 > 498 >
519 499
520 <img 500 <img
521 class="png" 501 class="png"
522 id="original-size" 502 id="original-size"
523 onmouseover="highlightPNG('original-size', 1)" 503
524 onmouseout="highlightPNG('original-size', 0)"
525 title="view image in original size" 504 title="view image in original size"
526 src="original-size.png" 505 src="original-size.png"
527 > 506 >
528 </a> 507 </a>
529 </div> 508 </div>
535 > 514 >
536 515
537 <img 516 <img
538 class="png" 517 class="png"
539 id="options-1" 518 id="options-1"
540 onmouseover="highlightPNG('options-1', 1)" 519
541 onmouseout="highlightPNG('options-1', 0)"
542 title="hide options" 520 title="hide options"
543 src="options.png" 521 src="options.png"
544 > 522 >
545 </a> 523 </a>
546 </div> 524 </div>