Bewegen von Bildschirmelementen - Beispiel für JavaScript-Programmierung
|
|
|
|
HTML-Quelltext im Body-Bereich:
Erzeugung des bunten beweglichen Feldes:
<div name="MyDiv" id="MyDiv"
style="position:absolute; top:160; left:350; width:300; height:200; visibility:show">
<table cellpadding="10" cellspacing="0" border="0"><tr><td colspan="3" align=center style="background:#F0F0A0">
<a href="javascript:SetRelPos(0,-20)"><img src="up.gif" alt="hoch" border="0"></a>
</td></tr><tr><td align=center style="background:#F0F0A0">
<a href="javascript:SetRelPos(-20,0)"><img src="prev.gif" alt="links" border="0"></a>
</td><td align=center style="background:#F0C0C0">
Klick auf die Pfeile um diesen Abschnitt zu verschieben
</td><td align=center style="background:#F0F0A0">
<a href="javascript:SetRelPos(20,0)"><img src="next.gif" alt="rechts" border="0"></a>
</td></tr><tr><td colspan="3" align=center style="background:#F0F0A0">
<a href="javascript:SetRelPos(0,20)"><img src="down.gif" alt="runter" border="0"></a>
</td></tr></table>
</div>
|
Erzeugung des grünen Steuerfeldes:
<form>
<table cellpadding="10" cellspacing="0" border="0"><tr><td colspan="3" align=center style="background:#D0F0D0">
<a href="javascript:SetRelPos(0,-20)"><img src="up.gif" alt="hoch" border="0"></a>
</td></tr><tr><td align=center style="background:#D0F0D0">
<a href="javascript:SetRelPos(-20,0)"><img src="prev.gif" alt="links" border="0"></a>
</td><td align=center style="background:#D0F0D0">
Klick auf die Pfeile<br> um den gelb umrandeten<br> Abschnitt zu verschieben<br>
<input type=button value="Startposition" onClick="SetAbsPos(xstart,ystart)">
</td><td align=center style="background:#D0F0D0">
<a href="javascript:SetRelPos(20,0)"><img src="next.gif" alt="rechts" border="0"></a>
</td></tr><tr><td colspan="3" align=center style="background:#D0F0D0">
<a href="javascript:SetRelPos(0,20)"><img src="down.gif" alt="runter" border="0"></a>
</td></tr></table>
</form>
|
|
|
|
|
Script-Quelltext im Head-Bereich:
<script type="text/javascript">
<!--
var MyObject;
var xstart=350,ystart=160,xabs,yabs;
function SetAbsPos(x,y) /* setzen der absoluten Koordinaten */
{
xabs=x;
yabs=y;
MyObject.left=xabs;
MyObject.top=yabs;
}
function SetRelPos(x,y) /* relative Verschiebung des Objekts */
{
xabs+=x;
yabs+=y;
/* Sicherung, dass Koordinaten in Grenzen bleiben: */
if (xabs<0)
xabs=0;
if (xabs>1000)
xabs=1000;
if (yabs<0)
yabs=0;
if (yabs>1000)
yabs=1000;
/* setzen der Position */
MyObject.left=xabs;
MyObject.top=yabs;
}
function Init()
{
if (document.all) /* Fuer Konqueror, Opera und Internet Explorer */
MyObject=document.all.MyDiv.style;
else
if (typeof(document.getElementById)=="function") /* Fuer Netscape Navigator 6.x */
MyObject=document.getElementById("MyDiv").style;
else
if (document.MyDiv) /* Fuer Netscape Navigator 4.x */
MyObject=document.MyDiv;
else /* Fuer dumme Browser, die von nichts wissen wollen */
alert("Your stupid browser is not really able to support the functionality of this page");
SetAbsPos(xstart,ystart); /* Setzen der Anfangsposition */
}
//-->
</script>
|
|
|
|
|
Autor: Ulrich Kritzner
|
