Nokia Handy

Inhaltsverzeichnis

• Auf Tastatureingaben reagieren
  
• Aufdringliche Buttons
  
• Cross-Browser-Anwendungen
  
• Cursor-Wechsle-Dich-Spiel
  
• Das WebBrowser-Control
  
• Der Spruch der Woche
  
• Die verschwundene Seite
  
• Drag&Drop
  
• Dynamik mit JavaScript
  
• Dynamisches Inhaltsverzeichnis
  
• Ebenen automatisch bewegen
  
• Ebenen verschieben
  
• Ebenen zeigen und verbergen
  
• Ereignisse abfangen
  
• Fertiges HTML-Dokument
  
• Fliegende Texte und Bilder, I
  
• Fliegende Texte und Bilder, II
  
• Gliederung zum Aufklappen
  
• Hilfe aus dem Internet
  
• Hyperlinks - einmal anders
  
• Identifizieren bitte!
  
• Neuer Inhalt auf Mausklick
  
• Seiten mit Stil
  
• Selektieren unerwünscht
  
• Was dahintersteckt
  
• Willkommen beim Internet Explorer !
  
• Rechtsklick verboten
  
• Licht aus, Spot an!
  

• Auf Tastatureingaben reagieren

  Auf Tastatureingaben reagieren
  Dank des neuen Event-Modells können Sie in Dynamic HTML auf Tastatureingaben des Anwenders reagieren.
  Nicht nur mit dem Mauszeiger können sich Anwender auf den Web-Seiten in das Geschehen einschalten, es lassen sich auch Tasten mit Funktionen belegen. Um mit Tastatureingaben arbeiten zu können, initialisieren Sie zunächst das entsprechende Ereignis (Event).
  Das folgende Beispiel verwendet onkeydown. Es tritt ein, sobald ein Anwender eine Taste drückt:
  document.onkeydown = keyDown;
  Wie in den Beispielen zuvor verwenden Navigator und Explorer je eine andere Syntax.
  Um mit ersterem auf Tastatureingaben reagieren zu können, erweitern Sie die zuvor erzeugte Zeile:
  document.onkeydown=keyDown;
  document.captureEvents(Event.KEYDOWN)
  In der dazugehörigen Funktion übergeben Sie einen unsichtbaren Parameter e, der die ensprechenden Tastatureingaben repräsentiert. Um nun die jeweilige Taste identifizieren zu können, verwenden Sie das Schlüsselwort which. Damit erhalten Sie die Index-Nummer der gedrückten Taste. Abschließend müssen Sie nun diese Index-Nummer in den passenden Buchstaben oder die richtige Zahl umwandeln:
  function Tastatur(e) {//Net
  var taste_index = e.which;
  var taste_genau=String.fromCharCode(e.which);
  alert('Index-Nummer: ' +taste_index+ '\nTaste: ' +taste_genau);}
  document.onkeydown=keyDown;
  document.captureEvents(Event.KEYDOWN);
  Für den Internet Explorer benötigen Sie bei dieser Funktion keinen Parameter. Die Tastatureingaben lesen Sie nicht mit which, sondern mit window.event.keyCode aus. Die dazugehörige Funktion sieht wie folgt aus:
  function Tastatur() {//IE
  var taste_index=window.event.keyCode;
  var taste_genau=String.fromCharCode(window.event.keyCode);
  alert('Index-Nummer: '+taste_index+'\nTaste: '+taste_genau);}
  document.onkeydown=keyDown;
  Nachdem Sie nun wissen, wie die unterschiedlichen Browser auf Tastatureingaben reagieren, sollten Sie Ihre Anweisungen so schreiben, daß sie für beide Browser geeignet sind. Die Funktion keyDown (Listing in Databox 5/98) demonstriert das Verfahren.
  Das Beispiel keyEvent.html (Listing in Databox 5/98) zeigt den praktischen Einsatz. Beachten Sie in diesem Beispiel die unterschiedliche Zuordnung der Tastaturereignisse zu den beiden Browsern. Dies ist nötig, da sich die Index-Zahlen unterscheiden.
  if (taste_ns == 110 || taste_ie==78)
  Das Skript öffnet beim Drücken auf [n] ein neues Fenster, das Sie mit [q] wieder schließen.
  DHTML: Verschachtelte Ebenen
  Einzelne Ebenen können auch in Beziehung zueinander stehen.
  Bei vielen selbstprogrammierten Anwendungen kommen bestimmte Elemente innerhalb einer Hauptebene vor. Änderungen an der Hauptebene wirken sich dabei automatisch auf diese Elemente aus. Verschieben Sie die Mutterebene, werden alle darin enthaltenen Ebenen ebenfalls an eine andere Position versetzt.
  Verschachtelte Ebenen werden in einem DIV-Eintrag eingebunden und wie eine eigenständige Ebene behandelt:
  <DIV ID="Hauptebene">... Inhalt für Hauptebene ...
  <>DIV ID="Unterebene1">..Inhalt UE1..<>/DIV>
  <>DIV ID="Unterebene2">..Inhalt UE2..<>/DIV>
  <>/DIV>
  Um nun eine dieser Ebenen ansprechen zu können, benötigen Sie für jeden Browser eine andere Anweisung:
  document.Hauptebene.document.Unterebene1.Eigenschaft; // für Netscape
  Unterebene1.style.Eigenschaft;
  nestEbene.html (Listing in Databox 5/98) zeigt ein Beispiel für den praktischen Einsatz unterschiedlicher Ebenen. Die darin enthaltenen Funktionen haben wir Ihnen bereits vorgestellt. Diese Anwendung verwendet außerdem externe Style-Angaben, das heißt, alle Formatierungsangaben zu den Ebenen liegen in einem eigenen Anweisungsblock (Zeilen 39 bis 41).
  Um einer bestimmten Ebene eine Hintergrundfarbe zuzuweisen, verwenden Sie die Style-Angaben background-color für den Internet Explorer und layer-background-color für den Netscape Navigator. Durch die Angabe clip können Sie die sichtbaren Bereiche bestimmen, indem Sie als Parameter left, top, right und bottom übergeben.
  
  

