changeset 392:20f6c41a3f69

interactive highlighting for new digilib
author hertzhaft
date Wed, 07 Dec 2005 18:51:11 +0100
parents 0ee258ca0a23
children 8a9fd4d64ea7
files client/digitallibrary/digilib-new.html
diffstat 1 files changed, 366 insertions(+), 0 deletions(-) [+]
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/digitallibrary/digilib-new.html	Wed Dec 07 18:51:11 2005 +0100
@@ -0,0 +1,366 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd"> 
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+<head>
+	<title>The new digilib</title>
+	<meta name="author" content="Martin Raspe" />
+	<meta name="date" content="07.12.2005, 19:14 h" />
+	<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1" />
+	
+	<style type="text/css">
+		body		{ background-color: #E0E0E0; color: black; font-size: 8pt }
+		code		{ font-family: monospace; color: blue; }
+		pre		{ color: #006060; }
+		img.png 	{ border: none; }
+		a.icon		{ margin: 0px; padding: 0px; }
+		div.button	{ margin: -4px; padding: 0px; }
+		
+	</style>
+	
+	<script language="JavaScript" src="baselib.js"></script>
+
+	<script language="JavaScript" src="dllib.js"></script>
+	
+	<script language="JavaScript">
+
+		function highlightPNG(id, on) {
+			var elem = document.getElementById(id);
+			//var div  = elem.parentNode.parentNode;
+			elem.style.backgroundImage = on 
+				? "url('corona.png')"
+				: null;
+		}
+
+	</script>
+</head>
+
+<body>
+
+<div id="buttons" 
+	<div class="button">
+		<a
+			class="icon"
+			href="javascript:showOptions(0);setMark()"
+			>
+
+			<img
+				class="png"
+				id="mark"
+				onmouseover="highlightPNG('mark', 1)"
+				onmouseout="highlightPNG('mark', 0)"
+				title="set a mark"
+				src="greyskin\mark.png"
+			>
+		</a> 
+	</div>
+	
+	<div class="button">
+		<a
+			class="icon"
+			href="javascript:removeMark()"
+			>
+
+			<img
+				class="png"
+				id="delmark"
+				onmouseover="highlightPNG('delmark', 1)"
+				onmouseout="highlightPNG('delmark', 0)"
+				title="delete the last mark"
+				src="greyskin\delmark.png"
+				>
+		</a> 
+	</div>
+	
+	<div class="button">
+		<a
+			class="icon"
+			href="javascript:getRefWin()"
+			>
+
+			<img
+				class="png"
+				id="reference"
+				onmouseover="highlightPNG('reference', 1)"
+				onmouseout="highlightPNG('reference', 0)"
+				title="get a reference URL"
+				src="greyskin\reference.png"
+			>
+		</a> 
+	</div>
+	
+	<div class="button">
+		<a
+			class="icon"
+			href="javascript:zoomBy(1.4)"
+			>
+
+			<img
+				class="png"
+				id="zoom-in"
+				onmouseover="highlightPNG('zoom-in', 1)"
+				onmouseout="highlightPNG('zoom-in', 0)"
+				title="zoom in"
+				src="greyskin\zoom-in.png"
+			>
+	</a> 
+	</div>
+	
+	<div class="button">
+		<a
+			class="icon"
+			href="javascript:zoomBy(0.7)"
+			>
+
+			<img
+				class="png"
+				id="zoom-out"
+				onmouseover="highlightPNG('zoom-out', 1)"
+				onmouseout="highlightPNG('zoom-out', 0)"
+				title="zoom out"
+				src="greyskin\zoom-out.png"
+			>
+	</a> 
+	</div>
+	
+	<div class="button">
+		<a
+			class="icon"
+			href="javascript:showOptions(0);zoomArea()"
+			>
+
+			<img
+				class="png"
+				id="zoom-area"
+				onmouseover="highlightPNG('zoom-area', 1)"
+				onmouseout="highlightPNG('zoom-area', 0)"
+				title="zoom area"
+				src="greyskin\zoom-area.png"
+			>
+		</a> 
+	</div>
+	
+	<div class="button">
+		<a
+			class="icon"
+			href="javascript:zoomFullpage()"
+			>
+
+			<img
+				class="png"
+				id="zoom-full"
+				onmouseover="highlightPNG('zoom-full', 1)"
+				onmouseout="highlightPNG('zoom-full', 0)"
+				title="view the whole image"
+				src="greyskin\zoom-full.png"
+			>
+	</a> 
+	</div>
+	
+	<div class="button">
+		<a
+			class="icon"
+			href="javascript:mirror('h')"
+			>
+
+			<img
+				class="png"
+				id="mirror-h"
+				onmouseover="highlightPNG('mirror-h', 1)"
+				onmouseout="highlightPNG('mirror-h', 0)"
+				title="mirror horizontally"
+				src="greyskin\mirror-horizontal.png"
+			>
+		</a>
+	</div>
+	
+	<div class="button">
+		<a
+			class="icon"
+			href="javascript:mirror('v')"
+			>
+
+			<img
+				class="png"
+				id="mirror-v"
+				onmouseover="highlightPNG('mirror-v', 1)"
+				onmouseout="highlightPNG('mirror-v', 0)"
+				title="mirror vertically"
+				src="greyskin\mirror-vertical.png"
+			>
+		</a>
+	</div>
+	
+	<div class="button">
+		<a
+			class="icon"
+			href="javascript:setParamWin('rot', 'Rotate (0..360) clockwise')"
+			>
+
+			<img
+				class="png"
+				id="rotate"
+				onmouseover="highlightPNG('rotate', 1)"
+				onmouseout="highlightPNG('rotate', 0)"
+				title="rotate image"
+				src="greyskin\rotate.png"
+			>
+		</a>
+	</div>
+	
+	<div class="button">
+		<a
+			class="icon"
+			href="javascript:setParamWin('brgt', 'Brightness (-255..255)')"
+			>
+
+			<img
+				class="png"
+				id="brightness"
+				onmouseover="highlightPNG('brightness', 1)"
+				onmouseout="highlightPNG('brightness', 0)"
+				title="set brightness"
+				src="greyskin\brightness.png"
+			>
+		</a>
+	</div>
+	
+	<div class="button">
+		<a
+			class="icon"
+			href="javascript:setParamWin('cont', 'Contrast (0..8)')"
+			>
+
+			<img
+				class="png"
+				id="contrast"
+				onmouseover="highlightPNG('contrast', 1)"
+				onmouseout="highlightPNG('contrast', 0)"
+				title="set contrast"
+				src="greyskin\contrast.png"
+			>
+		</a>
+	</div>
+	
+	<div class="button">
+		<a
+			class="icon"
+			href="javascript:setParamWin('rgb', '...')"
+			>
+
+			<img
+				class="png"
+				id="rgb"
+				onmouseover="highlightPNG('rgb', 1)"
+				onmouseout="highlightPNG('rgb', 0)"
+				title="set rgb values"
+				src="greyskin\rgb.png"
+			>
+		</a>
+	</div>
+	
+	<div class="button">
+		<a
+			class="icon"
+			href="javascript:setParamWin('size', '...')"
+			>
+
+			<img
+				class="png"
+				id="size"
+				onmouseover="highlightPNG('size', 1)"
+				onmouseout="highlightPNG('size', 0)"
+				title="resize page"
+				src="greyskin\size.png"
+			>
+		</a>
+	</div>
+	
+	<div class="button">
+		<a
+			class="icon"
+			href="javascript:setQualityWin('Quality (0..2)')"
+			>
+
+			<img
+				class="png"
+				id="quality"
+				onmouseover="highlightPNG('quality', 1)"
+				onmouseout="highlightPNG('quality', 0)"
+				title="set image quality"
+				src="greyskin\quality.png"
+			>
+		</a>
+	</div>
+	
+	<div class="button">
+		<a
+			class="icon"
+			href="javascript:gotoPage('-1')"
+			>
+
+			<img
+				class="png"
+				id="back"
+				onmouseover="highlightPNG('back', 1)"
+				onmouseout="highlightPNG('back', 0)"
+				title="goto previous image"
+				src="greyskin\back.png"
+			>
+	</a>
+	</div>
+	
+	<div class="button">
+		<a
+			class="icon"
+			href="javascript:gotoPage('+1')"
+			>
+
+			<img
+				class="png"
+				id="fwd"
+				onmouseover="highlightPNG('fwd', 1)"
+				onmouseout="highlightPNG('fwd', 0)"
+				title="goto next image"
+				src="greyskin\fwd.png"
+			>
+	</a>
+	</div>
+	
+	<div class="button">
+		<a
+			class="icon"
+			href="javascript:gotoPageWin()"
+			>
+
+			<img
+				class="png"
+				id="page"
+				onmouseover="highlightPNG('page', 1)"
+				onmouseout="highlightPNG('page', 0)"
+				title="specify image"
+				src="greyskin\page.png"
+			>
+	</a>
+	</div>
+	
+	<div class="button">
+		<a
+			class="icon"
+			href="javascript:help()"
+			>
+
+			<img
+				class="png"
+				id="help"
+				onmouseover="highlightPNG('help', 1)"
+				onmouseout="highlightPNG('help', 0)"
+				title="help"
+				src="greyskin\help.png"
+			>
+		</a>
+	</div>
+	
+</div>
+
+</body>
\ No newline at end of file