doppelter GeoMover - HTML-Quelltext

Quelltext von geomover3a.html

index Anfang runter geomover1.html geomover1.html geomover3.html geomover.js
Dies ist die Auflistung der Datei geomover3a.html, die zwei Seitenelemente an der Fenstergeometrie ausrichtet.

Im folgenden Quelltext sind wichtige Bereiche rot und Kommentare grün markiert.
index Anfang hoch runter geomover1.html geomover1.html geomover3.html geomover.js 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<meta name="author" content="Ulrich Kritzner">
<meta name="robots" content="none">
<title>JavaScript - Geomover - Demo</title>

<!-- timer-Quelltext laden: (noetig weil drei geomover aktiv sind) -->
<script type="text/javascript" src="timer.js"></script>

<!-- GeoMover-Quelltext laden: -->
<script type="text/javascript" src="geomover.js"></script>

<script type="text/javascript">
<!--
var alldiv,edgediv,headdiv,leftdiv,iframeobj,ifrdoc;

function Init()
{
  GM1=new GeoMover(100,100,"edgediv",0,0,0,0,0);
  GM2=new GeoMover(100,100,"headdiv",-1,0,0,0,0);
  GM3=new GeoMover(100,100,"leftdiv",0,-1,0,0,0);
  GM1.Run();
  GM2.Run();
  GM3.Run();
  u_timer_start(100);
}
//-->
</script>