• Aufdringliche Buttons

  Aufdringliche Buttons
  Mit einem Trick bringen Sie Ihre Kunden dazu, den Klick Mich!-Button anzuklicken.
  Wie wäre es, wenn Sie eine Seite im Web anschauen, und plötzlich legt sich der Klick Mich!-Button unter Ihren Mauszeiger? Mit clickme.htm (Listing in Databox 11/98) unter DHTML programmieren Sie diese wandernde Schaltfläche. Jedesmal, wenn Sie Ihre Maus etwa drei Sekunden lang nicht bewegen, fängt der Button an, hinter Ihrer Maus herzukriechen, bis er unter Ihrem Mauszeiger liegt.
  Seiten, die ihren Inhalt verschieben, sind geeignete Kandidaten für Lösungen, die sowohl mit dem Internet Explorer als auch mit dem Netscape Communicator zurechtkommen. Um eine Lösung für beide Browser zu implementieren, benötigen Sie zunächst eine Funktion, die den Browsertyp ermittelt. In unserem Beispiel ist dies getBrowserType(). Diese Funktion erkennt zunächst anhand der Variablen navigator.appVersion, ob ein Browser ab Version 4 vorliegt. Ist dies der Fall, prüfen Sie mit der Variablen navigator.appName, ob der Name des Browsers Microsoft oder Netscape enthält. Trifft eine der beiden Bedingungen zu, setzt das Programm die Variable ns4 oder ie4. Ist keine Bedingung erfüllt, erfolgt eine Fehlermeldung.
  Der Button wird mit seinem FORM-Tag in einem eigenen DIV-Abschnitt abgelegt. Dieser Abschnitt muß fest positionierbar sein, was Sie durch die Formatvorlage clickme sicherstellen.
  Nach dem Laden des Beispiels rufen Sie die Funktion setup() auf. Diese stellt den Browsertyp fest.
  Jetzt wird es ein wenig kompliziert. Die Namen der Positionsattribute X und Y für das Mausereignis und für den DIV-Abschnitt, in dem sich der Button befindet, unterscheiden sich im Explorer und im Communicator. Deswegen belegen Sie dafür verschiedene Variablen. Diese Namen fügen Sie bei Bedarf zu Strings zusammen, die Sie auswerten. So vermeiden Sie langwierige If-Abfragen. Setup() definiert eine Funktion (trackMouse()), die bei jeder Mausbewegung aufgerufen wird. Der Communicator verlangt zusätzlich, daß die Mausereignisse an das geöffnete Dokument weitergeleitet werden. Dafür sorgt
  document.captureEvents(Event.MOUSEMOVE)
  Leider wird trackMouse() im Communicator auch dann aufgerufen, wenn der Mauszeiger ruht. Der Button soll sich jedoch erst bewegen, wenn diese Funktion eine Zeitlang nicht aktiviert wurde. Fragen Sie daher zuerst die Position ab. Wenn Sie den Mauszeiger bewegen, bricht der Timer-Lauf ab, um den Button anzuhalten. Ist kein Timer aktiv, berechnen Sie den Abstand zwischen Mauszeiger und Button mit Hilfe des Satzes von Pythagoras. Die Variablen dx und dy bestimmen die Positionsverschiebung des Buttons, wenn dieser sich auf den Mauszeiger hin bewegen soll. Anschließend startet der Timer: Jetzt dauert es drei Sekunden, bis der Button anfängt, sich zu bewegen.
  Danach rufen Sie die Funktion startMoving() auf. Sie installiert einen neuen Timer, der die Verschiebefunktion moveButton() aufruft. Innerhalb von moveButton() wird die Position des Buttons so lange verschoben, bis der Abstand zum Mauszeiger gleich 0 ist.
  Michael Däumling/et
  
  

• Cross-Browser-Anwendungen

  Cross-Browser-Anwendungen
  Mit JavaScript können Sie Eigenschaften des aktuellen Dokuments ändern.
  Wenn sich Benutzer mit dem Mauszeiger durch die Web-Seiten bewegen, kann das eine Aktion auslösen. Da Netscape Navigator und Internet Explorer aber eine unterschiedliche Syntax verwenden, brauchen Sie eine allgemeingültige Funktion.
  Bei Dynamic HTML befinden sich die Dokumenteninhalte in verschiedenen Ebenen. Diese werden meist mit dem DIV-Tag angelegt:
  <DIV ID="Ebene" STYLE="position:absolute; left:50; top:100; width:30;">... Dies ist eine Ebene ...
  </DIV>
  Mit der ID dieser Ebene können Sie später mit JavaScript auf die darin enthaltenen Elemente zugreifen. Der Navigator verwendet hierzu das Layer- und der Explorer das Style-Objekt:
  document.Ebene.eigenschaft
  // für Netscape
  Ebene.style.eigenschaft // für Microsoft
  Dabei können Sie für die ID der Ebene einen beliebigen Namen vergeben. Damit Sie stets die richtige Syntax verwenden, müssen Sie zunächst die vom Anwender verwandte Browser-Version in Erfahrung bringen. Das geht am einfachsten über die Abfrage nach Objekten:
  if (document.layers)
  { ns = 1; ie = 0; }
  else {ns = 0; ie = 1;}
  Diese Anweisung prüft, ob der benutzte Browser das Layer-Objekt von Netscape kennt. Ist dies der Fall, wird der Variablen ns für den Navigator das Flag 1 und der Variablen ie für den Internet Explorer das Flag 0 zugewiesen. Erkennt die Anweisung das abgefragte Objekt nicht, erfolgt die Zuweisung in umgekehrter Reihenfolge. Die übergebenen Zahlen sind sogenannte Boolesche Werte, wobei 1 für true und 0 für false steht.
  Damit Sie die ermittelten Werte in Ihrem späteren Quellcode weiterverwenden können, brauchen Sie eine Funktion, die das geladene Dokument initialisiert:
  function init()
  {if (ns) ebene=document.nameEbene;
  if (ie) ebene=nameEbene.style;}
  Die Funktion binden Sie im BODY-Tag mit dem onLoad-Event ein, damit sie erst nach dem vollständigen Laden des Dokument ausgeführt wird. So gelingt die Initialisierung der beiden Browser.
  BrowserTest.html (Listing in Databox 5/98) greift jetzt auf bestimmte Eigenschaften der Ebenen wie zum Beispiel top oder left zu.
  
  

• Cursor-Wechsle-Dich-Spiel

  Cursor-Wechsle-Dich-Spiel
  Kontext-abhängige Cursorformen sind für dHTML kein Problem.
  Auch das Mauszeiger-Aussehen läßt sich dynamisch verändern: Das Listing dCursor.htm zeigt Ihnen, wie es geht. Es beinhaltet einen Test-Satz. Beim Überfahren mit dem Cursor über einen Satz läßt jedes Wort die Form des Cursors mutieren. Im Verzeichnis .../Programmierung/dhtmlauf der Heft-CD zeigt zeigt dCursor.htmeinen genderten Cursor .ber jedem neuen Wort.
  
  

• Das WebBrowser-Control

  Das WebBrowser-Control
  Auf einfache Weise betten Sie ein WebBrowser Control in ein Formular ein.
  Sie benötigen Visual Basic 5.0 mit Service Pack 2 oder eine spätere Version sowie den Microsoft Internet Explorer ab Version 4.0. Innerhalb eines Visual-Basic- Projekts öffnen Sie ein leeres Formular. Im Menü Projekt/Komponenten/ Steuerelemente selektieren Sie Microsoft Internet Controls, um ihrem Formular eine Instanz des WebBrowser Control hinzuzufügen. Nun sollte die Checkbox Microsoft Internet Controls erscheinen und mit einem Häkchen versehen sein. Öffnen Sie Projekt/Verweise, und setzen Sie das Häkchen bei der Checkbox Microsoft HTML Object Library. Fügen Sie über Ansicht/Werkzeugsammlung ein WebBrowser Control in Ihr Formular ein. Die Größe wird später vom Programm angepaßt.
  
  

