view 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
line wrap: on
line source

<!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>