DHTML - Ein Tutorial
DHTML-Tutorial von Daniel Schwamm (16.10.1998)
Inhalt
Na schön, ich gebe es zu: Ich bin ein Microsoft-Windows-Fan. Das war
aber nicht immer so. Bevor ich mich mit Windows beschäftigte, floss viel, viel
Wasser den Rhein runter. Meine Welt war MSDOS und vielleicht noch etwas
UNIX bzw. Linux. Als ich während des Studiums jedoch einen Nebenverdienst suchte,
merkte ich bei den Bewerbungsgesprächen schnell, dass ich nichts finden
würde, wenn ich bei allen Fragen nach Word und Excel und CorelDRAW usw. nur
hilflos die Achseln zucken konnte.
So kehrte ich also meinem geliebten DOS den Rücken zu und wendete mich
stattdessen dem quälend langsamen Windows 3.1 zu. Mein 286er war
reichlich am Keuchen, aber irgendwie reichte es dann doch immer, um die
Office-Programme verwenden zu können (das änderte sich erst mit der
6er Version von Word - da rüstete ich dann bald auf einen 486er auf).
Als ich für Windows mein erstes "Hello, world!"-Programm bastelte (in
Borland C++), dachte ich immer wieder: "Das kann doch alles nicht wahr sein" - das
war ja schwieriger als unter X-Windows mit UNIX! Okay, das Objektmodell von Borland
schützte einen vor allzu direkten Kontakten mit der Windows-API, aber dennoch ...
Ich weinte echt meinem guten alten DOS hinterher.
Zwei Dinge bekehrten mich schliesslich doch noch zum Windows-Fan: Delphi 1.0 und
Windows NT 4.0. Mit Delphi - der genialsten Programmiersprache unter der Sonne - wurde
die Windows-Programmierung zum Kinderspiel. Und Windows NT 4.0 ist schlicht und
einfach gut, auch wenn UNIX-Anhänger nix davon wissen wollen. Aber NT zusammen mit
dem MSIE 4.0, und als Entwicklungsplattform Delphi 1.0, ist sogar noch besser als
Vanilleeis mit warmen Apfelkuchen, serviert auf dem schlanken Rücken einer brünetten
18 Jährigen (okay, okay, DAS war jetzt übertrieben).
Schaun wir doch mal, was uns so zu Windows und MSIE einfällt ...
Tja, Divisions fallen mir ein, wenn ich an den dreckigen MSIE 4.0
und grösser denke. Als mir das <DIV>- Tags das erste Mal begegneten,
fand ich es ziemlich überflüssig. Bis ich dann irgendwann die Mächtigkeit
dahinter zu ahnen begann. Doch seht selbst!
Man nehme einen x-beliebigen ASCII-Editor, z.B. Notepad in Windows,
und tippe Folgendes ein:
00001
00002
00003
00004
00005
00006
00007
<html>
<body>
<div style='position:absolute;top:1;left:1;'>
Hello world!
</div>
</body>
</html>
Man speichere dies als "msie1.html" und betrachte sich das Ergebnis mit dem Explorer.
(=> msie1.html)
Na schön, das kennen wir schon. Auch das nächste Beispiel haut einen nicht gerade
vom Hocker:
00001
00002
00003
00004
00005
00006
00007
00008
00009
00010
00011
00012
00013
00014
<html>
<body>
<div style='position:absolute;top:100px;left:1px;background-color:green'>
<font size='7' face='arial' color='#ff0000'><strong>
Hello world!
</strong></font>
</div>
<div style='position:absolute;top:200px;left:200px;background-color:red'>
<font size='7' face='arial' color='#000000'><strong>
Hello world!
</strong></font>
</div>
</body>
</html>
(=> msie2.html)
Offenbar helfen Divisions, um Webinhalte punktgenau platzieren zu
können. Das geht mit etwas Fantasie jedoch genauso gut mit Tables.
Ich sagte es bereits: Mir kamen die Dinger am Anfang ziemlich
überflüssig vor. Doch jetzt wird's cool:
00001
00002
00003
00004
00005
00006
00007
00008
00009
00010
00011
00012
00013
00014
<html>
<body>
<div style='position:absolute;top:200px;left:50px;z-index:10'>
<font size='7' face='arial' color='#ff0000'><strong>
Hello world!
</strong></font>
</div>
<div style='position:absolute;top:205px;left:55px;z-index:5;'>
<font size='7' face='arial' color='#000000'><strong>
Hello world!
</strong></font>
</div>
</body>
</html>
(=> msie3.html)
Wow! Der z-Index macht's: Damit kann man nahezu beliebige Webinhalte
in Schichten übereinanderlegen, wobei gilt, niedriger Index liegt
unter höherem Index. Der folgende Sourcecode legt z.B. eine Tabelle über
ein Bild:
00001
00002
00003
00004
00005
00006
00007
00008
00009
00010
00011
00012
00013
00014
00015
00016
00017
00018
<html>
<body>
<
div style='position:absolute;top:150px;left:50px;z-index:10'>
<img src='grl.jpg' border='1' width='300'>
</
div>
<
div style='position:absolute;top:415px;left:20px;width:300px;height:40px;z-index:15;'>
<table width='100%' border='2' cellpadding='2' cellspacing='0'>
<tr>
<td bgcolor='#c0c0c0'>
<font size='3' face='arial' color='#ff0000'><strong>
ZENSUR ZENSUR ZENSUR ZENSUR ZENSUR
</strong></font>
</td>
</tr>
</table>
</
div>
</body>
</html>
(=> msie4.html)
Noch schöner wird's aber, wenn man etwas JavaScript ins Spiel bringt,
da die Division-Eigenschaften zur Laufzeit verändert werden können.
Das folgende Beispiel demonstriert, wie man den störenden Balken aus
"msie4.html" auf drei verschiedene Arten verschwinden lassen kann:
00001
00002
00003
00004
00005
00006
00007
00008
00009
00010
00011
00012
00013
00014
00015
00016
00017
00018
00019
00020
00021
00022
00023
00024
00025
00026
00027
00028
00029
00030
00031
00032
00033
00034
00035
00036
00037
00038
00039
00040
00041
00042
00043
00044
00045
00046
00047
00048
00049
00050
00051
00052
00053
00054
00055
00056
00057
00058
00059
00060
00061
00062
00063
00064
00065
00066
00067
00068
00069
00070
00071
00072
00073
00074
00075
00076
00077
00078
00079
00080
<html>
<script language='javascript'
type='text/javascript'>
function init()
{
document.onmousedown=mouseDown;
document.onmousemove=mouseMove;
document.onmouseup=mouseUp;
dragObj=balken.style;
dragObj.xpos=dragObj.pixelLeft;
dragObj.ypos=dragObj.pixelTop;
dragActive=0;
};
function hidebalken()
{
balken.style.visibility='hidden';
};
function scrollbalken()
{
balken.style.pixelTop+=1;
if(balken.style.pixelTop<500)
document.deanimtimer=window.setTimeout('scrollbalken()',10);
};
function mouseDown(e)
{
var x=event.x;
var y=event.y;
if(
x>=dragObj.xpos && x<=dragObj.xpos+300 &&
y>=dragObj.ypos && y<=dragObj.ypos+40
){
dragClickX=x-dragObj.xpos;
dragClickY=y-dragObj.ypos;
dragActive=1;
};
};
function mouseMove(e)
{
var x=event.x;
var y=event.y;
if(dragActive){
dragObj.xpos=x-dragClickX;
dragObj.ypos=y-dragClickY;
dragObj.left=dragObj.xpos;
dragObj.top=dragObj.ypos;
}
if(dragActive)
return false;
}
function mouseUp(e)
{
var x=event.x;
var y=event.y;
dragActive=0;
}
</script>
<body onLoad='javascript:init()'>
<H2>DHTML MSIE Kurs Teil 5</H2>
<H3>Division (Zensur-Balken) per Maus und JavaScript umplatzieren</H3>
<strong>Zensur-Balken</strong>
<a href='index.php?pg=sw/dhtml/msie5.html'>zuruecksetzen</a>&
nbsp;|
<a href='javascript:hidebalken()'>unsichtbar machen</a>
|
<a href='javascript:scrollbalken()'>per JS verschieben</a>
|
einfach mit der Maus wegbewegen
<
div id='pic' style='position:absolute;top:150px;left:50px;
z-index:10'>
<img src='grl.jpg' border='1' width='300' alt='Girl'>
</
div>
<
div id='balken' style='position:absolute;top:415px;left:20px;
width:300px;height:40px;z-index:15;'>
<table width='100%' border='2' cellpadding='2' cellspacing='0'>
<tr>
<td bgcolor='#c0c0c0'>
<font size='3' face='arial' color='#ff0000'><strong>
ZENSUR ZENSUR ZENSUR ZENSUR ZENSUR
</strong></font>
</td>
</tr>
</table>
</
div>
</body>
</html>
(=> msie5.html)
Ist das was? Viel Sourcecode, okay, und auch nicht ganz einfach zu verstehen.
Zunächst wird im Body die "onload"-Funktion "init()" aufgerufen, die ein paar
JavaScript-Variablen setzt und die Mausereignisse up, down und move
mit den Funktionen "mouseDown(e)", "mouseUp(e)" und "mouseMove(e)" verbindet.
Beim Ziehen des Balkens werden diese Funktionen dann verwendet, um die
x/y-Position der Balken-Division der Mausposition anzupassen. Die Funktion
"hidebalken()" setzt das "visiblity"-Attribut auf "hidden", wodurch der Balken
unsichtbar wird. "scrollbalken()" schliesslich verändert Timer-gesteuert das
"pixelTop"-Attribut der Division, sodass der Balken nach unten wandert.
Man betrachte nun - mit Wohlgefallen - diese 6 Bilder von Alyssa Milano:
In diesem Beispiel erhält jedes Bild von Alyssa seine eigene Division,
wobei jede Division dieselben Koordinaten einnimmt, sodass das Bild mit dem
höchsten z-Index obenauf liegt und alle anderen verdeckt. Garniert wird das
Ganze noch mit einem SPAN-Teil, der den Schriftzug "Alyssa Milano" enthält:
00001
00002
00003
00004
00005
00006
00007
00008
00009
00010
00011
00012
00013
00014
00015
00016
00017
00018
00019
00020
00021
00022
00023
00024
00025
00026
00027
00028
00029
00030
00031
00032
00033
00034
00035
00036
00037
00038
00039
00040
00041
00042
00043
00044
00045
00046
<html>
<head><title>Alyssa 1</title></head>
<body bgcolor='#000000' text='red'>
<H2>DHTML Alyssa Kurs Teil 1</H2>
<H3>Mehrere Divisions mit Bildern per z-Index uebereinander gelegt</H3>
<span style='position:absolute;
left:360px;top:20px;width:100px;height:160px;
letter-spacing: -4px;font:51pt verdana;
font-weight:bold;color:#424242'>
Alyssa Milano
</span>
<
div style='position:absolute;
left:600px;top:20px;width:100px;height:160px;
z-index:60;visibility:visible' id='Div0'>
<img src='alyssa6.jpg' height='160' alt='Alyssa 6'>
</
div>
<
div style='position:absolute;
left:600px;top:20px;width:100px;height:160px;
z-index:50;visibility:visible' id='Div1'>
<img src='alyssa1.jpg' height='160' alt='Alyssa 1'>
</
div>
<
div style='position:absolute;
left:600px;top:20px;width:100px;height:160px;
z-index:40;visibility:visible' id='Div2'>
<img src='alyssa2.jpg' height='160' alt='Alyssa 2'>
</
div>
<
div style='position:absolute;
left:600px;top:20px;width:100px;height:160;px
z-index:30;visibility:visible' id='Div3'>
<img src='alyssa3.jpg' height='160' alt='Alyssa 3'>
</
div>
<
div style='position:absolute;
left:600px;top:20px;width:100px;height:160px;
z-index:20;visibility:visible' id='Div4'>
<img src='alyssa4.jpg' height='160' alt='Alyssa 4'>
</
div>
<
div style='position:absolute;
left:600px;top:20px;width:100px;height:160px;
z-index:10;visibility:visible' id='Div5'>
<img src='alyssa5.jpg' height='160' alt='Alyssa 5'>
</
div>
</body>
</html>
(=> alyssa1.html)
Das ist noch recht öde. Betrachtet man sich den Source-Code,
stellt man fest, dass die Division mit der ID 6 den höchsten
z-Index besitzt. Mit dieser Division werden über ...
00001
00002
00003
00004
00005
00006
00007
<
div style='position:absolute;
left:600;top:20;width:100;height:160;
z-index:60;visibility:visible'
onMouseOver='JavaScript:vor()'
onMouseOut='JavaScript:back()' id='Div0'>
<img border='0' src='alyssa6.jpg' height='160' alt='Alyssa 6'>
</
div>
... jetzt zwei Ereignisse verknüpft: "onMouseOver" und "onMouseOut".
Das bedeutet, dass sowie der Benutzer mit der Maus über die Koordinaten
der Division kommt bzw. sie wieder verlässt, JavaScript-Funktionen
aufgerufen werden sollen. Es sind dies die Funktionen:
00001
00002
00003
00004
00005
00006
00007
00008
00009
00010
00011
00012
00013
00014
00015
00016
00017
00018
00019
00020
00021
00022
00023
00024
<script language='javascript' type='text/javascript'>
function vor(){
Div1.style.pixelLeft-=10;
Div2.style.pixelLeft-=10*2;
Div3.style.pixelTop+=10;
Div4.style.pixelLeft-=10
Div4.style.pixelTop+=10;
Div5.style.pixelLeft-=10*2
Div5.style.pixelTop+=10;
if(Div5.style.pixelTop<250)
document.animtimer=window.setTimeout('vor()',10);
}
function back(){
Div1.style.pixelLeft+=10;
Div2.style.pixelLeft+=10*2;
Div3.style.pixelTop-=10;
Div4.style.pixelLeft+=10
Div4.style.pixelTop-=10;
Div5.style.pixelLeft+=10*2
Div5.style.pixelTop-=10;
if(Div5.style.pixelTop>20)
document.deanimtimer=window.setTimeout('back()',10);
}
</script>
(=> alyssa2.html)
Das bringt Bewegung ins Web, nicht wahr?
Perfekt ist die Geschichte allerdings nicht, da das Ganze noch zu sehr "stottert".
Der Grund dafür liegt in den Timer-Aufrufen von "vor()" und "back()", die sich
gegenseitig in die Quere kommen. Um die Sache abzurunden, müssen die jeweils
falschen Timer-Funktionen vorher deaktiviert werden. Damit ergibt sich der
komplette Source-Code:
00001
00002
00003
00004
00005
00006
00007
00008
00009
00010
00011
00012
00013
00014
00015
00016
00017
00018
00019
00020
00021
00022
00023
00024
00025
00026
00027
00028
00029
00030
00031
00032
00033
00034
00035
00036
00037
00038
00039
00040
00041
00042
00043
00044
00045
00046
00047
00048
00049
00050
00051
00052
00053
00054
00055
00056
00057
00058
00059
00060
00061
00062
00063
00064
00065
00066
00067
00068
00069
00070
00071
00072
00073
00074
00075
00076
<html>
<head>
<title>Alyssa 3</title>
<script language='javascript'
type='text/javascript'>
function vor()
{
Div1.style.pixelLeft-=10;
Div2.style.pixelLeft-=10*2;
Div3.style.pixelTop+=10;
Div4.style.pixelLeft-=10
Div4.style.pixelTop+=10;
Div5.style.pixelLeft-=10*2
Div5.style.pixelTop+=10;
if(Div5.style.pixelTop<250)
document.animtimer=window.setTimeout('vor()',10);
}
function animate()
{
window.clearTimeout(document.deanimtimer);
vor();
}
function back()
{
Div1.style.pixelLeft+=10;
Div2.style.pixelLeft+=10*2;
Div3.style.pixelTop-=10;
Div4.style.pixelLeft+=10
Div4.style.pixelTop-=10;
Div5.style.pixelLeft+=10*2
Div5.style.pixelTop-=10;
if(Div5.style.pixelTop>20)
document.deanimtimer=window.setTimeout('back()',10);
}
function deanimate()
{
window.clearTimeout(document.animtimer);
back();
}
</script>
</head>
<span style='position:absolute;
left:360px;top:20px;width:100px;height:160px;
letter-spacing: -4px;font:51pt verdana;
font-weight:bold;color:#424242'>
Alyssa Milano
</span>
<
div style='position:absolute;
left:600px;top:20px;width:100px;height:160px;
z-index:60;visibility:visible'
onMouseOver='JavaScript:animate()'
onMouseOut='JavaScript:deanimate()' id='Div0'>
<img src='alyssa6.jpg' height='160' alt='Alyssa 6'>
</
div>
<
div style='position:absolute;
left:600px;top:20px;width:100px;height:160px;
z-index:50;visibility:visible' id='Div1'>
<img src='alyssa1.jpg' height='160' alt='Alyssa 1'>
</
div>
<
div style='position:absolute;
left:600px;top:20px;width:100px;height:160px;
z-index:40;visibility:visible' id='Div2'>
<img src='alyssa2.jpg' height='160' alt='Alyssa 2'>
</
div>
<
div style='position:absolute;
left:600px;top:20px;width:100px;height:160;px
z-index:30;visibility:visible' id='Div3'>
<img src='alyssa3.jpg' height='160' alt='Alyssa 3'>
</
div>
<
div style='position:absolute;
left:600px;top:20px;width:100px;height:160px;
z-index:20;visibility:visible' id='Div4'>
<img src='alyssa4.jpg' height='160' alt='Alyssa 4'>
</
div>
<
div style='position:absolute;
left:600px;top:20px;width:100px;height:160px;
z-index:10;visibility:visible' id='Div5'>
<img src='alyssa5.jpg' height='160' alt='Alyssa 5'>
</
div>
</body>
</html>
(=> alyssa3.html)
Okay - schnappen wir uns das nächste Beispiel, diesmal sogar eines aus dem Real Life:
Eine Kfz-Auktionen-Webseite, die ich einmal für HENRY's Auktionshaus
(www.henrys.de)
zusammengeschustert habe.
Fangen wir klein an und betrachten uns die Bestandteile der Seite, als da wären
zwei Bilder:
Dazu packen wir die Divisions:
00001
00002
00003
00004
00005
00006
00007
00008
00009
00010
00011
00012
00013
00014
00015
00016
00017
00018
00019
00020
00021
00022
00023
00024
00025
00026
00027
00028
00029
00030
00031
00032
00033
00034
00035
00036
00037
00038
00039
00040
00041
00042
00043
<body bgcolor='#FFFFFF' text='#000000'>
<H2>DHTML Fahrzeug-Auktion Kurs Teil 1</H2>
<H3>Die Platzierung der Divisions fuer ein 'Fahrzeug-Auktions-Movie'</H3>
<
div style='position:absolute;
left:5px;top:155px;width:100px;height:20px;
z-index:350;visibility:visible'>
<a href='index.php?pg=web-tutorials_dhtml_index.htm'>Zurueck</a>
</
div>
<
div style='position:absolute;
left:10px;top:170px;width:280px;height:220px;
letter-spacing: -4px;font:40pt verdana;
z-index:150;font-weight:bold;color:#424242;visibility:visible'
id='txt0'>
<i>HENRYs Fahrzeug-Auktionen</i>
</
div>
<
div style='position:absolute;
left:300px;top:170px;width:280px;height:220px;
z-index:60;visibility:visible'
id='bild0'>
<img border='0' src='sftcar1.jpg' width='275' alt='Fahrzeug 1'>
</
div>
<
div style='position:absolute;
left:10px;top:170px;width:280px;height:220px;
z-index:50;visibility:hidden'
id='bild1'>
<img border='0' src='sftcar2.jpg' width='275' alt='Fahrzeug 2'>
</
div>
<
div style='position:absolute;
left:300px;top:170px;width:280px;height:220px;
letter-spacing:-4px;font:40pt verdana;
z-index:50;font-weight:bold;color:#424242;visibility:hidden'
id='txt1'>
<i>Naechste Auktion</i>
</
div>
<
div id='txt2' align='center'
style='position:absolute;
top:300px;width:400px,height=300px;
letter-spacing:-4px;font:40pt verdana;
font-weight:bold;z-index:150;visibility:hidden'>
17. August 1998, 11 Uhr
</
div>
(=> auto1.html)
Aufmerksame Beobachter werden bemerkt haben, dass wir mehr Divisionen
aufgeführt haben, als letztlich zu sehen sind. Dies verdanken wir
dem weiter oben bereits erwähnten "visibility"-Attribut.
Als erste Aktion nach dem Start (siehe "onLoad"-Ereignis im Body-Tag)
wollen wir eine kleine Animation starten. Ähnlich wie wir es schon bei den
Alyssa-Seiten getan haben. Voraussetzung ist jedoch, dass der User auch mit
dem MSIE 4.0 (oder grösser) surft. Dazu nehmen wir den Code:
00001
00002
00003
00004
00005
00006
00007
00008
00009
00010
00011
00012
00013
00014
00015
00016
00017
00018
00019
00020
00021
00022
00023
00024
00025
00026
00027
00028
00029
00030
00031
00032
00033
00034
00035
00036
00037
00038
00039
00040
00041
00042
00043
00044
00045
00046
00047
00048
00049
00050
00051
<html>
<head>
<title>Dynamik AutoAuktion</title>
<script language='javascript' type='text/javascript'>
function deanimate(){
window.clearTimeout(document.animtimer);
start();
}
function start(){
if(document.layers || parseInt(navigator.appVersion)<4) ende()
else iestart();
}
function iestart(){ieshift1();}
function ieshift1(){
txt0.style.pixelLeft+=5;
bild0.style.pixelLeft-=5;
if(bild0.style.pixelLeft>10)
document.deanimtimer=window.setTimeout('ieshift1()',10)
else{
iestartshift2();
}
}
function iestartshift2(){
txt1.style.visibility='visible';
bild1.style.visibility='visible';
ieshift2();
}
function ieshift2(){
txt1.style.pixelTop+=5;
bild1.style.pixelTop+=5;
if(bild1.style.pixelTop<370)
document.deanimtimer=window.setTimeout('ieshift2()',10)
else
ieshift3();
}
function ieshift3(){
txt1.style.pixelLeft-=5;
bild1.style.pixelLeft+=5;
if(txt1.style.pixelLeft>10)
document.deanimtimer=window.setTimeout('ieshift3()',10)
else
ende();
}
function ende(){document.location='index.php';}
</script>
</head>
<body BGCOLOR='#FFFFFF' TEXT='#000000' onload='javascript:start()'>
...
</body>
</html>
(=> auto2.html)
Herauszoomender Text wäre 'ne feine Sache, der dann langsam
weggedimmt wird. Dazu müssen wir erst einmal die Textfelder
definieren sowie die einzelnen Farbstufen des Dimm-Vorgangs.
Anschliessend verwenden wir die "FontSize"- und "Color"-Attribute der
Divisions zur dynamischen Veränderung. Here is the JavaScript:
00001
00002
00003
00004
00005
00006
00007
00008
00009
00010
00011
00012
00013
00014
00015
00016
00017
00018
00019
00020
00021
00022
00023
00024
00025
00026
00027
00028
00029
00030
00031
00032
00033
00034
00035
00036
00037
00038
00039
00040
00041
00042
00043
00044
00045
00046
00047
00048
00049
00050
00051
00052
00053
00054
00055
00056
00057
00058
00059
00060
00061
00062
00063
00064
00065
00066
00067
00068
00069
00070
00071
00072
00073
00074
00075
00076
00077
00078
00079
00080
00081
00082
00083
00084
00085
00086
00087
00088
00089
00090
00091
00092
00093
00094
00095
00096
00097
00098
00099
00100
00101
00102
00103
00104
00105
00106
00107
00108
00109
00110
00111
00112
00113
<html>
<head>
<title>Dynamik AutoAuktion</title>
<script language='javascript' type='text/javascript'>
txtarray=new Array(
'14.','September','1998','11 Uhr','14. September 1998, 11 Uhr'
);
var txtc=5;
colarray=new Array(
'#ff0000','#ff2020','#ff4040','#ff6060','#ff8080','#ffa0a0',
'#ffb0b0','#ffc0c0','#ffd0d0','#ffe0e0','#fff0f0','#ffffff'
);
var colc=12;
var groesse=10;
var numc=0;
function deanimate(){
window.clearTimeout(document.animtimer);
start();
}
function start(){
if(document.layers || parseInt(navigator.appVersion)<4)
ende()
else
iestart();
}
function iestart(){
ieshift1();
}
function ieshift1(){
txt0.style.pixelLeft+=5;
bild0.style.pixelLeft-=5;
if(bild0.style.pixelLeft>10)
document.deanimtimer=window.setTimeout('ieshift1()',10)
else{
iestartshift2();
}
}
function iestartshift2(){
txt1.style.visibility='visible';
bild1.style.visibility='visible';
ieshift2();
}
function ieshift2(){
txt1.style.pixelTop+=5;
bild1.style.pixelTop+=5;
if(bild1.style.pixelTop<370)
document.deanimtimer=window.setTimeout('ieshift2()',10)
else
ieshift3();
}
function ieshift3(){
txt1.style.pixelLeft-=5;
bild1.style.pixelLeft+=5;
if(txt1.style.pixelLeft>10)
document.deanimtimer=window.setTimeout('ieshift3()',10)
else
ieinitzoom();
}
function ende(){
document.location='index.php';
}
//---------------------------------------------------
function iefade(num){
if(num<colc){
eval(fcol);
num+=1;
setTimeout('iefade('+num+')',200);
}
else{
txt2.style.visibility='hidden';
};
}
function iezoom(num,funk){
if(
(groesse<100 && numc<5)||
(groesse<50)
){
eval(ztxt);
eval(zgroesse);
groesse+=5;
setTimeout('iezoom('+num+','+funk+')',30)
}
else{
eval(funk);
};
}
function iestartzoom(num){
numc+=1;
if(numc==5){
txt0.style.visibility='hidden';
bild0.style.visibility='hidden';
txt1.style.visibility='hidden';
bild1.style.visibility='hidden';
}
groesse=5;
if(num<txtc){
iezoom(num,'iestartzoom('+numc+')');
}
else{
iefade(0);
ende();
};
};
function ieinitzoom(){
txt2.style.visibility='visible';
document.all.txt2.style.color=colarray[0];
ztxt='document.all.txt2.innerText=txtarray[num]';
fcol='document.all.txt2.style.color=colarray[num]';
zgroesse='document.all.txt2.style.fontSize=groesse';
num=0;
iestartzoom(0);
}
</script>
(=> auto3.html)
Nicht eben ein Spielberg, aber schon nicht das schlechteste
Machwerk unter der Sonne.
Zur Verfeinerung gibt's jetzt noch
eine echte Spezialität vom MSIE, nämlich Objects, die eine
eindeutige ID haben und im Windows-System enthalten sind
(über die ID kann man sie z.B. in der Windows-Registry aufspüren).
Zwei spezielle Objekte legen wir über den z-Index einfach hinter die
Divisions. Zur Beeinflussung der beiden muss jedoch statt auf JavaScript
auf VBScript zurückgegriffen werden. Wie dies funktioniert, zeigt der
folgende komplette Source-Code der Kfz-Auktionen-Webseite:
00001
00002
00003
00004
00005
00006
00007
00008
00009
00010
00011
00012
00013
00014
00015
00016
00017
00018
00019
00020
00021
00022
00023
00024
00025
00026
00027
00028
00029
00030
00031
00032
00033
00034
00035
00036
00037
00038
00039
00040
00041
00042
00043
00044
00045
00046
00047
00048
00049
00050
00051
00052
00053
00054
00055
00056
00057
00058
00059
00060
00061
00062
00063
00064
00065
00066
00067
00068
00069
00070
00071
00072
00073
00074
00075
00076
00077
00078
00079
00080
00081
00082
00083
00084
00085
00086
00087
00088
00089
00090
00091
00092
00093
00094
00095
00096
00097
00098
00099
00100
00101
00102
00103
00104
00105
00106
00107
00108
00109
00110
00111
00112
00113
00114
00115
00116
00117
00118
00119
00120
00121
00122
00123
00124
00125
00126
00127
00128
00129
00130
00131
00132
00133
00134
00135
00136
00137
00138
00139
00140
00141
00142
00143
00144
00145
00146
00147
00148
00149
00150
00151
00152
00153
00154
00155
00156
00157
00158
00159
00160
00161
00162
00163
00164
00165
00166
00167
00168
00169
00170
00171
00172
00173
00174
00175
00176
00177
00178
00179
00180
00181
00182
00183
00184
00185
00186
00187
00188
00189
00190
00191
00192
00193
00194
00195
00196
00197
00198
00199
00200
00201
00202
00203
00204
00205
00206
00207
<html>
<head>
<title>Dynamik AutoAuktion</title>
<script language='javascript'
type='text/javascript'>
txtarray=new Array(
'14.','September','1998','11 Uhr','14. September 1998, 11 Uhr'
);
var txtc=5;
colarray=new Array(
'#ff0000','#ff2020','#ff4040','#ff6060','#ff8080','#ffa0a0',
'#ffb0b0','#ffc0c0','#ffd0d0','#ffe0e0','#fff0f0','#ffffff'
);
var colc=12;
var groesse=10;
var numc=0;
function deanimate()
{
window.clearTimeout(document.animtimer);
start();
}
function start()
{
if(document.layers || parseInt(navigator.appVersion)<4)
ende()
else
iestart();
}
function iestart()
{
ieshift1();
}
function ieshift1()
{
txt0.style.pixelLeft+=5;
bild0.style.pixelLeft-=5;
if(bild0.style.pixelLeft>10)
document.deanimtimer=window.setTimeout('ieshift1()',10)
else{
iestartshift2();
}
}
function iestartshift2()
{
txt1.style.visibility='visible';
bild1.style.visibility='visible';
ieshift2();
}
function ieshift2()
{
txt1.style.pixelTop+=5;
bild1.style.pixelTop+=5;
if(bild1.style.pixelTop<370)
document.deanimtimer=window.setTimeout('ieshift2()',10)
else
ieshift3();
}
function ieshift3()
{
txt1.style.pixelLeft-=5;
bild1.style.pixelLeft+=5;
if(txt1.style.pixelLeft>10)
document.deanimtimer=window.setTimeout('ieshift3()',10)
else
ieinitzoom();
}
function ende()
{
document.location='index.php';
}
//---------------------------------------------------
function iefade(num)
{
if(num<colc){
eval(fcol);
num+=1;
setTimeout('iefade('+num+')',200);
}
else{
txt2.style.visibility='hidden';
};
}
function iezoom(num,funk)
{
if(
(groesse<100 && numc<5)||
(groesse<50)
){
eval(ztxt);
eval(zgroesse);
groesse+=5;
setTimeout('iezoom('+num+',''+funk+'')',30)
}
else{
eval(funk);
};
}
function iestartzoom(num)
{
numc+=1;
if(numc==5){
txt0.style.visibility='hidden';
bild0.style.visibility='hidden';
txt1.style.visibility='hidden';
bild1.style.visibility='hidden';
StartRotate();
}
groesse=5;
if(num<txtc)
{
iezoom(num,'iestartzoom('+numc+')');
}
else{
iefade(0);
};
};
function ieinitzoom()
{
txt2.style.visibility='visible';
document.all.txt2.style.color=colarray[0];
ztxt='document.all.txt2.innerText=txtarray[num]';
fcol='document.all.txt2.style.color=colarray[num]';
zgroesse='document.all.txt2.style.fontSize=groesse';
num=0;
iestartzoom(0);
}
</script>
<SCRIPT LANGUAGE='VBScript'
type='text/vbscript'>
rc=0
Sub Window_OnLoad()
call SG1.Scale(0.2,0.2,0.2)
call SG2.Scale(0.2,0.2,0.2)
call SG1.Rotate(90,90,0)
call SG2.Rotate(90,90,90)
end sub
Sub RotateAll()
if rc<200
then
rc=rc+1
Call SG1.Rotate(4,6,2)
Call SG2.Rotate(4,6,2)
FILK=Window.SetTimeOut('Call RotateAll',10,'VBSCript')
else
ende()
end if
End Sub
Sub StartRotate()
rc=0
SG1.style.visibility='visible'
SG2.style.visibility='visible'
RotateAll
End Sub
</script>
</head>
<body BGCOLOR='#FFFFFF' TEXT='#000000' onload='javascript:start()'>
<H2>DHTML Fahrzeug-Auktion Kurs Teil 4</H2>
<H3>Windows-Animations-Objekt
in einem 'Fahrzeug-Auktions-Movie'</H3>
<
div style='position:absolute;
left:5px;top:155px;width:100px;height:20px;
z-index:350;visibility:visible'>
<a href='index.php?pg=web-tutorials_dhtml_index.htm'>Zurueck</a>
</
div>
<
div style='position:absolute;
left:10px;top:170px;width:280px;height:220px;
letter-spacing: -4px;font:40pt verdana;
z-index:150;font-weight:bold;color:#424242;visibility:visible'
id='txt0'>
<i>HENRYs Fahrzeug-Auktionen</i>
</
div>
<
div style='position:absolute;
left:300px;top:170px;width:280px;height:220px;
z-index:60;visibility:visible'
id='bild0'>
<img border='0' src='sftcar1.jpg' width='275' alt='Fahrzeug 1'>
</
div>
<
div style='position:absolute;
left:10px;top:170px;width:280px;height:220px;
z-index:50;visibility:hidden'
id='bild1'>
<img border='0' src='sftcar2.jpg' width='275' alt='Fahrzeug 2'>
</
div>
<
div style='position:absolute;
left:300px;top:170px;width:280px;height:220px;
letter-spacing:-4px;font:40pt verdana;
z-index:50;font-weight:bold;color:#424242;visibility:hidden'
id='txt1'>
<i>Naechste Auktion</i>
</
div>
<
div id='txt2' align='center'
style='position:absolute;
top:300px;width:400px,height:300px;
letter-spacing:-4px;font:40pt verdana;
font-weight:bold;z-index:150;visibility:hidden'>
17. August 1998, 11 Uhr
</
div>
<
object id='SG1'
STYLE='POSITION:ABSOLUTE;LEFT:50px;TOP:200px; WIDTH:400px;HEIGHT:400px;
Z-INDEX:201;visibility:hidden'
CLASSID='CLSID:369303C2-D7AC-11D0-89D5-00A0C90833E6'>
<PARAM NAME='Line0001' VALUE='SetLineStyle(1)'>
<PARAM NAME='Line0002' VALUE='SetLineColor(0,155,155)'>
<PARAM NAME='Line0003' VALUE='SetFillStyle(0)'>
<PARAM NAME='Line0004' VALUE='SetFont(Arial,380,700,0,0,0)'>
<PARAM NAME='Line0005' VALUE='Text(Henrys,-95,87)'>
</
object>
<
object id=SG2
STYLE='POSITION:ABSOLUTE;LEFT:50;TOP:50;WIDTH:400;HEIGHT:400;
Z-INDEX:200;visibility:hidden'
CLASSID='CLSID:369303C2-D7AC-11D0-89D5-00A0C90833E6'>
<PARAM NAME='Line0001' VALUE='SetLineStyle(1)'>
<PARAM NAME='Line0002' VALUE='SetLineColor(55,55,0)'>
<PARAM NAME='Line0003' VALUE='SetFillStyle(2)'>
<PARAM NAME='Line0004' VALUE='SetFont(Arial, 380, 700, 0, 0, 0)'>
<PARAM NAME='Line0005' VALUE='Text(Henrys, -95, 0)'>
</
object>
</body>
</html>
(=> auto4.html)
Man beachte, dass aus JavaScript heraus eine VBScript-Funktion
aufgerufen werden kann [=> function iestartzoom(num)].