• Der Spruch der Woche

  Der Spruch der Woche
  Aus einer Listbox klickt der Betrachter, passend zum Wochentag, ein Motto an.
  Einen ganzen Produktkatalog durchzublättern ist jedoch oft mühselig und zeitraubend. Mit DHTML fassen Sie solche Seiten leicht zu einer einzigen zusammen. Am Beispiel spruch.htm (Listing in Databox 10/98), einer Lebenshilfe für gestreßte Programmierer, läßt sich diese Methode trefflich darstellen.
  Der obere Teil der Site enthält ein kurzes Formular mit einem Auswahlmenü für Montag bis Sonntag. Für jeden Wochentag, den Sie auswählen, lesen Sie das passende Motto. Die Auswahl der Sprüche erfolgt durch die Funktion select(), die als onClick-Event-Methode des Auswahlmenüs definiert ist. Wenn Sie eine Auswahl anklicken, verwendet select() den Text der Auswahl, um einen gleichnamigen DIV-Abschnitt sichtbar zu machen.
  Die Sprüche liegen in eigenen DIV-Abschnitten, die die Namen der Wochentage tragen. Alle enthalten die gemeinsame Formatvorlage Spruch, die Sie als Klasse definieren. Sie setzt sich aus verschiedenen Positionsattributen und dem Attribut visibility:hidden (unsichtbar) zusammen. Durch die gemeinsame Verwendung dieser Vorlagen befinden sich alle Sprüche an derselben Position.
  Um einen DIV-Abschnitt zu sehen oder auszublenden, baut die Funktion select() einen String zusammen, der den entsprechenden JavaScript-Befehl enthält. Die JavaScript-Funktion eval() interpretiert diese Zeichenkette. Wollen Sie etwa den Abschnit Dienstag sehen, erzeugen und interpretieren Sie den String Dienstag.style.visibility = 'visible';.
  Die gleiche Methode läßt sich auch für komplexere DIV-Abschnitte verwenden. Mit Include-Anweisungen (sofern Ihr Web-Server diese unterstützt) lassen sich ebenfalls externe HTML-Seiten einbinden. Auf dem Netscape-Server finden Sie zahlreiche Beispiele, wie sich derartige Systeme mit dem Navigator realisieren lassen. Hinter der Adresse
  developer.netscape.com/docs/manuals/communicator/dynhtml/index.htm
  verbirgt sich etwa die Speisekarte von Nikki's Diner. Diese demonstriert, wie Sie unterschiedliche HTML-Seiten laden können.
  Auch unter der Adresse
  www.mahag.de
  finden Sie diese Listboxen.
  
  

• Die verschwundene Seite

  Die verschwundene Seite
  Sie klicken eine WWW-Adresse an und sind plötzlich hellwach, weil alle Daten verschwinden. Nur ein schwarzer Bildschirm bleibt.
  Die Auswahl von zigtausend farbigen, aufregenden Internet-Seiten läßt die Aufmerksamkeit des Betrachters abstumpfen. Daher greifen Sie zu einem Gag: Während der Betrachter eine neu geladene Seite flüchtig sieht, bemerkt er, wie sie sich langsam schwarz färbt.
  Dieses Beispiel läuft auf dem Netscape Communicator und dem
  Internet Explorer gleichermaßen, da beide Browser über die Eigenschaft (Property) bgColor verfügen und diese auswerten, wenn das Dokument fertig aufgebaut ist. Der Communicator ist bei derartigen Auswertungen recht pingelig, weil er zumeist nur Teile einer Seite neu positionieren kann. Der Explorer läßt hingegen die Änderung weiter Teile der Seite zu und berechnet sogar das Layout neu, wenn sich die Größe von Teilen der Seite geändert hat.
  Das Beispiel in fader.htm (Listing in Databox 10/98) braucht nur eine Funktion rgb(), die aus drei Werten einen Farbcode der Form #rrggbb erzeugt, wobei die drei RGB-Werte als zweistellige Hex-Zahlen zu sehen sind:
  - Der Wert #FFFF00 definiert die Farbe Gelb,
  - 255 (FFhex) Blau
  - und 0 Schwarz.
  Weiterhin brauchen Sie eine Timer-gesteuerte Funktion fade(), die bei jedem Durchlauf die Hintergrundfarbe des Dokuments neu setzt. Wenn die Farbe Schwarz erreicht ist (alle drei Farbwerte sind 0), stoppt der Timer, den die Funktion startFading() nach dem Laden des Dokuments aktiviert hat.
  
  

• Drag&Drop

  Drag&Drop
  Mit wenigen DHTML-Befehlen verschieben Sie Textblöcke mit der Maus.
  Die Tatsache, daß Sie DIV-Layers beliebig verschieben können, läßt sich hervorragend für kleine Spielereien nutzen. Wir haben eine einfache Aufgabe herausgegriffen: Das Beispiel dragdrop.htm (Listing in Databox 8/98) stellt vier verschiedenfarbige Textblöcke dar, die Sie per Mausklick verschieben.
  Dazu definieren Sie erst vier verschiedene Vorlagen - eine pro Block. Positionieren Sie alle Vorlagen absolut, das heißt relativ zum Anfang des Dokuments.
  Der BODY-Bereich der Seite enthält vier DIV-Tags, die die vier Vorlagen anzeigen. Ihre Namen beginnen in unserem Beispiel mit DRAG.
  <DIV ID="DRAG-red">Rot</DIV>
  <DIV ID="DRAG-blue">Blau</DIV>
  <DIV ID="DRAG-yellow">Gelb</DIV>
  <DIV ID="DRAG-black">Schwarz</DIV>
  Diese vier Blöcke bestehen aus verschiebbaren Elementen. Um sie mit der Maus zu erfassen, installieren Sie den Maus-Event-Handler (Ereignisschalter):
  <SCRIPT LANGUAGE=,JavaScript1.2">
  document.onmousedown = grab;
  document.onmouseup = drop;
  document.onmouseover = cursor;
  </SCRIPT>
  Die Funktion grab() identifiziert bei einem Mausklick das zu ziehende Element. Wenn in der Kette der Elemente unter der Maus eines den String DRAG enthält, speichert das Skript die Position des Elements in den globalen Variablen currentX und currentY. Um das zu ziehende Element vor allen anderen zu positionieren, erhöhen Sie das Attribut zIndex. Abschließend installieren Sie einen weiteren Maus-Event-Handler namens move(), um die Maus zu bewegen.
  Die Funktion move() wird anschließend bei jeder Mausbewegung vom Browser aufgerufen. move() berechnet die neue Position des Elements und verschiebt es entsprechend. Die letzte Methode drop() löscht, wenn Sie die Maustaste loslassen, die Referenz auf das zu ziehende Objekt sowie den Event-Handler für das Verschieben der Maus.
  Zuletzt definieren Sie noch eine Funktion cursor(), die Sie aufrufen, wenn sich der Mauszeiger über einem Element befindet. In diesem Fall verwandelt sich im Explorer der Mauszeiger in den Vierfachpfeil, der dem Benutzer ein verschiebbares Element anzeigt.
  Die Implementation ist im Explorer relativ einfach, da in einem Ereignis im Attribut srcElement immer auch das vom Event angesprochene Element mitgeliefert wird. Im Navigator muß das gesamte layers-Array durchsucht werden, um dasjenige Element zu finden, das sich unter dem Mauszeiger befindet.
  Auch im Navigator können Sie keine globalen Event-Handler definieren. Vielmehr müssen Sie diese beim Laden der Seite an jedem Element separat setzen. Weiterhin müssen Sie explizit angeben, daß Sie die Events für die Mausbewegung interpretieren wollen. Der Navigator zeichnet sich dadurch aus, daß Sie ein Element mit Hilfe der Methode moveBy() sehr einfach verschieben.
  Michael Däumling/et
  
  

