Dynamic HTML, zweite Übung - Workshop Internet-Präsenz

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
   <title>Dynamic HTML, zweite &Uuml;bung</title>

   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

   <meta name="description"
      content="&Uuml;bung Dynamic HTML.">
   <meta name="keywords" content="HTML, DHTML, DOM">
   <meta name="author" content="Roland Unger">

   <script language="JavaScript" type="text/javascript">
   <!--

   var Opera = navigator.userAgent.indexOf("Opera") >= 0, IE = false;
   var DhtmlType = 0;
   // NS4 = 1, IE4 = 2, DOM = 3

   if (document.all) IE = true;
   if (document.createElement) { DhtmlType = 3 }
      else { if (document.all && !Opera) { DhtmlType = 2 }          // fuer IE4
         else { if (document.layers && !Opera) { DhtmlType = 1 }
         }
      };

   var message=new Array("11 hahaha","10 aaaaaaaaaaaaaa","9 bb","8 cccccccccccc",
      "7 ddd","6 eeeeeeee","5 ffff","4 gggggg","3 hhh","2","1","0");

   var colorslist=new Array("white","fuchsia","yellow","red",
      "aqua","silver","gray","purple","maroon","green","navy","black");

   var textwidth=220, textheight=50, pause=1000, i_m=0;

   // nur fuer DOM-Modell
   var myContainer, myTable, myTBody, myRow, myCell, myText;

   // Initialisierung: erstmaliger Start
   function init() {
      switch (DhtmlType) {
         case 0:  alert('Kein DHMTL m\u00f6glich!');
                  break;

                  // Start der Austauschroutine fuer Netscape.
                  // Die eingeschriebene Tabelle wird jedes Mal
                  // in der Austauschroutine neu erstellt
         case 1:  netscape_change_text();
                  break;

                  // Start der Austauschroutine fuer Internet Explorer 4.0.
                  // Die eingeschriebene Tabelle wird jedes Mal
                  // in der Austauschroutine neu erstellt
         case 2:  ie4_change_text();
                  break;

                  // Start der Austauschroutine fuer DOM.
                  // Die eingeschriebene Tabelle wird bereits
                  // jetzt erstellt.
         case 3:  myText=document.createTextNode("Text");
                  myCell=document.createElement("td");
                  myCell.appendChild(myText);
                  myRow=document.createElement("tr");
                  myRow.appendChild(myCell);
                  // IE5, IE6 benoetigen unbedingt tbody-Element
                  myTBody=document.createElement("tbody");
                  myTBody.appendChild(myRow);
                  myTable=document.createElement("table");
                  myTable.appendChild(myTBody);
                  myContainer=document.getElementById("imgcontainer1");
                  myContainer.appendChild(myTable);

                  // Zellenhoehe muss fuer IE5, IE6 ueber Reihenhoehe vermittelt werden
                  myRow.style.height=textheight+"px";
                  with (myTable) {
                     setAttribute("border", "2");
                     setAttribute("cellpadding", "0");
                     setAttribute("cellspacing", "0");
                  };
                  with (myCell) {
                     style.width=textwidth+"px";
                     setAttribute("valign", "middle");
                     setAttribute("class", "divbox"); // funktioniert nicht mit IE5
                     // Nachfolgende drei Zeilen nur IE5, IE6 notwendig
                     style.fontWeight="bold";
                     style.fontSize="10pt";
                     style.fontFamily="Verdana";
                  }
                  dom_change_text();
      }
   }

   // Austauschroutine fuer Internet Explorer 4.0. Ab Version 5.0 wird DOM unterstuetzt.
   function ie4_change_text() {
      with (document.all.imgcontainer1) {
         // Eintrag einer neuen Tabelle mit neuen Eigenschaften
         innerHTML='<table border="2" cellpadding="0" cellspacing="0" width="'+textwidth+
           '" height="'+textheight+'"><tr><td bgcolor="'+colorslist[i_m]+
            '"><span class="divbox" style="color:'+
             colorslist[message.length-1-i_m]+'">'+message[i_m]+'<\/span><\/td><\/tr><\/table>';

         // Verschieben des div-Elements
         style.left=(i_m+1)*10;
         style.top=(i_m+6)*10;

//       Nachfolgendes funktioniert leider nicht
//       style.backgroundColor=colorslist[i_m];
//       style.color="red"
      }

      // Initialisierung erneuter Timeraufruf
      i_m++;
      if (i_m>message.length-1) {i_m=0};
      var timer=setTimeout("ie4_change_text()", pause);
   }

   // Austauschroutine fuer Netscape 4.x.
   function netscape_change_text() {
      with (document.imgcontainer1) {
         // Eintrag einer neuen Tabelle mit neuen Eigenschaften
         document.open();
         document.write('<table border="2" cellpadding="0" cellspacing="0" width="'+textwidth+
          '" height="'+textheight+'"><tr><td><span class="divbox">'+message[i_m]+
           '<\/span><\/td><\/tr><\/table>');
         document.close();

         // Verschieben des div-Elements
         left=(i_m+1)*10;
         top=(i_m+6)*10;
         bgColor=colorslist[i_m];
      }

      // Initialisierung erneuter Timeraufruf
      i_m++;
      if (i_m>message.length-1) {i_m=0};
      var timer=setTimeout("netscape_change_text()", pause);
   }

   // Austauschroutine fuer Document Object Model.
   function dom_change_text() {
      // Text austauschen; IE beherrscht Standard nicht vollstaendig
      if (IE) myCell.innerHTML=message[i_m]
      else myText.replaceData(0, myText.nodeValue.length, message[i_m]);

      // Neue Tabellen-Eigenschaften
      with (myCell) {
         style.backgroundColor=colorslist[i_m];
         style.color=colorslist[message.length-1-i_m];
      }

      // Verschieben des div-Elements
      with (myContainer) {
         style.left=(i_m+1)*10+"px";
         style.top=(i_m+6)*10+"px";
      }

      // Initialisierung erneuter Timeraufruf
      i_m++;
      if (i_m>message.length-1) {i_m=0};
      var timer=setTimeout("dom_change_text()", pause);
   }

   // -->
   </script>

<style type="text/css">

.divbox {
   font-size : 10pt;
   font-family : Verdana;
   font-weight : bold;
   color : black;
   border-width : 0;
   border-color : white;
   border-style : none;
   text-align : left;
}

</style>

</head>

<body bgcolor="#FFEEEE" onload="init()">

<h2>Dynamic HTML (DOM)</h2>

<h3>Dynamische Positionierung</h3>

<div id="imgcontainer1" class="divbox"
   style="position:absolute; top:60px; left:10px; padding:5; height:50; width: 300; background-color: transparent">
</div>

<div class="divbox"
   style="position:absolute; top:130px; left:10px; padding:5; height:50; width: 300; background-color: transparent;">
   <script language="JavaScript" type="text/javascript">
   document.write('Test: ', DhtmlType);
   </script>
</div>

</body>
</html>