MouseMover1 - HTML-Quelltext

Quelltext von mousemover1.html

index Anfang runter mousemover.js mousemover2.html
Dies ist die Auflistung der Datei mousemover1.html, die drei div-Sektionen anzeigt, die frei mit der Maus bewegt werden können.

Das Teil funktioniert nicht nur in Netscape4.x, Netscape6 und MSIE, sondern auch im Konqueror und in der Opera.

Im folgenden Quelltext sind wichtige Bereiche rot und Kommentare grün markiert.
index Anfang hoch runter mousemover.js mousemover2.html 
<!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 - Mousemover - Demo</title>
<script type="text/javascript" src="mousemover.js"></script>
<script type="text/javascript">
<!--
function Init()
{
  MouseInit(3);
  AddMoveObject("section1",3,3,32,32,500,300);
  AddMoveObject("section2",3,3,32,32,500,300);
  AddMoveObject("section3",3,3,32,32,500,300);
  Cascade(10,150,0,50)
}
//-->
</script>
</head>

<!-- onLoad="Init();" veranlasst die Initialisierung des Ganzen,
     onMouseMove="MouseEvent(event);" und onMouseUp="MouseEvent(event);"
     sind unverzichtbar fuer den MSIE -->
<body
  onLoad="Init();"
  onMouseMove="MouseEvent(event);"
  onMouseUp="MouseEvent(event);"
>

<form>
<table border="0" cellpadding="5" cellspacing="2" width="100%">
<tr><td style="background:#FFFFFF" rowspan="2">
<h4 align=center>Demo zur Verwendung von "mousemover.js"</h4>
<p align=center>
(c) 2002 <a href="../../tohome.html">Ulrich Kritzner</a>
<br>
die Verwendung von "mousemover.js" in kommerziellen Seiten ist kostenpflichtig
<br>
<a href="index.html">zur&uuml;ck zum Index</a>
</p>
</td><td align="center" style="background:#EFD0D0" width="2%">
<input type="button" value="1 aktivieren" onClick="Activate(0)">
</td><td align="center" style="background:#D0EFD0" width="2%">
<input type="button" value="2 aktivieren" onClick="Activate(1)">
</td><td align="center" style="background:#D0D0EF" width="2%">
<input type="button" value="3 aktivieren" onClick="Activate(2)">
</td><td align="center" style="background:#E0E0E0" rowspan="2" width="2%">
<input type="button" value="Kaskade" onClick="Cascade(10,150,0,50)">
</td></tr>
<tr><td align="center" style="background:#EFD0D0">
<input type="button" value="1 zeigen" onClick="Show(0)">
</td><td align="center" style="background:#D0EFD0">
<input type="button" value="2 zeigen" onClick="Show(1)">
</td><td align="center" style="background:#D0D0EF">
<input type="button" value="3 zeigen" onClick="Show(2)">
</td></tr>
</table>
</form>

<div name="section1" id="section1" style="position:absolute; left:10; top:150; vspace:0; hspace:0">
<table border="0" cellpadding="3" cellspacing="0">
<tr><td style="background:#FFE0E0" valign="top" width="32">
<img src="handle.gif">
</td><th style="background:#FFE0E0">
<span style="white-space:nowrap">Bereich 1</span>
</th></tr><tr><td style="background:#EFD0D0" colspan="2">
<table border="0" cellpadding="10" cellspacing="1">
<tr><td style="background:#FFF0F0">
<span style="white-space:nowrap">
Versuche diesen Bereich zu bewegen,<br>
indem Du mit der Maus den blauen Griff<br>
in der linken oberen Ecke des Kastens anklickst.<br>
Klickst Du den Griff nochmals,<br>
bleibt der Bereich stehen.
</span>
</td></tr>
</table>
</td></tr>
</table>
</div>

<div name="section2" id="section2" style="position:absolute; left:10; top:200; vspace:0; hspace:0">
<table border="0" cellpadding="3" cellspacing="0">
<tr><td style="background:#E0FFE0" valign="top" width="32">
<img src="handle.gif">
</td><th style="background:#E0FFE0">
<span style="white-space:nowrap">Bereich 2</span>
</th></tr><tr><td style="background:#D0EFD0" colspan="2">
<table border="0" cellpadding="10" cellspacing="1">
<tr><td style="background:#F0FFF0">
<span style="white-space:nowrap">
Versuche diesen Bereich zu bewegen,<br>
indem Du mit der Maus den blauen Griff<br>
in der linken oberen Ecke des Kastens anklickst.<br>
Klickst Du den Griff nochmals,<br>
bleibt der Bereich stehen.
</span>
</td></tr>
</table>
</td></tr>
</table>
</div>

<div name="section3" id="section3" style="position:absolute; left:10; top:250; vspace:0; hspace:0">
<table border="0" cellpadding="3" cellspacing="0">
<tr><td style="background:#E0E0FF" valign="top" width="32">
<img src="handle.gif">
</td><th style="background:#E0E0FF">
<span style="white-space:nowrap">Bereich 3</span>
</th></tr><tr><td style="background:#D0D0EF" colspan="2">
<table border="0" cellpadding="10" cellspacing="1">
<tr><td style="background:#F0F0FF">
<span style="white-space:nowrap">
Versuche diesen Bereich zu bewegen,<br>
indem Du mit der Maus den blauen Griff<br>
in der linken oberen Ecke des Kastens anklickst.<br>
Klickst Du den Griff nochmals,<br>
bleibt der Bereich stehen.
</span>
</td></tr>
</table>
</td></tr>
</table>
</div>

</body>
</html>
index Anfang hoch mousemover.js mousemover2.html
Autor: Ulrich Kritzner