Abgründiges bei
|
DHTML - Ein Tutorial
DHTML-Tutorial von Daniel Schwamm (16.10.1998)
Aus "Heimat des Dilettantismus"
http://www.henrys.de/daniel/index.php?cmd=software_dhtml_index.htm
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, floß viel, viel
Wasser den Rhein runter. Meine Welt war MSDOS und vielleicht noch etwas
UNIX/LINUX. Als ich während des Studiums jedoch einen Nebenverdienst suchte,
merkte ich bei den Bewerbungsgesprächen schnell, daß ich nichts finden
würde, wenn ich bei allen Fragen nach Word und Excel und Corel usw. nur
hilflos die Achseln heben konnte.
So kehrte ich also meinem geliebten, weil fixen DOS den Rücken
und wendete mich 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 auf einen 486er auf).
Als ich mein erstes "Hello, world!"-Programm (in C++) programmierte,
dachte ich: 'das kann doch alles nicht war sein' - das war ja schwieriger
als unter X-Windows! Okay, das Objektmodell von Borland schützte einen vor
allzu direkten Kontakten mit der WinAPI, aber dennoch ... Ich weinte echt
meinem guten alten DOS hinterher.
Zwei Dinge bekehrten mich schließlich 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
Entwicklungssplattform Delphi 4.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ößer denke. Als mir diese Tags das erstemal begegneten, fand ich
sie ziemlich überflüssig. Bis ich dann irgendwann die Mächtigkeit
dahinter zu ahnen begann. Doch sehet selbst:
Man nehme einen x-beliebigen ASCII-Editor, z.B. Notepad in Windows,
und tippe folgendes ein:
<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 nicht
vom Hocker:
<html>
<body>
<div style='position:absolute;top:100px;left:1px;background.color:green'>
<font size='7' face='arial' color='#ff0000'><b>
Hello world!
</b></font>
</div>
<div style='position:absolute;top:200px;left:200px;background-color:red'>
<font size='7' face='arial' color='#000000'><b>
Hello world!
</b></font>
</div>
</body>
</html>
|
(=>
msie2.html)
Offenbar helfen Divsions, um Webinhalte punktgenau plazieren zu
können. Das geht mit etwas Fantasie jedoch genausogut mit Tables.
Ich sagte es bereits: Mir kamen die Dinger am Anfang ziemlich
überflüssig vor. Doch jetzt wird's cool:
<html>
<body>
<div style='position:absolute;top:200px;left:50px;z-index:10'>
<font size='7' face='arial' color='#ff0000'><b>
Hello world!
</b></font>
</div>
<div style='position:absolute;top:205px;left:55px;z-index:5;'>
<font size='7' face='arial' color='#000000'><b>
Hello world!
</b></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 Table über
ein Bild:
<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'><b>
ZENSUR ZENSUR ZENSUR ZENSUR ZENSUR
</b></font>
</td>
</tr>
</table>
</div>
</body>
</html>
|
(=>
msie4.html)
Noch schöner wird's aber, wenn man etwas Javascript in's
Spiel bringt, da die Divisioneigenschaften 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:
<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 umplazieren</h3>
<b>Zensur-Balken</b>
<a href='index.php?cmd=sw/dhtml/msie5.html'>zurücksetzen</a> |
<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'><b>
ZENSUR ZENSUR ZENSUR ZENSUR ZENSUR
</b></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 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() schließlich
verändert Timer-gesteuert das pixelTop-Attribut, so daß der Balken nach
unten wandert.
Man betrachte nun diese 6 Bilder von Alyssa Milano:
Im nächsten Beispiel erhält jedes Bild seine eigene Division,
wobei jede Division dieselben Koordinaten einnimmt, so daß
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:
<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 übereinander 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 border=0 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 border=0 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 border=0 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 border=0 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 border=0 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 border=0 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, das die Division mit der ID 6 den höchsten
Z-Index besitzt. Mit dieser Division werden über ...
<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,
daß sowie der Benutzer mit der Maus über die Koordinaten der
Division kommt bzw. sie wieder verläßt, Javascript-Funktionen
aufgerufen werden sollen. Es sind dies die Funktionen:
<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 in's 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 rund zu machen, müssen
die jeweils falschen Timer-Funktion vorher deaktiviert werden. Damit
ergibt sich der komplette Source-Code:
<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 border=0 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 border=0 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 border=0 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 border=0 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 border=0 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 border=0 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-Auktions-Präsentationsseite,
die ich einmal für Henry's Auktionshaus
(www.henrys.de).
zusammengeschustert habe. Fangen wir klein an und betrachten uns die
Bestandteile der Seite:
Dazu packen wir die Divisions
<BODY BGCOLOR='#FFFFFF' TEXT='#000000'>
<h2>DHTML DHTML Fahrzeug-Auktion Kurs Teil 1</h2>
<h3>Die Plazierung der Divisions für 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?cmd=software_dhtml_index.htm'>Zurück</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>Nächste 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, daß wir mehr Divsions
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 schon bei den
Alyssa-Seiten, sodern der User mit MSIE 4.0 surft. Dazu nehmen wir
den Code:
<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 einzelen Farbstufen des Dimmvorgangs.
Anschließend verwenden wir die fonSize- und Color-Attribute der
Divisions zur dynamischen Veränderung. Here is the Javascript:
<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 Registrierungs-DB aufspüren).
Zwei spezielle Objekte legen wir einfach hinter die Divisions.
Zur Beeinflussung der beiden muß jedoch statt auf Javascript auf
VBScript zurückgegriffen werden. Wie dies funktioniert, zeigt der
folgende komplette Source-Code der Autoauktions-Präsentation:
<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 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?cmd=software_dhtml_index.htm'>Zurück</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>Nächste 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, daß aus Javascript heraus eine VBScript-Funktion
aufgerufen werden kann [=> function iestartzoom(num)].
|