DHTML - Ein Tutorial

DHTML-Tutorial von Daniel Schwamm (16.10.1998)

Inhalt

1. Goodbye DOS, hello Windows

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 ...

2. Windows, MSIE und das neue Division-Tag

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!

2.1. Beispiel I: Die Mächtigkeit des Division-Tags

2.1.1. Erster Teil: "Hello, world!" mit Division

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)

2.1.2. Zweiter Teil: Positionierung und individuelle Hintergründe

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)

2.1.3. Dritter Teil: Der z-Index der Divisions

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)

2.1.4. Vierter Teil: Ein Bild über eine Tabelle legen

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&nbsp;ZENSUR&nbsp;ZENSUR&nbsp;ZENSUR&nbsp;ZENSUR
     </strong></font>
    </td>
   </tr>
   </table>
  </div>
 </body>
</html>

(=> msie4.html)

2.1.5. Fünfter Teil: JavaScript bringt Bewegung in den Browser

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;|&nbsp;
  <a href='javascript:hidebalken()'>unsichtbar machen</a>
  &nbsp;|&nbsp;
  <a href='javascript:scrollbalken()'>per JS verschieben</a>
  &nbsp;|&nbsp;
  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&nbsp;ZENSUR&nbsp;ZENSUR&nbsp;ZENSUR&nbsp;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.

2.2. Beispiel II: Touchable Alyssa Milano

Man betrachte nun - mit Wohlgefallen - diese 6 Bilder von Alyssa Milano:

2.2.1. Erster Teil: Alyssa Milano gestapelt

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 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)

2.2.2. Zweiter Teil: Alyssa wird "maus-sensitiv"

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?

2.2.3. Dritter Teil: Finetuning bei Alyssa

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 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)

2.3. Beispiel III: Die Autoshow

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.

2.3.1. Erster Teil: Die Seiten-Elemente "divisionalisieren"

Fangen wir klein an und betrachten uns die Bestandteile der Seite, als da wären zwei Bilder:

Web-Tutorials - DHTML - Fahrzeug 1 Web-Tutorials - DHTML - Fahrzeug 2

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.

2.3.2. Zweiter Teil: Animation starten

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)

2.3.3. Dritter Teil: Zooming und Dimming von Texten

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.

2.3.4. Vierter Teil: Einsatz spezieller Browser-Objekte mittels VBScript

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)].