<style type="text/css">
body {margin:0px; padding:0px; font-family:sans-serif; width:96em;}
table.tab {margin:0px; padding:0px; border-collapse:collapse;}
td.edge {background:#DDDDFF; width:9em; height:2em; border:solid 1px black; margin:0px; padding:0px;}
td.head {background:#FFDDAA; width:11em; height:2em; border:solid 1px black; margin:0px; padding:0px;}
td.left {background:#DDFFAA; width:9em; height:4em; border:solid 1px black; margin:0px; padding:0px;}
td.elem {background:#FFFFFF; border:dotted 1px black; margin:0px; padding:0.5em; text-align:center; vertical-align:top}
td.copyright {background:#FFFFDD; border:solid 2px navy; margin:0px; padding:0.5em; text-align:center; vertical-align:center;}
div.edge {position:relative; width:9em; height:2em; margin:0px; padding:0.5em; text-align:center;}
div.head {position:relative; width:11em; height:2em; margin:0px; padding:0.5em; text-align:center;}
div.left {position:relative; width:9em; height:4em; margin:0px; padding:0.5em; text-align:center;}
</style>

</head>

<body onLoad="Init();">

<div id="edgediv" style="position:absolute; margin:0px; padding:0px; z-index:3;">
<table class="tab" cellpadding="0" callspacing="0" border="0">
<tr>
<td class="edge"><div class="edge">Beispiel3a</div></td>
</tr>
</table>
</div>

<div id="headdiv" style="position:absolute; margin:0px; padding:0px; z-index:2; width:98em;">
<table class="tab" cellpadding="0" callspacing="0" border="0">
<tr>
<td class="edge"><div class="edge">Beispiel3a</div></td>
<td class="head"><div class="head">Spalte 1</div></td>
<td class="head"><div class="head">Spalte 2</div></td>
<td class="head"><div class="head">Spalte 3</div></td>
<td class="head"><div class="head">Spalte 4</div></td>
<td class="head"><div class="head">Spalte 5</div></td>
<td class="head"><div class="head">Spalte 6</div></td>
<td class="head"><div class="head">Spalte 7</div></td>
<td class="head"><div class="head">Spalte 8</div></td>
</tr>
</table>
</div>

<div id="leftdiv" style="position:absolute; margin:0px; padding:0px; z-index:2;">
<table class="tab" cellpadding="0" callspacing="0" border="0">
<tr><td class="edge"><div class="edge">Beispiel3a</div></td></tr>
<tr><td class="left"><div class="left">Zeile 1</div></td></tr>
<tr><td class="left"><div class="left">Zeile 2</div></td></tr>
<tr><td class="left"><div class="left">Zeile 3</div></td></tr>
<tr><td class="left"><div class="left">Zeile 4</div></td></tr>
<tr><td class="left"><div class="left">Zeile 5</div></td></tr>
<tr><td class="left"><div class="left">Zeile 6</div></td></tr>
<tr><td class="left"><div class="left">Zeile 7</div></td></tr>
<tr><td class="left"><div class="left">Zeile 8</div></td></tr>
</table>
</div>

<div style="position:relative; margin:0px; padding:0px; z-index:1; width:98em;">
<table class="tab" cellpadding="0" callspacing="0" border="0">
<tr>
<td class="edge"><div class="edge">Beispiel3a</div></td>
<td class="head"><div class="head">Spalte 1</div></td>
<td class="head"><div class="head">Spalte 2</div></td>
<td class="head"><div class="head">Spalte 3</div></td>
<td class="head"><div class="head">Spalte 4</div></td>
<td class="head"><div class="head">Spalte 5</div></td>
<td class="head"><div class="head">Spalte 6</div></td>
<td class="head"><div class="head">Spalte 7</div></td>
<td class="head"><div class="head">Spalte 8</div></td>
</tr>
<tr>
<td class="left"><div class="left">Zeile 1</div></td>
<td class="elem">Element 1/1</td>
<td class="elem">Element 1/2</td>
<td class="elem">Element 1/3</td>
<td class="elem">Element 1/4</td>
<td class="elem">Element 1/5</td>
<td class="elem">Element 1/6</td>
<td class="elem">Element 1/7</td>
<td class="elem">Element 1/8</td>
</tr>
<tr>
<td class="left"><div class="left">Zeile 2</div></td>
<td class="elem">Element 2/1</td>
<td class="copyright" colspan="3" rowspan="3">
<h4>Demo zur Verwendung von "geomover.js"</h4>
<p>
(c) 2003 <a href="../../tohome.html" target="_top">Ulrich Kritzner</a>
<br>
die Verwendung von "geomover.js" in kommerziellen Seiten ist kostenpflichtig
<br>
<a href="index.html" target="_top">zur&uuml;ck zum Index</a>
</p>
</td>
<td class="elem">Element 2/5</td>
<td class="elem">Element 2/6</td>
<td class="elem">Element 2/7</td>
<td class="elem">Element 2/8</td>
</tr>
<tr>
<td class="left"><div class="left">Zeile 3</div></td>
<td class="elem">Element 3/1</td>
<td class="elem">Element 3/5</td>
<td class="elem">Element 3/6</td>
<td class="elem">Element 3/7</td>
<td class="elem">Element 3/8</td>
</tr>
<tr>
<td class="left"><div class="left">Zeile 4</div></td>
<td class="elem">Element 4/1</td>
<td class="elem">Element 4/5</td>
<td class="elem">Element 4/6</td>
<td class="elem">Element 4/7</td>
<td class="elem">Element 4/8</td>
</tr>
<tr>
<td class="left"><div class="left">Zeile 5</div></td>
<td class="elem">Element 5/1</td>
<td class="elem">Element 5/2</td>
<td class="elem">Element 5/3</td>
<td class="elem">Element 5/4</td>
<td class="elem">Element 5/5</td>
<td class="elem">Element 5/6</td>
<td class="elem">Element 5/7</td>
<td class="elem">Element 5/8</td>
</tr>
<tr>
<td class="left"><div class="left">Zeile 6</div></td>
<td class="elem">Element 6/1</td>
<td class="elem">Element 6/2</td>
<td class="elem">Element 6/3</td>
<td class="elem">Element 6/4</td>
<td class="elem">Element 6/5</td>
<td class="elem">Element 6/6</td>
<td class="elem">Element 6/7</td>
<td class="elem">Element 6/8</td>
</tr>
<tr>
<td class="left"><div class="left">Zeile 7</div></td>
<td class="elem">Element 7/1</td>
<td class="elem">Element 7/2</td>
<td class="elem">Element 7/3</td>
<td class="elem">Element 7/4</td>
<td class="elem">Element 7/5</td>
<td class="elem">Element 7/6</td>
<td class="elem">Element 7/7</td>
<td class="elem">Element 7/8</td>
</tr>
<tr>
<td class="left"><div class="left">Zeile 8</div></td>
<td class="elem">Element 8/1</td>
<td class="elem">Element 8/2</td>
<td class="elem">Element 8/3</td>
<td class="elem">Element 8/4</td>
<td class="elem">Element 8/5</td>
<td class="elem">Element 8/6</td>
<td class="elem">Element 8/7</td>
<td class="elem">Element 8/8</td>
</tr>
</table>
</div>

</body>
</html>
index Anfang hoch geomover1.html geomover1.html geomover3.html geomover.js
Autor: Ulrich Kritzner