• Dynamik mit JavaScript

  Dynamik mit JavaScript
  Mit JavaScript gestalten und verändern Sie Ihre Style Sheets.
  Bildschirmvorlagen aus dem Internet, in denen sich nichts bewegt, erregen kaum Aufmerksamkeit. Das können Sie ändern: Animieren Sie Ihre Style Sheets mit JavaScript.
  Die beiden großen Browser Netscape Navigator und Internet Explorer gehen unterschiedliche Wege, um dieses Feature einzubauen:
  Im Navigator halten Sie alle Formatvorlagen mit einem eindeutigen Namen als Objekte im Dokument und im Array layers (Feld von Ebenen) fest, aber nur, wenn die Vorlage auch ein position-Attribut enthält. Den Hintergrund eines Textes färben Sie im Navigator folgendermaßen ein:
  <STYLE TYPE="text/css">
  #Blau { position:relative; color: blue }
  </STYLE>
  . . .
  <H1 ID="Blue">Dieser Text soll blau werden!</H1>
  <script language="javascript">
  document.Blau.bgColor = "Red";
  //alternativ: document.layers[ "Blau" ].bgColor="red";
  </SCRIPT>
  Im Explorer sieht der Code wie folgt aus:
  <STYLE TYPE="text/css">
  #Blau { color: blue }
  </STYLE>
  . . .
  <H1 ID="Blau">Dieser Text soll blau werden!</H1>
  <script language="javascript">
  Blau.style.backgroundColor = "red";
  </script>
  Im Explorer tragen Sie alle Tags mit einem eindeutigen Kennzeichen, ID, direkt in das Windows-Objekt ein, so daß das document-Prefix entfallen kann. Die ID kann einen beliebigen Namen enthalten. Da solch ein Objekt bereits über zahlreiche Attribute verfügt, sind die das Format betreffenden Attribute in einem eigenen style-Objekt zusammengefaßt.
  Da viele Attribute wie font-size (Schriftgröße) einen Bindestrich enthalten, haben sich beide Browser-Hersteller wenigstens darauf geeinigt, in JavaScript statt des Bindestrichs eine Kombination von Groß- und Kleinschreibung zu verwenden: Das Attribut font-size beispielsweise spricht JavaScript als fontSize an.
  Wer die Liste aller Attribute eines Objekts sehen will, setzt folgendes Miniskript ein:
  for( p in objekt ) document.write( p + "<br>" );
  Neben der unterschiedlichen Positionierung der Dokument-Objekte, der unterschiedlichen Anordnung der Attribute und der verschiedenen Attributnamen gibt es noch eine Reihe anderer Abweichungen. Der Explorer schafft es beispielsweise, die ganze Seite neu zu formatieren, wenn sich die Maße eines Objekts ändern. Im Navigator hingegen müssen Sie die Positionen aller Objekte auf der Seite neu berechnen.
  
  

• Dynamisches Inhaltsverzeichnis

  Dynamisches Inhaltsverzeichnis
  Pulldown-Menüs programmieren Sie mit dHTML im Handumdrehen.
  Mit Pulldown-Menüs gestalten Sie übersichtliche Web-Seiten. Dazu stellen Sie im HTML-Teil zunächst mit den Tags <UL>, <LI>, <A> und <SPAN> eine Liste zusammen, die das Inhaltsverzeichnis repräsentiert. Um anzuzeigen, daß sich hinter den Überschriften weitere Menüpunkte verbergen, mutiert der Mauszeiger beim Überstreichen der Topics zur Hand, gleichzeitig ändert sich der Schriftstil des Eintrags. Dieses Verhalten realisieren Sie über Inline-Style-Definitionen, die in den HTML-Code integriert werden. Anzeigen und Verstecken der Pulldowns läuft über das onclick-Event.
  <UL id="ul1" class="up">
  <SPAN onmouseover= "this.style.color='red'"
  onmouseout="this.style.color= 'black'"
  onclick="pullDown('ul1');">
  Filter und Übergnge</SPAN>
  <LI><A href="dFilter1.htm" target=_blank>Filter 1</A>
  <LI><A href="dFilter2.htm" target=_blank>Filter 2</A>
  <LI><A href="dFilter3.htm" target=_blank>Filter 3</A>
  </UL>
  Den zugehörigen Eventhandler schreiben Sie als kleines Javascript, das die Anzeige der Pulldown-Menüs steuert.
  <SCRIPT>
  function pullDown(obj) {
  if (document.all[obj]. className == 'up')
  document.all[obj]. className = 'pd';
  else
  document.all[obj]. className = 'up';}
  </SCRIPT>
  
  

• Ebenen automatisch bewegen

  Ebenen automatisch bewegen
  Laufschriften, ein Dauerklassiker der Programmierung in allen Systemen, gelingen nun auch mit DHTML.
  Wenn Sie eine Ebene mit der zuvor beschriebenen Anweisung auf eine neue x/y-Position verschieben, geschieht dies in einem Schritt. Reizvoller ist es jedoch, wenn Sie eine sogenannte Scrollwirkung erzielen. Dabei wird die Bewegung in einzelne Stufen unterteilt, so daß sich die Schrift dem Zielpunkt beispielsweise in sich wiederholenden 5-Bildpunkt-Schritten nähert:
  Ebene.left += 5;
  Diese Anweisung verschiebt eine Ebene um fünf Pixel, indem sie zur aktuellen x-Koordinate (left) die entsprechenden Pixelwerte addiert. Um einen Scrolleffekt zu erzielen, führen Sie diese Aktion kontinuierlich bis zu einem definiertem Ziel durch. Dazu setzen Sie die setTimeOut-Methode ein:
  function scrollen(ziel) {
  if (Ebene.left < ziel) {
  Ebene.left += 5;
  setTimeout('scrollen()', 30);
  }
  }
  Eine If-Abfrage prüft dabei, ob die Ebene bereits am Ziel ist. Sobald dies der Fall ist, endet das Scrollen. Der Parameter ziel
  übergibt die x-Koordinate. setTimeOut ruft die Funktion alle 30 Millisekunden erneut auf. Damit scrollt die Ebene jeweils fünf Pixel weiter von links nach rechts.
  Leider verwenden Explorer und Navigator eine unterschiedliche Syntax beim Aufruf von setTimeout.
  Bei letzterem genügt die Anweisung
  setTimeout(Funktionsname,
  Verzögerung in Ms,
  Parameter1, Parameter2, usw);
  Beim Explorer müssen Sie dagegen die in einer Zeichenkette zu übergebenden Parameter nach folgendem Muster aufteilen:
  setTimeout('Funktionsname
  (' +Parameter1+ ', ' +Parameter2+ ')',
  Verzögerung in Ms)
  Um Fehlermeldungen zu vermeiden, sollten sich alle Anwendungen, die setTimeout verwenden, an die letzte Schreibweise halten. Möchten Sie die Ebene von rechts nach links scrollen, müssen Sie diese Funktion wie folgt abändern:
  function scrollen(ziel) {
  if (Ebene.left > ziel) {
  Ebene.left -= 5;
  setTimeout('scrollen(' +ziel+ ')', 30)
  }
  }
  Nach diesem Schema optimieren Sie die Funktion mit zwei weiteren Parametern. Diese übergeben dem Programm die Laufweite der einzelnen Scrollbewegungen und den Verzögerungswert.
  Beim Internet Explorer sind wieder einige Besonderheiten zu beachten. Würden Sie nämlich obiges Beispiel nach gleichem Muster erweitern, wäre nur der Navigator in der Lage, den Anweisungen zu folgen. Fügen Sie dem Programm deshalb folgende Zeile hinzu:
  Ebene.x=parseInt(Ebene.left)
  Dann tauschen Sie die folgenden Zeilen aus:
  if (Ebene.x < ziel) {
  Ebene.x += laufweite;
  Ebene.left = ebene.x
  Diese Ergänzungen sind notwendig, da der Explorer für Positionsangaben den Zusatz px benötigt, statt 10 also 10px. Im Beispiel zuvor stört dies zwar nicht weiter, tiefer strukturierte Programme mit mehreren Parameterübergaben erzeugen jedoch Laufzeitfehler. Die Gründe hierfür sind nicht bekannt.
  Da der Navigator Zahlen erwartet, müssen Sie den übergebenden String mit parseInt() in einen Integer-Wert umwandeln. Nach dem gleichen Strickmuster ändern Sie die Werte für die Eigenschaft top.
  Jetzt ist slideEbene.html (Listing in Databox 5/98) in der Lage, der Funktion weitere Parameter zu übergeben, die unter beiden Browser-Versionen einwandfrei funktionieren.
  
  

• Ebenen verschieben

  Ebenen verschieben
  Genauso wie Sie eine Ebene verbergen oder zeigen können, verschieben Sie sie auch an eine beliebige x/y-Position.
  Wer eine definierte Fläche seiner Web-Seite anklickt, findet sich vielleicht überraschend in einer neuen Ebene wieder. Dabei übergeben Sie den Eigenschaften top und left einer Ebene neue Koordinaten. Beachten Sie hierbei - wie auch schon im Beispiel zuvor - die je nach Browser unterschiedliche Referenzierung:
  document.Ebene.top = 50;
  // Ebene 50px von oben (Netscape)
  Ebene.style.left = 200;
  // Ebene 200px von links (IE)
  Auch bei diesem Beispiel sollten Sie eine allgemeine Funktion erzeugen, mit der Sie über eine einzige Anweisung diese Eigenschaften ändern können:
  function verschieben() {
  ebene.top = 100;
  ebene.left = 300;}
  Damit Sie eine Ebene noch flexibler an eine bestimmte Position verschieben können, übergeben Sie der Funktion die x/y-Koordinaten anhand von Parametern:
  function verschieben(x, y) {
  ebene.top=x;ebene.left=y;}
  So verschiebt etwa MoveEbene.html (Listing in Databox 5/98) eine Ebene nach top=80 und left=300.
  
  

• Ebenen zeigen und verbergen

  Ebenen zeigen und verbergen
  Machen Sie die Inhalte der verschiedenen Ebenen sichtbar, oder verstecken Sie sie.
  Nach dem Laden der Seite können Sie Ebeneninhalte sichtbar bzw. unsichtbar machen. Dazu benötigen Sie die visibility-Eigenschaft.
  Der Navigator Netscape verwendet hierbei die folgende Syntax:
  document.Ebene.visibility="show"; // Ebene zeigen
  document.Ebene.visibility="hide"; // Ebene verstecken
  Anders der Internet Explorer:
  Ebene.style.visibility="visible"; // Ebene zeigen
  Ebene.style.visibility="hidden"; // Ebene verstecken
  Damit Sie für Ihre Anwendungen nicht immer wieder den gleichen Quelltext mit unterschiedlichen Namen schreiben müssen, empfiehlt es sich, hierzu eine globale Funktion anzulegen:
  function zeigen(ebene) {
  if (ns)ebene.visibility="show";
  if (ie) ebene.visibility="visible";}
  function verbergen(ebene) {
  if (ns)ebene.visibility="hide";
  if (ie) ebene.visibility="hidden";}
  Dank dieser allgemein gehaltenen Anweisungen können Sie jetzt jede beliebige Ebene mit einer entsprechenden Funktion aufrufen. Als Parameter übergibt SwitchEbene.html (Listing in Databox 5/98) hierbei den Namen der Ebene, die Sie auf diese Weise manipulieren möchten.
  
  

• Ereignisse abfangen

  Ereignisse abfangen
  Das Schlüsselwort With Events läßt nichts anbrennen. Sie bekommen alle User-Aktionen mit und reagieren darauf.
  Um auf User-Aktionen flexibel zu reagieren, müssen die im dHTML-Formular ausgelösten Ereignisse an den Visual- Basic-Teil gebunden werden. Aus diesem Grund wird bei der Deklaration der entsprechenden Objektvariablen das Schlüsselwort With Events verwendet:
  Option Explicit
  Private WithEvents myDoc As HTMLDocument
  Private WithEvents myObj As HTMLInputElement
  Private docLoad As Boolean
  Private Const MY_PATH As String = "c:\PC-M\03\"
  Private Const MY_FILE As String = "c:\PC-M\03\wb.htm"
  Dadurch stehen dem VB-Programm Er-eignisroutinen wie OnClick() oder On-MouseDown() zur Verfügung.
  
  

• Fertiges HTML-Dokument

  Fertiges HTML-Dokument
  Im Load-Event des VB-Formulars laden Sie ein HTML-Dokument.
  Der Navigate-Befehl holt Ihnen ein beliebiges HTML-Dokument ins Web-Browser Control.
  Private Sub Form_Load()
  WebBrowser1.Navigate MY_FILE
  End Sub
  Nach dem Ladevorgang wird das DokumentComplete- Event ausgelöst. Damit instanziieren Sie die Objektvariablen, um das geladene Dokument zu verändern. Sobald die Instanzen eröffnet sind, sind über die Objektvariablen alle dHTML-Objektmodell-Eigenschaften auf Abruf bereit:
  Private Sub WebBrowser1_ DocumentComplete(ByVal pDisp As Object, URL As Variant)
  With WebBrowser1
  If .Document Is Nothing Then
  MsgBox "Kein Dokument!"
  Exit Sub
  End If
  End With
  Set myDoc = WebBrowser1.Document
  InitializeDocument
  Set myObj = myDoc.f2.inp2
  End Sub
  Schließlich bringen Sie das Dokument mit Form_Resize in Paßform.
  
  

• Fliegende Texte und Bilder, I

  Fliegende Texte und Bilder, I
  Mit dynamischer Positionierung lassen Sie per dHTML Schriften quer über den Schirm laufen.
  Bewegliche Texte oder Laufschriften erzielen Sie mit dem HTML-Tag mar- quee. Dieser Befehl versagt jedoch, wenn der Text schräg über den Bildschirm fliegen soll. In diesem Fall sollten Sie auf die dynamische Positionierung per dHTML zurückgreifen. Dazu legen Sie zuerst einen DIV-Container an und positionieren ihn mit CSS-Attributen:
  <DIV ID="divMove" CLASS= "DiagonalTxt">Dynamische</DIV>
  <STYLE>
  .DiagonalText { position: absolute;top:0;left:0; }
  .DisplayText { position: absolute;top:300;
  left:330;width:200;
  color:red;visibility:hidden; }
  </STYLE>
  Als nächstes schreiben Sie eine Funktion, die die Bewegungskurve des Textes berechnet. Sie verwendet die Formel
  y=mx + b,
  wobei b den Offset zur Vertikalachse und m die Steigung bestimmt. Mit der setInterval-Methode kontrollieren Sie, wie oft die Funktion ausgeführt wird. Sie rufen setInterval über die Funktion pau-seStart() auf, die Sie zum Beispiel über das BODY-onLoad-Event starten.
  <BODY onload="pauseStart()">
  
  

• Fliegende Texte und Bilder, II

  Fliegende Texte und Bilder, II
  Auch Bilder lernen fliegen - dank dHTML, was im Web für Aufmerksamkeit sorgt.
  Lassen Sie Ihre Web-Seiten blinken und funkeln! Dabei bezeichnet man mit Positionierung die Fähigkeit, ein HTML-Element an einer beliebigen Stelle im Dokument zu plazieren, indem man ihm eine x/y-Koordinate sowie eine Ebene per z-Index eindeutig zuord-net. Auf diese Weise können Sie auch Text und Bilder überlappen. Im Programmierbeispiel fliegt eine kleine GIF-Grafik von rechts kommend ins Bild und wird schließlich hinter einen bestehenden Text geschoben. Im Verzeichnis .../Programmierung/dhtmlauf der Heft-CD zeigt zeigt dFly2.htm, wie Sie eine Grafik hinter einen Text schieben.
  
  

• Gliederung zum Aufklappen

  Gliederung zum Aufklappen
  Mit einer aufklappbaren Gliederung wird Ihr HTML-Dokument übersichtlich.
  Während man in Büchern einzelne Seiten anhand der im Inhaltsverzeichnis gefundenen Angaben aufschlägt, klicken Sie sich in HTML-Dokumenten von der Gliederungs-Ansicht aus zu den dahinter liegenden Kapiteln durch. Per Klick auf eine Überschrift klappt der Text dahinter auf.
  Im Explorer programmieren Sie ein derartiges HTML-Dokument ohne großen Aufwand. Jede Style-Sheet-Beschreibung enthält ein display-Attribut (Darstellungsmerkmal), das angibt, wie der Inhalt eines Tag darzustellen ist. Hat das Attribut den Wert none, verschwindet der Text. Ein Explorer-Skript darf dieses Attribut verändern, was Ihre Web-Seite in neuem Format darstellt. Es genügt also, dem display-Attribut einer Stilvorlage den Wert none zuzuweisen, um das entsprechende Tag verschwinden zu lassen.
  gliederung.htm (Listing in Databox 8/98) demonstriert im Explorer die Gliederungs-Ansicht. Das Auf- und Zuklappen eines Abschnitts übernimmt die Funktion expand(), die dem display-Attribut den Wert none oder einen Leerstring zuweist. Um die Funktion aufzurufen, geben Sie die Pseudo-URL
  javascript:expand(name)
  im Link-Tag ein.
  Damit ein Link nicht als solcher erkennbar ist, definieren Sie im Header ein Stilvorlagen-Element für Links innerhalb einer H3-Überschrift, das die Farbe auf Schwarz setzt und die Unterstreichung unterbindet. Da der Explorer die Web-Seite nach dem Ändern des display-Attributs neu formatiert, ist Ihre Arbeit hiermit beendet.
  Leider können Sie das display-Attribut im Navigator nicht ändern. Greifen Sie auf das Attribut visibility zurück, das ein Element unsichtbar machen kann, ohne die Seite neu zu formatieren. Verwenden Sie eine verschiebbare Ebene (Layer). Der Trick besteht darin, alle Seitenelemente als DIV-Layer zu definieren, damit Sie sie positionieren können.
  Sie programmieren eine Funktion arrange(), die alle Elemente abarbeitet und die vertikalen Positionen eines jeden Textblocks anhand der Position des vorherigen Blocks neu berechnet. Rufen Sie diese Funktion mit dem onLoad-Attribut des BODY-Tag nach dem Laden auf, weil sonst alle Textblöcke übereinander stehen würden. Die Funktion arrange() überspringt dabei alle unsichtbaren Textblöcke, was Sie am Style-Attribut visibility:hide erkennen.
  Genau wie beim Explorer-Beispiel klappen Sie eine Gliederung durch einen Klick auf die Überschrift auf und zu. Der Navigator-Version von expand() übergeben Sie nicht das aufzuklappende Element, sondern dessen Namen. Das visibility-Attribut des Elements wird entweder auf show oder auf hide gesetzt. Anschließend rufen Sie die Funktion arrange() auf, um das Dokument neu zu formatieren. Für Netscape sehen Sie in gliederungNS.htm (Listing in Databox 8/98) das Programm.
  
  

• Hilfe aus dem Internet

  Hilfe aus dem Internet
  Ein aktueller Download der Spezifikationen und Referenzen zum Netscape Navigator und zum Internet Explorer dokumentiert den Entwicklungsstand.
  Gedruckte Anleitungen zu aktuellen Browser-Versionen suchen Sie vergeblich. Dafür werden Sie im Internet fündig: Die Style-Sheet-Referenz für den Navigator lesen Sie unter der Adresse
  http://developer.netscape.com/docs/manuals/communicator/dynhtml/index.htm
  und die Explorer-Referenz unter
  http://www.eu.microsoft.com/msdn/sdk/inetsdk/help/dhtml/references/css/attributes.htm#ie40_cssref
  Die Web-Site
  webreview.com
  listet genau auf, was beide Browser unterscheidet.
  
  

• Hyperlinks - einmal anders

  Hyperlinks - einmal anders
  Auch ohne Javascript-Funktionen steuern Sie das Aussehen Ihrer Hyperlinks.
  Dieser Tip demonstriert Ihnen zwei-erlei: Zum einen führen Sie Aktionen ab-hängig von der Version des Internet Explorer durch. Zum andern installieren Sie innerhalb des HTML-Codes, also ohne spezielle Javascript-Funktionen, einen Eventhandler. Für das erste Vorhaben implementieren Sie in der <HEAD>-Sektion des HTML-Dokuments den folgenden Script-Code:
  <HTML><HEAD>
  <script language="javascript">
  var isDHTML = (navigator. userAgent.indexOf('MSIE 4') > 0)||(navigator.userAgent.indexOf
  ('MSIE 5') > 0);
  </script>
  </HEAD>
  Mit diesem Codefragment definieren Sie eine Variable isDHTML, die nur dann wahr ist, wenn entweder die IE-Version 5.0 oder 4.0 vorliegt. Diese Versionen sind in der Lage, mit dHTML umzugehen. Im HTML-Code selbst fragen Sie nach Bedarf dann den Wert der Variablen ab. Dies ist im Beispielcode in den Events onMouseOver und onMouseOut realisiert. Um keine eigene Funktion schreiben zu müssen, verwenden Sie das Schlüsselwort javascript: und geben hinter dem Doppelpunkt den Javascript-Code für die Abfrage an:
  <BODY>
  <A href="about:blank.htm"
  onmouseover="javascript:isDHTML ?this.innerText='Klick mich': null"
  onmouseout="javascript:isDHTML ?this.innerText='Neues Doku': null">
  Neues Dokument</A>
  </BODY></HTML>
  Der Text des Hyperlinks ändert sich beim Überfahren mit dem Mauszeiger nur dann, wenn die Browserversion IE 4 oder IE 5 entspricht.
  
  

• Identifizieren bitte!

  Identifizieren bitte!
  Das Verursacherprinzip findet für jedes Ereignis einen Auslöser: So finden Sie den Täter.
  Ist ein Mausklick-Ereignis innerhalb einer Prozedur abgefangen, ist noch das auslösende Objekt herauszufinden. Unser Beispielprogramm fügt im HTML-Formular ein INPUT-Element ein, das als hidden deklariert wird, damit es im Formular selbst nicht sichtbar wird. Das VB-Programm kann dieses Schnittstellen- Element über seine Name-Eigenschaft identifizieren. Die in Frage kommenden dHTML-Objekte (Buttons, Links, Images) erhalten über Javascript-Inline- Anweisungen den Auftrag, beim OnClick-Ereignis die Value-Eigenschaft des Schnittstellen-Input-Elements auf die eigene ID zu setzen.
  
  

• Neuer Inhalt auf Mausklick

  Neuer Inhalt auf Mausklick
  Mit dHTML ändern Sie den Inhalt eines Dokuments nach Belieben.
  Der Betrachter verändert die Webseite per Mausklick. Der Internet Explorer lie-fert Ihnen dazu mit dem dHTML-Ob-jektmodell einen umfangreichen Satz an Eigenschaften und Methoden: Damit bauen Sie Dokumente dynamisch auf, fügen Elemente ein und entfernen diese wieder oder machen sie sicht- und unsichtbar. Sie modifizieren den vorhandenen Text mit dHTML nach dem Laden des Dokuments in den Browser. Das einfache Do-kument des nachfolgenden Listings dContent.htm demonstriert, wie sich per Mausklick der Text ändert. Im Verzeichnis .../Programmierung/dhtmlauf der Heft-CD zeigt dContent.htm, wie Sie per Mausklick den Text ver-ndern.
  
  

• Seiten mit Stil

  Seiten mit Stil
  Geben Sie Ihren Seiten mit Stilvorlagen ein neues Aussehen.
  Wollen Sie Ihre Web-Sites mit neuem Layout präsentieren? Dann verwenden Sie die in HTML 4.0 definierten Style Sheets (auch Cascading Style Sheets genannt). Das sind Vorlagen, die Sie zum Formatieren von Teilen eines Dokuments festlegen. Im Internet finden Sie sie unter der Adresse
  www.w3.org/TR/REC-CSS1
  Ein Dokument besteht aus dem HEAD- und BODY-Bereich. Um es zu formatieren, nutzen Sie den STYLE-Tag, einen HTML-Befehl im HEAD-Bereich.
  Wollen Sie zum Beispiel eine neue Schriftart für Überschriften festlegen, verwenden Sie folgende Syntax:
  <STYLE TYPE="text/css">
  H1 { font-family: sans-serif; font-size: 18pt; }
  </STYLE>
  Erweitern Sie das Konzept so, daß eine Vorlage auf einer anderen aufbaut. Legen Sie zum Beispiel die Schriftart für alle H-Tags fest, deren Schriftgröße Sie separat bestimmen:
  <STYLE TYPE="text/css">
  H1,H2,H3 { font-family: sans-serif;font-size:18pt;}
  H2 { font-size: 16pt; }
  H3 { font-size: 14pt; }
  </STYLE>
  Mit Style Sheets können Sie noch weitere Gestaltungsaufgaben lösen. Legen Sie zum Beispiel mit DHTML eine Vorlage für beliebige Elemente an. Mit dem Zeichen # legen Sie einen Namen für die Vorlage fest. Mit dem ID-Attribut kann jeder Tag eine derartige Vorlage anfordern:
  <STYLE TYPE="text/css">
  #Blau { color: blue; }
  </STYLE>
  . . .
  <P ID="Blau">Das Meer ist blau.
  Darüber hinaus können Sie mit dem DIV-Tag Textblöcke und mit dem SPAN-Tag Textsequenzen mit einem eigenen Format versehen. Folgendermaßen stellen Sie Text blau dar:
  <SPAN STYLE="color:blue">Das Meer ist blau.
  
  

• Selektieren unerwünscht

  Selektieren unerwünscht
  So unterdrücken Sie das onSelectStart-Event, welches die Bedienung des Pulldown-Menüs stört.
  Viele Anwender klicken auch dann doppelt auf die Elemente einer Website, wenn nur ein Einzelklick notwendig wäre. Der Doppelklick löst das onSelec-tStart- Event aus, mit dem man norma-lerweise eine Textauswahl trifft. In vie-len Fällen, so etwa beim Pulldown-Menü, ist dieses Verhalten unerwünscht, sogar störend. So stellen Sie es ab:
  <BODY onselectstart= "event.returnValue=false;">
  Setzen Sie im Image-Tag die Attribute ID und STYLE.
  Im STYLE-Attribut geben Sie den gewünschten Filter und die Dauer des Übergangs an.
  Ebenfalls im STYLE-Attribut setzen Sie die visibility-Eigenschaft auf hidden
  Schreiben Sie eine Javascript-Funktion, die den Filtereffekt initiiert und starten Sie die Funktion.
  
  

• Was dahintersteckt

  Was dahintersteckt
  Den Schlüssel, um richtig in DHTML einzusteigen, finden Sie im Internet.
  Eines der neuesten Schlagworte im Bereich des Web-Authoring heißt Dynamic HTML (DHTML). Mit dieser HTML-Spracherweiterung codieren Programmierer im Internet seit der Version HTML 4.0 ihre Seiten. Stellten ältere HTML-Versionen ein Dokument noch so dar, wie es der Server anbot, erlaubt Dynamic HTML, ein geladenes Dokument nachträglich zu ändern. Unter der Adresse
  www.w3.org/MarkUp/
  laden Sie ein Dokument von 150 KByte mit Erklärungen und Beispielen zu DHTML.
  Mit JavaScript und DHTML-Befehlen betten Sie dynamisch erzeugte Texte in ein Dokument ein, das Sie gerade laden. Dies können Sie in den folgenden Tips nachvollziehen.
  
  

• Willkommen beim Internet Explorer !

  Willkommen beim Internet Explorer !
  Um Aufmerksamkeit zu erregen, animieren Sie den Schriftzug Willkommen.
  Wenn Sie die Grußseite welcome.htm (Listing in Databox 10/98) laden, hat sie etwa drei Sekunden lang eine kleine, unauffällige Überschrift. Danach beginnt die Headline wild zu pulsieren: Sie wächst und schrumpft ununterbrochen.
  Dies ist eine der Seiten, die nur mit dem Internet Explorer funktionieren. Der Communicator läßt Änderungen der Schriftgröße nicht zu, nachdem er die Seite geladen hat.
  Zuerst definieren Sie eine Formatvorlage für die Überschrift. In unserem Fall definiert sie den Text als fett, zentriert und mit einer Größe von 10 Punkt. Wichtig ist auch, daß Sie der Vorlage eine feste Höhe geben - tun Sie das nicht, formatiert der Explorer Ihre Seite ständig neu, so daß der Text "hüpft".
  Sie verwenden zwei verschiedene Timer: Den ersten aktivieren Sie nach dem Laden des Dokuments in der Funktion startWelcome(). Er läuft drei Sekunden lang. Danach hält welcome1() den ersten Timer an und aktiviert einen neuen. Dieser stößt alle 10 Millisekunden, so schnell wie es der Browser zuläßt, die Funktion welcome2() (Zeile 24) an.
  welcome2() setzt die Fontgröße der Stilvorlage ständig neu. Die Fontgröße wird so lange in 8-Punkt-Schritten erhöht, bis sie eine Größe von 128 Punkt erreicht hat. Dann ändert sich die Richtung, bis wieder eine Fontgröße von etwa 10 Punkt erreicht ist. Danach beginnt das Spiel von vorn.
  Wenn Sie mit Timern arbeiten, achten Sie darauf, nicht benötigte Timer immer zu deaktivieren. Versäumen Sie dies oder setzen Sie einen Timer gleich mehrfach ein, laufen die gewünschten Effekte zu schnell ab.
  
  

• Rechtsklick verboten

  Rechtsklick verboten
  Um Ihr geistiges Eigentum zu schützen, haben Sie bereits den Quellcode Ihrer Seite verschlüsselt. Dieser Tipp verrät, ob es Schutzmechanismen für den eigentlichen Content gibt.
  Eine steigende Anzahl von Webmastern und Seitendesignern geht dazu über, die Inhalte ihrer in mühevoller Kleinarbeit gestalteten Web-Angebote zu schützen. Hierzu stehen mehrere Varianten zur Auswahl. Häufig deaktivieren Webmaster das Kontextmenü der rechten Maustaste komplett. Markierte Texte lassen sich zwar dann nach wie vor im Windows-Clipboard ablegen, z.B. über den Shortcut [Strg-C] oder die bei immer mehr Tastaturen eingebaute Kopieren-Taste. Doch der Diebstahl von Bildern wird erschwert. Um auch Ihre Seite resistent gegen Rechts-Klicker (ab Browserversion 3.0) zu machen, erweitern Sie den <body>-Bereich um die Zeilen, die Sie in Listing 1 finden. Falls es Ihnen zu weit geht, die rechte Maustaste komplett zu deaktivieren, können Sie das Kontextmenü zumindest für eingebettete Grafiken aushebeln.. Dann unterbinden Sie das Kopieren von Bildern. Auch diese sehr empfehlenswerte Funktion erledigen Sie mit einem kleinen, in den <body>-Bereich einzufügenden Script (Listing 2). Es ist grundsätzlich möglich, das Markieren von Texten (Internet Explorer ab 4.0 und Netscape 6) zu verbieten. Wer sich für diese drastische Maßnahme entscheidet, schreibt folgende Zeilen in den <body>-Bereich der zu schützenden Seite:
  <script language="JavaScript1.2">
  function disableselect(e){
  return false
  }
  function reEnable(){
  return true
  }
  //if IE4+
  document.onselectstart=new
  Function ("return false")
  //if NS6
  if (window.sidebar){
  document.onmousedown=disableselect
  document.onclick=reEnable
  }
  </script>
  
  

• Licht aus, Spot an!

  Licht aus, Spot an!
  Der Internet Explorer verfügt über eine ganze Reihe von Filterfunktionen, mit denen sich eingebundene Grafiken optisch aufwerten lassen.
  Microsofts Surfhilfe unterstützt seit der Version 4 die spezielle Funktion filter, mit der sich Webgrafiken in Echtzeit verfremden lassen. Detaillierte Informationen zu den Filterfunktionen des Internet Explorer finden Sie unter msdn. microsoft. com/library/default.asp?url=/work shop/author/filter/filters.asp. In diesem Beispiel haben wir uns für den nach wie vor als Hingucker taugenden Spot-Effekt entschieden, bei dem die Besucher einen frei definierbaren Lichtkegel (Attribut s) per Maus über eine abgedunkelte Grafik bewegen. Das Gute daran: Sie müssen das Bild nicht selbst bearbeiten, sondern können jede beliebige Grafik im Originalzustand belassen. Alle Manipulationen führt automatisch die Filterfunktion light durch. Im ersten Schritt erweitern Sie den <>head>-Bereich der Seite um folgende Zeilen:
  <>style>
  <>!
  #meinbild{
  filter:light
  }
  >
  <>/style>
  Anschließend fügen Sie das Script in Listing 2 in den <body>-Bereich der Webseite ein. Nun ist der Effekt aktiv.