Nokia Handy

Inhaltsverzeichnis

JavaScript

• Formulare
  
  • Aufbereitung
    
  • Buttons als Links verwenden
    
  • Inhalte versenden
    
  • Lebende Buttons
    
  • Syntax-Checks
    
• Befehlszeile für die Fehlersuche
  
• Bild im Layer austauschen
  
• Bildschirmauflösung ermitteln
  
• Browser-Versionen
  
• Browsergröße anpassen
  
• Changierendes Farbenspiel
  
• Das Blink-Tag
  
• Das Function Objekt
  
• E-Mail-Adresse chiffrieren
  
• Funktionstest
  
• Hintergrundfarbe bei einer Aktion ändern
  
• Homepage-Inhalte bequem drucken
  
• HTML verstecken
  
• Hyperlink-Unterstreichung vermeiden
  
• Immer on Top
  
• Inhalte nicht ohne Frame laden
  
• Ist JavaScript aktiviert?
  
• Laufschrift
  
• Link zu Favoriten hinzufügen
  
• Mauszeiger im Fadenkreuz
  
• Netscape-Resize-Problem
  
• Neue JavaScript-Versionen
  
• Opera identifizieren
  
• Passwortschutz
  
• Rechte Maustastenfunktion sperren
  
• Schnelle Aufnahme in die Favoriten
  
• Scripts im Web finden
  
• Seite drucken
  
• Seitenleisten
  
• Statusleiste ändern
  
• Variablen aus anderen Fenstern
  
• Verweise
  
• Welche Farbe darf es sein?
  
• Zu Favoriten hinzufügen
  
• Zugang verweigern
  
• Fast wie im Kino
  
• Alternative Zugangsverweigerung
  
• Webseite mit Wasserzeichen
  
• Ungebetene Besucher ausschließen
  
• Fenstergröße festlegen
  
• Zusatzfenster schließen
  
• Browser-Version abfragen
  
• Größe der Überschrift anpassen
  
• Position anzeigen
  
• Mehrere Frames ändern
  
• Bilder an anderer Stelle ändern
  
• Bewegung in der Statuszeile
  
• Sichere Frames
  
• Parlez vous français?
  
• Einfache Passwortabfrage
  
• Countdown
  
• Statuszeilen-Anzeige verstecken
  
• Intelligente Diashow
  
• Unsichtbarer Code
  
• Pop-ups
  
• Uhrzeit auf der Webseite
  
• Tabelle mit Mouse-Over
  
• Fenster schließen
  
• Absätze formatieren
  
• Begrüßen Sie Ihre Besucher
  
• Sprungmenü erstellen
  
• Globale Variable nutzen
  
• Änderungsdatum automatisch
  
• Seite in Favoriten aufnehmen
  
• Aktualisieren per Link
  
• Quelltext-Quickie
  
• Tabellenzeilen hervorheben
  
• Kalendergesteuerte Sternenreihe
  
• Body Check
  
• Link erst nach Bestätigung aufrufen
  
• Benutzerfreundliche Formulare
  
• Animierte Titelleiste
  
• CSSWeiche für Mac und PC
  
• Blinkende Formularelemente
  
• CSS-Weiche für NE 4.x
  
• Submit-Button mit Mouseover
  
• Linkrahmen entfernen
  
• Meldung im neuen Fenster
  
• Digitales Fotoalbum
  
• Inhalt eines Textfeldes markieren
  
• User bestimmt Hintergrundfarbe
  
• Browser-Fenster schließen
  
• Alle Checkboxen markieren
  
• Zahleneingabe prüfen
  
• Rollende Seiten
  
• Unterschiedliche Auflösung
  
• Fehlermeldungen vermeiden
  
• Button mit Bild
  
• Formular nur einmal versenden
  
• Einfacher Zoomeffekt
  
• Kleines Bildermenü
  
• Kontrollierte Auswahl
  
• Tagesaktueller Seitentitel
  
• Abwechslungsreiche Statuszeile
  
• Dynamische Titel per Skript
  
• Text-/Seitenelemente ein- und ausblenden
  
• DHTML-Menüs
  
• Bildergalerie
  

JavaScript

• Formulare

  • Aufbereitung

    Aufbereitung
    Schrittweise verbessern Sie das Layout eines Eingabeformulars.
    Formularelemente behandelt der Browser wie Fließtext. Je nach Größe des Browser-Fensters ändert sich das Aussehen eines Formulars daher gewaltig. Wenn der Browser Ihre Formularelemente nicht beliebig durcheinander würfeln soll, verwenden Sie wieder eine versteckte Tabelle, um die Elemente auf der Seite zu fixieren.
    form1.htm (Listing in Databox 9/97) legt ein Formular zur Dateneingabe an. Ohne jede Formatierung außer dem <BR>-Tag für Zeilenumbruch sieht das Formular arg hausbacken aus. form2.htm (Listing in Databox 9/97) positioniert die Formularelemente mit einer versteckten Tabelle. Da die Eingabefelder unterschiedlich lang sind, belegen sie zum Teil mehrere Spalten. Da Sie in der letzten Zeile in zwei Feldern Telefon- und Faxnummer eingeben, wählen Sie als Basis eine Tabelle mit vier Spalten, je zwei für Beschriftungen und Eingabefelder. Die linke Spalte der Tabelle enthält nur die Beschriftungen. Die Felder für den Vor- und Nachnamen sollen zwei Spalten breit sein (COLSPAN=2), die Felder für die Straße und den Ort drei Spalten (COLSPAN=3). Den Absende-Button zentrieren Sie unter dem Formular. Daher umspannt die Tabellenzelle des Buttons alle vier Spalten mit zentriertem Inhalt (COLSPAN=4 ALIGN= Center). Ein derartiges Formular sieht schon sehr viel besser aus.
    Als letzten Schliff umrahmen Sie Ihr Formular. Den Rahmen erhalten Sie dadurch, daß Sie die gesamte Tabelle wieder in eine mit der Rahmenbreite 4 einbetten. In diesem Fall müssen Sie nur die End-Tags </TD> und </TR> innerhalb der Tabellen verwenden. Ansonsten stoßen die meisten Browser auf Schwierigkeiten. form3.htm (Listing in Databox 9/97) plaziert die Tabelle in einer anderen. Mit diesem Formular braucht sich ein Profi nicht zu schämen.
    
    

  • Buttons als Links verwenden

    Buttons als Links verwenden
    Beachten Sie bei der Vergabe von Links deren Inhalt, um nicht mit dem Gesetz in Konflikt zu kommen.
    Formular-Buttons lassen sich auch als Hyperlinks mißbrauchen. Sie können statt einer E-Mail-Adresse auch eine URL als Formular-Ziel angeben:
    <FORM METHOD="link" ACTION="">http://www.wo.de/index.html">
    <INPUT TYPE="submit" VALUE="Seite">
    </FORM>
    Klickt der Besucher diesen Button an, leiten Sie ihn damit zur angegebenen URL weiter. Da Sie mehrere Formulare auf einer Seite verwenden können, erlaubt Ihnen das Verfahren, mehrere Buttons zu definieren. So starten Anwender von Ihren Seiten die Reise durch das Netz.
    
    

  • Inhalte versenden

    Inhalte versenden
    Sie gelangen an ein Formular, indem Sie es an sich selbst schicken.
    Die meisten Formulare machen nur in Verbindung mit Server-Skripts Sinn, die Ihre Eingaben weiterverarbeiten. Leider haben bei weitem nicht alle Web-Autoren Zugriff auf einen Server, der ihnen erlaubt, eigene Skripts ablaufen zu lassen. Sie gelangen aber noch anders an den Inhalt eines Formulars: Senden Sie sich das Formular per E-Mail:
    <FORM NAME="Eingabe" ENCTYPE=" text/plain" METHOD="LINK" ACTI ">ACTION="mailto:ich@wo-immer.de"><INPUT TYPE=submit VALUE="Email absenden">
    </FORM>
    Wichtig ist das Attribut ENCTYPE, wenn Sie Formulardaten übertragen. Dieses Attribut gibt das Encoding der E-Mail an. Der Datentyp text/plain bedeutet, daß die Daten als unkodierter Text übertragen werden. Der Inhalt der E-Mail landet in Ihrem Briefkasten als:
    name=Hermann Lopau
    strasse=Mittelweg 23
    ort=München
    Ohne das ENCTYPE-Attributs würde Ihre E-Mail wie folgt aussehen:
    name=Hermann+Lopau&strasse=Mittelweg+13&ort=M%FCnchen
    Wer alle & durch LF-Zeichen sowie alle Pluszeichen durch Leerstellen ersetzt und noch die Zeichenfolge %FC rät, liest die E-Mail fast wie Normaltext.
    Die meisten Browser unterstützen zusätzlich die Angabe des Betreffs. Hängen Sie diese einfach an Ihre E-Mail-Adresse an:
    ACTIACTION="ich@wo-immer.de?subject=Test des Formulars"
    Sie dürfen Leerstellen verwenden, den Text des Betreffs aber nicht in Anführungszeichen einschließen. Netscape unterstützt zusätzlich die Angabe von Kopien (cc) und Blindkopien (bcc). Fügen Sie die Liste der zusätzlichen Empfänger hinter das Betreff an mit dem & als Trenner:
    ACTIACTION="ich@wo-immer.de?subject=Test des Formulars &am &bcc=ichauch@wo-immer.de"Es empfiehlt sich nicht, & im Betreff zu verwenden!
    
    

  • Lebende Buttons

    Lebende Buttons
    Ein animierter Knopf verändert sein Aussehen, wenn der Mauszeiger darüber streicht.
    JavaScript animiert Buttons recht leicht. So ein Schaltknopf leuchtet auf, wenn der Mauszeiger darüber streift. Sie benötigen dazu nur zwei gif-Grafiken, die den Button einmal passiv und einmal aktiviert darstellen. Diese Grafiken lädt Ihr Skript jeweils dann, wenn sich der Mauszeiger über dem Bereich der Grafik befindet oder ihn verläßt. Professionelle Forumlare füllen Anwender gerne aus.
    livebtn.htm (Listing in Databox 9/97) belebt Ihren Schaltknopf. Die Grafik definieren Sie mit dem MAP- und dem AREA-Tag. Der MAP-Tag definiert sensitive Bereiche, innerhalb derer wieder das AREA-Tag Grenzen setzt. Unser Beispiel legt nur einen rechteckigen Bereich fest, der die gesamte Grafik abdeckt. In diesem Tag bestimmen Sie die JavaScript-Event-Handlers. Der IMG-Tag der Grafik enthält das Attribut USEMAP, das die für die Grafik zu verwendende Map angibt. Da Sie diese wie meist als URL anlegen, verwenden Sie für lokale Maps das Doppelkreuz. Natürlich muß der IMG-Tag einen Namen erhalten (liveBtn), damit JavaScript die Grafik ansprechen kann.
    Leider funktioniert das Beispiel nur mit dem Navigator ab 3.0. Der Internet Explorer 3.0 kennt die entsprechenden JavaScript-Event-Handlers nicht, so daß der Button inaktiv bleibt.
    
    

  • Syntax-Checks

    Syntax-Checks
    Wenn Sie keine Zahlen eingeben, meldet das Script einen Fehler.
    Oftmals müssen Sie den Inhalt von Eingabefeldern syntaktisch prüfen. So sollte ein numerisches Feld nur Ziffern enthalten. Sie sollten daher derartige Felder auf Korrektheit überprüfen, ehe Sie das Formular zum Server absenden.
    Der Event-Handler onSubmit() prüft dies, bevor Sie das Formular versenden. Soll ein fehlerhaft ausgefülltes Formular nicht abgeschickt werden, muß der Handler den Wert false zurückliefern.
    Beachten Sie, daß der String hinter dem onSubmit-Attribut ein return-Statement enthalten muß. submit.htm (Listing in Databox 9/97) prüft, ob das Feld zahl nur Ziffern-Eingaben aufnehmen kann.
    
    

• Befehlszeile für die Fehlersuche

  Befehlszeile für die Fehlersuche
  Ihr JavaScript-Listing scheint einen Fehler zu enthalten. Um ihn zu finden, wäre eine Befehlszeile hilfreich, in der Sie Anweisungen direkt eingeben könnten, etwa um aktuelle Variablenwerte abzufragen.
  Mit einem kleinen Trick können Sie ein jederzeit verfügbares Dialogfenster basteln, in dem Sie JavaScript-Anweisungen eintippen, die sofort ausgeführt werden. Diese "Befehlszeile" können Sie auch nutzen, um einen Fehler zu finden. Gehen Sie so vor: Zunächst schreiben Sie eine HTML-Seite, die folgenden Link enthält:
  <a href="javascript:void(direkt =prompt('Anweisung:','')) ;void(eval(direkt))">Eingabe
  </a>
  Nun setzen Sie einen Bookmark auf diesen Link, indem Sie ihn mit der rechten Maustaste anklicken und dann im IE Zu Favoriten hinzufügen... wählen. Ab jetzt steht die Befehlszeile Ihnen auf beliebigen Seiten zur Verfügung: Sie können Sie aus ihren Bookmarks bzw. Favoriten aufrufen. Im Netscape Navigator erhalten Sie mit der URL-Direkteingabe javascript: ein neues Fenster, die JavaScript-Console, die für das Debuggen noch besser geeignet ist.
  
  

• Bild im Layer austauschen

  Bild im Layer austauschen
  Sie haben mit dem DIV-Tag einen positionierten Bereich eingerichtet, in dem eine Grafik steht. Nun möchten Sie sie austauschen, was im Internet Explorer funktioniert, nicht aber im Netscape Navigator 4.x.
  In JavaScript tauschen Sie Bilder mit dem IMG-Objekt aus, indem Sie der Eigenschaft src einen neuen Wert zuweisen:
  document.bildname.src="anderesBild.gif"
  Das interpretieren IE und Navigator richtig. Ist das Bild jedoch in einem positionierten Bereich oder Layer platziert, sieht die Sache anders aus. Denn Netscape betrachtet einen Layer als Dokument im Dokument, so dass das IMGObjekt des Bildes nicht wie für den IE ein Objekt des Dokuments ist, sondern für das des Layers. Für Ihr Vorhaben müssen Sie deshalb eine Browser-abhängige Verzweigung einsetzen. Die Anweisung für den Navigator lautet:
  document.layername.document.bildname.src="anderesBild.gif"
  
  

• Bildschirmauflösung ermitteln

  Bildschirmauflösung ermitteln
  Sie entwerfen eine sehr aufwendige Seite, die jedoch nur bei einer bestimmten Fenstergröße gut aussieht. Deshalb wollen Sie abhängig von der Bildschirmauflösung des Anwenders Alternativseiten anbieten.
  Die Bildschirmauflösung können Sie mit screen.height und screen.width ermitteln. Etwas anderes ist die tatsächlich verfügbare Höhe und Breite der Darstellung. Meistens wird etwa bei Windows die Taskleiste ständig angezeigt, so dass ihre Höhe für den Browser wegfällt. Die tatsächlich verfügbare Bildschirmfläche finden Sie in screen.avail-Height und screen.availWidth. Nachdem Sie auf die richtige Seite weitergeleitet haben, können Sie das Browserfenster mit window.resizeTo(x,y); auf die gewünschte Größe bringen.
  
  

• Browser-Versionen

  Browser-Versionen
  Ihre Besucher beschweren sich, dass Ihre Homepage im Netscape 6 fehlerhaft dargestellt wird.
  Netscapes neuste Browser-Version stellt einen radikalen Bruch mit der Vergangenheit dar: Endlich werden die W3C-Standards unterstützt, auf der anderen Seite fehlt die Abwärtskompatibilität zu den Vorgängerversionen. Routinen mit dem Layer-Objekt funktionieren also nicht mehr. Der Fehler in Ihren DHTML-Seiten tritt auf, wenn Sie die immer notwendige Browser-Abfrage mit dem navigator-Objekt nach folgendem Muster vorgenommen haben:
  ((navigator.appName ="Netscape") &&(navigator.appVersion. charAt(0)>=4))
  Fragen Sie statt der Browser-Version besser ab, ob das gebrauchte Objekt vorhanden ist. Folgende Abfrage führt Benutzer des Netscape 6 ebenso wie die älterer Browser zu einer einfachen Alternativseite, die korrekt angezeigt wird:
  if (document.all)
  {...IE-Code...}
  else if (document.layers)
  {...NS 4-Code...}
  else window.location.href= "einfach-page.htm";
  Mit dieser Methode vermeiden Sie auch Fehler im Opera-Browser, der sich als IE oder Navigator ausgeben kann.
  
  

• Browsergröße anpassen

  Browsergröße anpassen
  So passen Sie die Größe des aktuellen Browserfensters nach dem Laden einer Webseite oder bei einer Aktion an.
  In manchen Fällen ist es sinnvoll, die Größe des aktuellen Browserfensters automatisch anzupassen. Das kann beispielsweise der Fall sein, um Inhalte anzuzeigen, die eine fixe Größe voraussetzen oder Webseiten in verschiedenen Größen darzustellen. Für den letzten Fall geben Sie in der Adresszeile des Browsers die folgenden Zeichen ein:
  javascript:resizeTo(x,y);
  Parameter x ist die gewünschte Breite und Parameter y die gewünschte Höhe. Möchten Sie Ihr Fenster auf eine Größe von 800 x 600 ändern, geben Sie Folgendes ein:
  javascript:resizeTo(800,600);
  Um diesen Befehl automatisch ausführen zu lassen, weisen Sie die Funktion resizeTo einem Event-Handler, wie zum Beispiel dem onload-Event zu:
  <body onload="resizeTo (800,600);">
  Beim Laden einer auf diese Art präparierten Seite wird das Browserfenster automatisch auf die angegebene Größe gebracht. Setzen Sie diese Möglichkeit mit Bedacht ein, um Ihre Besucher nicht zu verärgern. Ein abschließendes einfaches Beispiel zeigt, wie Sie das Fenster nach einer Bestätigung durch den Anwender in der Größe ändern.
  if (confirm
  ('Möchten Sie das Browserfenster
  verkleinern?')
  )
  resizeTo(800,600);
  
  

• Changierendes Farbenspiel

  Changierendes Farbenspiel beim Aufruf der Startseite
  Während des Ladens verändert sich die Hintergrundfarbe der Webseite. Die Programmierung ist überaus einfach.
  Die Funktion fade regelt den ansehnlichen Effekt, bei dem sich die Grundfarbe der Webseite binnen Sekunden verändert. Um Ihre Seite um dieses Feature zu erweitern, fügen Sie den Code in Listing 2 in den Head-Bereich ein. Für die Farbgestaltung ist die letzte Zeile fade(0,0,0,255,255,255,100) verantwortlich. Verändern Sie einfach die im Hexadezimalformat angegebenen RGB-Werte (Startfarbe: 0, 0, 0; Endfarbe: 255, 255, 255) sowie die Anzahl der Zwischengradienten (in diesem Beispiel 100), um das Applet an Ihre eigenen Wünsche anzupassen. Allerdings sollten Sie aufdringliche Effekte sparsam einsetzen.
  
  

• Das Blink-Tag

  Das Blink-Tag
  Verwenden Sie für wichtige Schlagzeilen das Blink-Tag von Netscape, und stellen Sie es mit dem Internet Explorer dar.
  In Netscape existiert ein Tag, das eingebundene Inhalte blinkend darstellt. Texte bringen Sie mit folgender Notation zum Blinken:
  < blink>Achtung! Ich blinke
  </ blink>
  Leider funktioniert dieses Tag nicht mit dem Internet Explorer. Sie können diesen Effekt aber mit einfachen Mitteln in Dynamic HTML nachbilden:
  <SCRIPT LANGUAGE="JavaScript">
  <!--
  function Blinken() {
  if (document.getElements ByTagName);
  d=document.getElementsBy TagName("P")[0].style;
  d.visibility = (d.visibility
  == "visible") ? "hidden" : "visible";
  }
  function Timer() {
  window.setInterval(" Blinken()",600);
  }
  //-->
  </SCRIPT>
  Die Funktion Blinken() stellt den Inhalt eines Paragraphen (<P> ... </P>) beim Aufruf abwechselnd auf sichtbar und unsichtbar. Mit Timer() wird die Blinkfunktion zu einem bestimmten Intervall immer wieder aufgerufen, was den blinkenden Effekt bewirkt. Diese Funktion binden Sie im BODY-Tag mit dem Eventhandler onload ein:
  <body onload="Timer()">
  Inhalte, die blinken sollen, können jetzt wie folgt eingebunden werden:
  <blink><P>tachauch</P></blink>
  Beachten Sie dabei, dass Inhalte des ersten im Dokument vorkommenden Paragraphen blinken, da diesem Element in der Funktion Blinken() ein Style mit document. getElementsByTagName("P") [0].style zugewiesen wurde. Wenn Sie den dritten Paragraphen ansprechen möchten oder andere Elemente verwenden, müssen Sie den Index entsprechend anpassen bzw. den Tag-Namen ändern:
  document.getElementsByTagName
  ("TAGNAME")[INDXENUMMER].style;
  
  

• Das Function Objekt

  Das Function Objekt
  Definieren Sie eigene Function-Objekte und weisen Sie ihnen Event-Handlers zu, wie den Mouse-Over-Effekt bei Formular-Buttons.
  Das Function-Objekt kompiliert einen String, der einen JavaScript-Code enthält, zu einer Funktion. Um so ein Objekt anzulegen, verwenden Sie folgende Syntax:
  name = new Function ([Parameter1,
  Parameter2, ...
  Parameter n],
  Body)
  Zum Erzeugen einer Instanz des Function-Objeks nutzen Sie das Schlüsselwort new und geben ihr einen geeigneten Namen. Dabei kann es sich um eine Variable oder um ein bereits existierendes Objekt handeln. Zudem weisen Sie dem Objekt die entsprechende Funktion zu, gefolgt von einem in Kleinbuchstaben geschriebenen Event-Handler. Der so deklarierten Funktion können Sie beliebige Parameter übergeben, die vom Body, (den eigentlichen Anweisungen der Funktion) ausgeführt werden. Mehrere Anweisungen sind durch Semikola voneinander zu trennen. Dazu ein Beispiel, bei dem Sie die Hintergrundfarbe einer HTML-Seite ändern:
  <script language="JavaScript">
  <!
  var farbe = new Function("bg" ,"document.bgColor=bg");
  // >
  </script>
  <body bgcolor="#FFFFFF"
  text="#000000">
  <form>
  <input type="Button" value="BgColor"
  onClick="farbe('blue')">
  </form>
  Als Parameter wird der Funktion farbe() der gewünschte Farbwert für die Hintergrundfarbe übergeben. Der Aufruf erfolgt über einen Event-Handler. Mit dem Function-Objekt lässt sich einem Objekt ein bestimmter Event-Handler zuweisen. Das folgende Beispiel weist einem Form-Objekt das Ereignis onclick zu:
  <form name="form">
  <input name="farbe" type="Button"
  value="Bgcolor ändern">
  </form>
  <script language="JavaScript">
  <!
  document.form.farbe.onclick =
  new Function("document.bgColor='antiquewhite'")
  // >
  </script>
  Initialisieren Sie das Skript erst dann, wenn das zu manipulierende Objekt bereits geladen ist. Andernfalls erhalten Sie eine Fehlermeldung. Der Grund: Sie können einem Objekt nur Eigenschaften zuweisen, wenn es bereits existiert. Dies gilt insbesondere, wenn Sie einem Function-Objekts einen Event-Handler zuweisen. Das folgende Beispiel verdeutlicht Ihnen die Besonderheit dieses Objekts:
  <form name="form1">
  <input name="button1" type="button"
  value="Bitte nicht streifen!">
  <input name="button2" type="button"
  value="Streif mich und öffne
  mich!">
  </form>
  <script language="JavaScript">
  <!
  document.form1.button1.onmouseover =
  new Function("document.form1.button1.value='A U T S C H
  .... !';window.status=
  'Können Sie nicht lesen?'");
  document.form1.button1.onmouseout =
  new Function("document.form1.button1.value='Bitte nicht
  streifen!';window.status='Weg mit
  Dir.'");
  document.form1.button2.onmouseover =
  new
  Function("fenster=window.open('about:blank','test','width=200,height=200')");
  // >
  </script>
  Mit dem Function-Objekt weisen Sie es: Ereignisse onmouseover und onmouseout einem Formular-Button zu. Sobald Sie mit der Maus über den ersten Button streifen, ändert dieser seine Bezeichnung, und ein Text wird in der Statuszeile ausgegeben. Beim Verlassen des Buttons wird der Ausgangszustand wieder hergestellt. Der zweite Button öffnet beim Darüberfahren ein neues Fenster. Funktionen, die Sie durch das Function-Objekt erzeugen, werden zum Zeitpunkt der Deklaration kompiliert und nicht erst beim Aufruf. Auf diese Weise werden sie auch schneller ausgeführt.
  
  

• E-Mail-Adresse chiffrieren

  E-Mail-Adresse chiffrieren
  Machen Sie Ihre E-Mail-Adresse auf der Homepage unsichtbar für die Suchrobots, die E-Mail-Spammer mit neuen Adressen versorgen.
  Sicher kennen Sie das: In Ihrem Postfach landen seit neuestem lästige Werbe-Mails für dubiose Dinge oder gar pornografische Angebote. Woher haben diese zwielichtigen Zeitgenossen Ihre Adresse? Neben etlichen anderen Wegen lassen viele professionelle Spammer spezielle Suchmaschinen (Robots) das Web abklappern, die gezielt nach Mailto-Links auf Homepages suchen. Diese Robots reagieren nur auf das <a>-Tag mit mailto als Referenz. Ein Script macht die E-Mail-Adresse unsichtbar, aber der Besucher Ihrer Seiten sieht weiterhin einen Link, den er nur anklicken muss. Folgende Zeilen bauen Sie dazu an der Stelle Ihrer Homepage ein, an der Sie den Link haben wollen:
  <script language="JavaScript">
  <!-
  var name = "hans";
  var domain = "hoelzl.de";
  document.write('<a href= \"mailto:' + name + '@'+
  domain + '\">');
  document.write(name + '@'+
  domain + '</a>');
  // ->
  </script>
  Sie müssen nur in den Variablen name und domain Ihre persönlichen Angaben eintragen. Ohne JavaScript funktioniert eine einfachere Lösung: Verzichten Sie einfach auf den mailto-Link und schreiben Sie Ihre E-Mail-Adresse als Text auf die Homepage - auch das dürfte einige Robots austricksen.
  
  

• Funktionstest

  Funktionstest
  Damit ein Browser Ihre kunstvolle Seite anzeigen kann, führen Sie zunächst einen Test durch.
  Viele surfen mit Browsern, die entweder kein JavaScript verstehen oder bei denen JavaScript absichtlich deaktiviert ist. Diese Surfer können mit ihrer ausgefeilten JavaScript-Seite nichts anfangen. Geben Sie ihnen Gelegenheit, Ihre Seite erneut mit einem JavaScript-fähigen Browser zu besuchen.
  Sie können nicht-Javascript-fähige Browser mit einer Kombination aus JavaScript und dem NOSCRIPT-Tag leicht überlisten. Moderne Browser erkennen diesen Tag. Diese Browser ignorieren alles zwischen NOSCRIPT und dem End-Tag. Ältere Browser kennen den NOSCRIPT-Tag nicht, sondern ignorieren ihn und geben alles aus, was zwischen NOSCRIPT und /NOSCRIPT steht.
  Das folgende Dokument verwendet dieses Tag. Während des Ladens gibt es die Warte-Aufforderung aus. Danach wird das JavaScript ausgeführt, das im BODY-Tag mit dem onLoad-Attribut definiert wurde. In diesem Fall verzweigt das System automatisch auf das Dokument main.htm:
  <HTML>
  <BODY onLoad="location.href=
  A 'main.htm';">
  <SCRIPT LANGUAGE="JavaScript">
  <!-
  document.write( "WARTEN!");
  // ->
  </SCRIPT>
  <NOSCRIPT>
  KEIN JavaScript installiert!
  </NOSCRIPT>
  </BODY></HTML>
  Denken Sie daran, Ihre Skripts in HTML-Kommentare einzufassen. Ein älterer Browser erkennt das SCRIPT-Tag nicht und würde das Programm sonst als Text ausgeben.
  
  

• Hintergrundfarbe bei einer Aktion ändern

  Hintergrundfarbe bei einer Aktion ändern
  Ändern Sie die Hintergrundfarbe des aktuellen Dokuments, sobald der Anwender eine bestimmte Aktion ausgeführt hat.
  Wäre es nicht ein witziger Effekt, wenn sich die Hintergrundfarbe des aktuellen Dokuments bei bestimmten Aktionen zur Laufzeit dynamisch verändern könnte? Mit JavaScript können Sie auf Aktionen des Anwenders mit programmierbaren Ereignissen reagieren. Klickt beispielsweise ein Besucher Ihrer Seite in ein Formularfeld, können Sie veranlassen, dass sich die Hintergrundfarbe des Dokuments dadurch verändert:
  <FORM>
  <INPUT TYPE="text" NAME=
  "test" onblur=
  "document.bgColor= '#FFFFFF'" onfocus= "document.bgColor= '#98C5A0'">
  </FORM>
  Mit dem Event onfocus wird ein Ereignis ausgeführt, sobald der Anwender ins Formularfeld klickt. Mit onblur wird beim Verlassen des Formularfeldes eine weitere Aktion ausgeführt. Das Beispiel ändert den Hintergrund beim Bearbeiten des Formularfeldes und stellt die ursprüngliche Farbe beim Verlassen des Feldes wieder her. Diese Methode kann besonders in Verbindung mit der Frame-Technik für interessante Effekte sorgen. So ist es beispielsweise möglich, einen inaktiven Frame beim Aktivieren (etwa um einen Link auszuführen) in einer anderen Farbe darzustellen. Um dies zu erreichen, erweitern Sie das BODY-Tag des Frame-Inhalts wie folgt:
  <BODY onblur= "document.bgColor=
  '#FFFFFF'" onfocus=
  "document.bgColor= '#98C5A0'">
  Wenn ein Anwender nun auf dieses Dokument im Frame mit der Maus klickt, wird die Hintergrundfarbe verändert. Sobald er wieder in einem anderen Frame Aktionen ausführt, wird die ursprüngliche Farbe wieder hergestellt.
  
  

• Homepage-Inhalte bequem drucken

  Homepage-Inhalte bequem drucken
  Der Surfer soll das aktuelle Dokument per Klick auf einen Hyperlink drucken. Wir zeigen Ihnen, wie Sie dies bewerkstelligen.
  Ab der JavaScript-Version 1.2 gibt es den Befehl print() zum Ausdrucken von Web-Inhalten bequem aus dem HTML-Dokument heraus per Hyperlink. Binden Sie folgendes Script in den Quellcode ein:
  <SCRIPT LANGUAGE= "JavaScript1.2" TYPE="text/ javascript">
  <!
  if(self.print)
  with(document)
  {
  open("text/html")
  write("<P><A HREF=\"javascript:self.print()\ ">Per Klick hier drauf starten Sie den Ausdruck</A></P>")
  close()
  }
  // >
  </SCRIPT>
  
  

• HTML verstecken

  HTML verstecken
  Mit JavaScript verstecken Sie den HTML-Code Ihrer Webseiten, so dass er sich nicht mehr so einfach anzeigen lässt.
  Um Ihren HTML-Code zu schützen, nutzen Sie JavaScript. Die Grundidee ist dabei: Sie lagern sämtliche HTML-Tags in eine JavaScript-Datei aus, die HTML-Datei besteht nur aus einer Referenz auf diese Datei. Im Body-Bereich der HTML-Datei entfernen Sie alle HTML-Zeilen und fügen statt dessen die folgende Zeile ein:
  <script language="JavaScript"
  type="text/javascript"
  src="meineseite.js"></script>
  Damit lädt der Browser die Datei meineseite. js und führt die darin enthaltenen JavaScript-Befehle sofort aus. Und diese Befehle schreiben mit write Zeile für Zeile die eigentlichen HTML-Tags. Das sieht so aus:
  document.write('<html>');
  document.write('<head><title>Titel</title></head>');
  document.write('<body>HelloWorld.</body>');
  document.write('</html>');
  Die Nachteile: Das System funktioniert nur mit aktiviertem JavaScript, der Seitenaufbau ist meistens langsamer als bei reinem HTML. Zudem kann jeder mit ein bisschen Aufwand, etwa einem Web-Ripper, den HTML-Code aufrufen. Unerfahrenen Raubkopierern dürfte das zu umständlich sein.
  
  

• Hyperlink-Unterstreichung vermeiden

  Hyperlink-Unterstreichung vermeiden
  So beseitigen Sie die ständigen Unterstreichungslinien unter den Links auf Ihrer Homepage.
  Insbesondere Hyperlinks, die in einen Fließtext eingebaut sind, stören durch die obligatorischen Unterstreichungslinien das optische Bild. Schöner wäre es, entweder auf Underlines zu verzichten oder diese zumindest mit einem hübschen Mouse-over-Effekt zu versehen. Zu diesem Zweck bieten sich Cascading Style Sheets (CSS) an. Integrieren Sie in Ihren Quellcode folgende Zeilen:
  <style type="text/css">
  <!
  a:link {
  text-decoration: none;
  color: #000000
  font-size: medium;
  }
  a:visited {
  text-decoration: none;
  color: #666666
  font-size: medium;
  }
  a:hover {
  text-decoration: underline;
  color: #FF0000
  font-size: large;
  }
  a:active {
  text-decoration: none;
  Color: #FF0000
  font-size: medium;
  }
  >
  </style>
  Überall da, wo Sie text-decoration auf none setzen, werden die ungeliebten Unterstreichungslinien zunächst nicht dargestellt. Sie definieren auch, wie ein Link aussehen soll, wenn dieser schon besucht wurde, wenn der Mauszeiger über ihn fährt oder wenn er gerade angeklickt wurde, also aktiv ist. In unserem Beispiel erscheint eine Underline erst, wenn der Maus-Cursor den entsprechenden Link überfährt, und verschwindet spurlos, wenn der Zeiger die Verknüpfung wieder verlässt. Leider verstehen ältere Browser nicht alle im Beispiel verwendeten CSS-Attribute.
  
  

• Immer on Top

  Immer on Top
  Sie haben lange Seiteninhalte und möchten Ihren Besuchern eine einfache Möglichkeit bieten wieder an den Seitenanfang zu springen.
  Manche Inhalte von Webseiten erfordern es, dass der Anwender weit nach unten scrollt. In vielen Fällen verschwinden die Navigationselemente. Üblicherweise haben Anbieter solcher Seiten an geeigneter Stelle eine Rücksprungmarke oben auf der Seite angebracht. Dies erreichen Sie mit herkömmlichen Mitteln mit einem Anker, am besten am Seitentitel angebracht:
  <a name="top"><title>Mein Seitentitel</
  titel>
  Über einen normalen Link können Sie an die angegebene Stelle im Dokument springen. In unserem Beispiel an den Anfang des Dokuments:
  <a href="#top">Zum Anfang</a>
  Mit JavaScript können Sie diesen erweitern. Das folgende Script erlaubt es Anwendern, per Doppelklick auf das aktuelle Dokument an den Seitenanfang zu springen:
  <SCRIPT LANGUAGE="JavaScript">
  <!--
  function goPageTop() {
  window.scrollTo(0,0);
  }
  if (document.layers)
  document.captureEvents (Event.ONDBLCLICK);
  document.ondblclick=goPageTop;
  //-->
  </SCRIPT>
  Falls Sie an eine andere Stelle im Dokument springen möchten, können Sie die gewünschten Koordinaten mit window. scrollTo(x-Koordinate, y-Koordinate) bestimmen. Mit der Angabe
  window.scrollTo(0,200);
  gelangen Sie per Doppelklick exakt an eine Stelle im Dokument, die 200 Pixel von oben entfernt liegt. Um diese Funktion sinnvoll in allen Seiten einzubinden, können Sie das Script in eine externe JavaScript-Datei auslagern (etwa tool.js) und mit der Notation
  <SCRIPT LANGUAGE="JavaScript"
  SRC="tool.js"></SCRIPT>
  einbinden. Diese Funktion arbeitet nur mit Browsern der 4er Generation.
  
  

• Inhalte nicht ohne Frame laden

  Inhalte nicht ohne Frame laden
  So vermeiden Sie, dass Besucher Ihrer rahmenbasierenden Website die über Suchmaschinen gefundenen Inhalte getrennt vom eigentlichen Frameset dargestellt bekommen. Die zu einer Rahmenstruktur
  gehörenden Seiten werden von Suchmaschinen gefunden und für Internet-Surfer separat geladen. Da in diesen für Frames gedachten Inhalten die zugehörigen Navigationsleisten fehlen, ist der Besucher nahezu hilflos, wenn er sich für weitere Inhalte der Homepage interessiert. So machen Sie ihn darauf aufmerksam:
  <script language="JavaScript">
  if (top.frames.length==0)
  document.write("Diese Seite ist Teil eines Framesets. Bitte rufen Sie die <a href='index.html'> Leitseite</a> auf!");
  </script>
  Nun erscheint der Text noch vor der Seitenüberschrift am oberen Bildrand mit dem verweisenden Hyperlink. Der Besucher kann selbst entscheiden, ob er die gesamte Frame-Struktur aufruft oder nicht. Soll jedes Mal das gesamte Frameset aufgebaut und geladen werden, fügen Sie folgendes Script zwischen die Head-Tags in Ihrem Quellcode ein:
  <script language=JavaScript>
  if (top.frames.length==0) location.replace("index.html")
  </script>
  
  

• Ist JavaScript aktiviert?

  Ist JavaScript aktiviert?
  Webseiten enthalten häufig JavaScripts. Zusätzlich schreiben Sie einfache Alternativseiten ohne JavaScript. So führen Sie Besucher dorthin.
  Sie möchten auf Alternativseiten Ihrer Website aufmerksam machen. Erklären Sie auf einer übergeordneten Seite die stilistische Zweiteilung und bieten Sie zwei Links an, mit denen die Besucher zur richtigen Seite kommen. Eleganter ist es, das Weiterleiten zu automatisieren. Folgendes kleine Listing zeigt eine entsprechende Startseite. Sie enthält im Body-Tag eine Weiterleitung per JavaScript, die nur von JavaScript-fähigen Browsern ausgeführt wird und deshalb auf die Seite mit Scripting führt. Außerdem enthält die Startseite eine Weiterleitung mit dem Meta-Tag, die nach fünf Sekunden aktiv wird und die Browser, die JavaScript nicht ausgeführt haben, auf eine einfache Seite führt.
  <html>
  <head>
  <title>Weiterleitung
  Startseite</title>
  <meta httpequiv="
  refresh"
  content="5;
  URL=einfach.html">
  </head>
  <body onload="location.href='jsseite.
  html'">
  Diese Seite leitet Sie nur weiter
  ...
  </body>
  </html>
  
  

• Laufschrift

  Laufschrift
  Schriften laufen seit jeher über die Schirme - so auch im Internet.
  Mit einem kleinen JavaScript-Programm können Sie eine Schrift in der Statuszeile laufen lassen. scroll.htm (Listing in Databox 9/97) nutzt window.setTimeout(), um scroll() alle 100 Millisekunden aufzurufen. So geben Sie Lauftext aus und aktivieren das Timeout neu. Je schneller die virtuelle Maschine Befehle bearbeitet, um so schneller bewegt sich auch der Text durch die Fensterzeile.
  
  

• Link zu Favoriten hinzufügen

  Link zu Favoriten hinzufügen
  Mit dem Aufruf einer internen Funktion fügen Sie beim Internet Explorer eine URL in die Favoritenliste ein.
  Machen Sie es den Besuchern Ihrer Homepage so einfach wie möglich, Ihre Seite in die Favoritenliste des Internet Explorer aufzunehmen. Dazu reicht der Aufruf einer internen Funktion des Browsers über einen Event-Handler. Fügen Sie folgende Zeilen an der gewünschten Stelle in Ihre Webseite ein:
  <!--[if IE ]> <SPAN
  STYLE='color:blue;cursor:hand;'
  onclick='window.external.AddFavorite(location.href,document.title);'>
  <U>
  Diese Seite in Ihre Favoriten
  aufnehmen.
  </U>
  </SPAN>
  <![endif] //-->
  Hier kommen die bedingten Kommentare aus Tipp 22 zum Einsatz. Damit schließen Sie die Anwender des Internet Explorer 4.0 aus falls es solche noch gibt. Stattdessen können Sie eine Browser-Weiche in JavaScript programmieren. Statt des Textes Diese Seite... können Sie auch ein Bild oder andere Objekte einbinden. Im Beispiel übergibt das Tool Adresse (location.href) und Titel (document. title) der aktuellen Seite an den Internet Explorer. Sie können auch eigene Texte in Anführungszeichen einfügen:
  AddFavorite("http://www.pc-magazin.de", "PC Magazin")
  Das Tag <U> sorgt nur für eine Unterstreichung, die Style-Angabe für die blaue Farbe und den typischen Mauszeiger. Das verleiht dem Text das Aussehen eines Links, ist aber überflüssig. Sie müssen nicht befürchten, einen Besucher mit einem solchen Favoriten-Link in eine Falle zu locken. Klickt jemand den Link an, fragt der Internet Explorer nach, ob und in welchem Ordner es den Favoriten einrichten soll.
  
  

• Mauszeiger im Fadenkreuz

  Mauszeiger im Fadenkreuz
  Neben farbigen Scrollbars setzen Designer verstärkt auf alternative Mauszeiger. Die mit Abstand auffälligste Form dieses Seitentunings ist der Fadenkreuz-Cursor.
  Während sich Puristen auf die grundlegendsten grafischen Elemente beschränken, nutzen andere Web-Designer alle Möglichkeiten aus, um ihre Seite aus der Masse hervorstechen zu lassen. Zum Beispiel mit dem Fadenkreuz-Mauszeiger, bei dem der Cursor von einer horizontalen und vertikalen Linie verfolgt wird. Um Ihre Seite um dieses spaßige Feature zu erweitern, fügen Sie den Code im Listing in den so genannten BODY-Bereich Ihrer Seite ein.
  
  

• Netscape-Resize-Problem

  Netscape-Resize-Problem
  Sie verwenden DHTML auf Ihrer Seite. Bei einer Größenänderung des Browser-Fensters zeigt der Netscape Navigator die Seite nicht mehr korrekt an.
  Zeigt der Netscape Navigator die Webseite nicht mehr korrekt an, nachdem Sie das Browser-Fenster vergrößert oder verkleinert haben (ein Fehler der 4er-Versionen), laden Sie es neu. Damit diese Aufgabe nicht beim Besucher Ihrer Seite hängen bleibt, sondern automatisch erledigt wird, fügen Sie folgendes kleine Script in den Head-Bereich Ihrer Seite ein:
  <script language="JavaScript">
  if(!window.wsave) {
  window.onresize = nsfreshup;
  wsave = window.innerWidth;
  hsave = window.innerHeight;
  }
  function nsfreshup() {
  if (wsave != window.innerWidth
  || hsave != window.innerHeight)
  history.go(0);
  }
  </script>
  Wenn Ihre Site mehrere Seiten enthält, in denen Sie problematische Elemente wie absolut positionierte Bereiche einsetzen, ist es einfacher, das Script in eine separate Datei mit der Extension .js zu speichern. Diese binden Sie dann in Ihre HTML-Seite ein:
  <script language="JavaScript"
  src="nsbug.js"></script>
  
  

• Neue JavaScript-Versionen

  Neue JavaScript-Versionen
  Bevor der Browser neue Script-Versionen nutzen kann, müssen Sie dies festlegen.
  Wenn Sie die Vorteile neuerer JavaScript-Versionen nutzen wollen, ohne zuvor die Version des Browsers abzufragen, geben Sie als Sprache JavaScript1.1 für den Netscape Navigator 3.x ein. Der neue Communicator enthält JavaScript in der Version 1.2. Ein Navigator der Version 2.x wird Skripts mit der Sprache JavaScript1.1 nicht interpretieren.
  
  

• Opera identifizieren

  Opera identifizieren
  So beziehen Sie die Fähigkeiten des Opera- Browsers bei der Seitengestaltung stärker ein.
  Ihre Webseiten sehen nicht auf jedem Browser gleich gut aus. Opera erweist sich bei der Browser-Abfrage als Chamäleon: Bei der Prüfung mit navigator. appName meldet er sich je nach Einstellung als Netscape oder Internet Explorer. Eindeutig identifizieren können Sie ihn bei Bedarf mit navigator.userAgent. Wenn Sie jedoch seine noch etwas beschränkten DHTML-Fähigkeiten nutzen wollen, müssen Sie auch wissen, welche Einstellung der Anwender für die Identifizierung gewählt hat. Je nachdem, ob der Opera-Browser sich als IE identifizieren soll oder anders, versteht er unterschiedliche JavaScript-Objekte. document.all etwa kennt er nur, wenn er als Internet Explorer getarnt ist. Die aktuelle Einstellung finden Sie am schnellsten mit einem kleinen Trick mit Hilfe von navigator. userAgent heraus: Ist die Bedingung userAgent.charAt("Opera")==0 wahr, ist er als Opera angemeldet, bei >0 als IE. Das gilt sowohl für die Version 4 und 5. Die Erklärung liegt im Aufbau des Rückgabe-Strings von userAgent. Bei der Identifizierung als Opera lautet er:
  Opera/5.01 (Windows 98; U) [en]
  Gibt sich Opera dagegen als MSIE 5.0 aus, ist der String:
  Mozilla/4.0 (compatible; MSIE
  5.0; Windows 98) Opera 5.01 [en]
  
  

• Passwortschutz

  Passwortschutz
  Sie wollen Bereiche Ihrer Homepage durch ein Passwort schützen, wissen aber nicht wie.
  Wir zeigen Ihnen, wie Sie einzelne Seiten Ihrer Webpräsenz vor ungewollten Zugriffen schützen. In unserem Beispiel ist das Passwort nicht im Quellcode integriert, sondern Teil des Dateinamens. Lautet dieser secret.html, ist das Passwort secret. Durch die Wahl komplexer Bezeichnungen erhöhen Sie den Schutz erheblich. Das JavaScript ist aus zwei Blöcken aufgebaut. Den ersten setzen Sie in den Dateikopf, der zweite stellt den direkten Link dar.
  <script language="JavaScript">
  <!
  function Passw()
  {
  var password = 'Bitte geben Sie hier Ihr Passwort ein!'
  password=prompt('Passwortgeschuetzter Bereich. Ihr Pas swort:','');
  location.href=password + ".html";
  }
  //>
  </script>
  Der Link sieht folgendermaßen aus:
  <a href="javascript:Passw()"> Seite</a>
  
  

• Rechte Maustastenfunktion sperren

  Rechte Maustastenfunktion sperren
  So verhindern Sie, dass Besucher per Klick mit der rechten Maustaste auf Inhalte Ihrer Homepage zugreifen können.
  Sperren Sie mit JavaScript die Funktion der rechten Maustaste, und machen Sie freundlich darauf aufmerksam:
  <script language="JavaScript">
  <!
  function click() {
  if (event.button==2) {
  alert('Diese Internetinhalte können Sie leider nicht mit der rechten Maustaste bedienen!')
  }
  }
  document.onmousedown=click
  // >
  </script>
  Dieser Schutz ist nur aktiv, wenn der Besucher Ihrer Homepage JavaScript auf seinem Rechner eingeschaltet hat.
  
  

• Schnelle Aufnahme in die Favoriten

  Schnelle Aufnahme in die Favoriten
  Kaum ist die Startseite eines Web-Angebots geladen, poppt das Favoriten-Fenster auf.
  Immer mehr Web-Master bieten Besuchern eine komfortable Option an, die Homepage sofort nach dem Laden in die Bookmarks aufzunehmen. Er kann die Surfer mit dem Cookie-Script in Listing 1 einmal wöchentlich darauf hinweisen, die Seite den IE-Favoriten hinzuzufügen. Platzieren Sie das Script im Head-Bereich der Seite. Wer nicht ganz so fordernd auftreten möchte, bietet seinen Besuchern einen Link an, der das Bookmark-Fenster öffnet. Dazu erweitern Sie den Body-Bereich um folgende Zeilen:
  <a href="javascript:window.external.AddFavorite('http://www.IhreSeite.de',
  'Titel Ihrer Seite')">Diese Site den Favoriten hinzufügen</a>
  
  

• Scripts im Web finden

  Scripts im Web finden
  Sie wollen Ihre Seite mit JavaScript aufpeppen, beherrschen diese Sprache aber nicht.
  Im Internet sind unzählige Scripts frei verfügbar, zum Beispiel unter www.geo cities.com/SiliconValley/7116/. Über das Kontextmenü der rechten Maustaste gelangen Sie in der Regel an die entsprechenden Zeilen des Quellcodes solcher Seiten. Das Script kopieren Sie in die Zwischenablage und fügen es im HTMLCode Ihrer eigenen Homepage irgendwo zwischen den beiden Tags <script language=" JavaScript"> und </script> wieder ein. Alternativ können Sie das eigentliche JavaScript auch in eine separate Datei auslagern, beispielsweise listing.js, in Ihren Quellcode muss dann nur noch Folgendes eingefügt werden:
  <script language="JavaScript" scr="listing,js"></script>
  Die JavaScript-Datei muss zwar zusätzlich auf Ihren Homepage-Server geladen werden, dafür können Sie sie getrennt von Ihrer eigentlichen Website bequem in jedem Texteditor bearbeiten.
  
  

• Seite drucken

  Seite drucken
  Mit einem JavaScript-Kommando rufen Sie den Druck-Dialog des Browsers auf.
  Wenn Sie den Besuchern Ihrer Homepage den Ausdruck einer Seite besonders leicht machen wollen, bauen Sie einen Button dafür ein. So erinnern Sie beispielsweise daran, ein Bestellformular zur Sicherheit auszudrucken. Den Kern bildet das Objekt window mit seiner Methode print. Diese Methode steht in allen gängigen Browsern zur Verfügung. Ein Aufruf öffnet den Druckerdialog des Browsers, der Surfer kann die Details einstellen und dann losdrucken. Als Button sieht das Ganze so aus:
  <form>
  <input name="print" type="button"
  value="Seite ausdrucken..."
  onClick="javascript:window.print()">
  </form>
  Der Event-Handler onClick ruft die Methode auf. Alternativ können Sie die Methode auch als Link verpacken:
  <a
  href="javascript:window.print()">
  Ausdrucken...
  </a>
  
  

• Seitenleisten

  Seitenleisten
  Mit JavaScript klinken Sie Ihre eigene Homepage in die Seitenleiste von Netscape 6 ein.
  Eine der interessantesten Neuerungen von Netscape 6 ist die Seitenleiste. Auf der linken Seite zeigt der Browser ein schmales Fenster mit einer Reihe von Registerkarten an. Jede Registerkarte zeigt eine Webseite so können Sie schnell auf entsprechend gestaltete Angebote zugreifen. Über den Button Registerkarten in der Titelzeile der Seitenleiste passen Sie den Inhalt an. Dabei können Sie nur unter bereits vordefinierten Angeboten auswählen, etwa Reiseanbieter oder Börsendienste. Als Webdesigner können Sie den Besuchern Ihrer Homepage eine eigene Rubrik in der Seitenleiste einrichten, um etwa aktuelle Links oder News anzubieten und Surfer auf Ihre Homepage zu locken. Klickt der Besucher die Registerkarte an, holt sich der Browser die aktuelle Version aus dem Internet. Zunächst richten Sie eine Webseite ein, die den Vorgaben der Seitenleiste entspricht. Die Breite sollte 160 Bildpunkte nicht übersteigen. Die Höhe ist flexibel wählbar: Netscape 6 zeigt im Zweifelsfall Rollbalken. In der Webseite dürfen Sie alle üblichen HTML-Tags, CSS oder JavaScript einsetzen. In der Seitenleiste kann der Anwender die Seite nicht neu laden. Damit nicht ewig eine alte Version aus dem Cache des Browser angezeigt wird, bauen Sie zwei Meta-Tags in den Head-Bereich der Webseite ein:
  <meta http-equiv="expires"
  content="0">
  <meta http-equiv="Pragma"
  content="no-cache">
  Damit die zugehörige Webseite beim Anklicken eines Links in der Seitenleiste im Hauptfenster von Netscape erscheint, müssen Sie wie bei Frames ein Ziel angeben:
  <a target="_content"
  href="seite.htm"> Link </a>
  Das Attribut target="_content" leitet die Webseite ins Hauptfenster. Abschließend übertragen Sie sie für die Seitenleiste zu Ihrem Webserver. Ein kleines Script fügt die Webseite als Registerkarte in die Seitenleiste ein. Bauen Sie auf Ihrer Homepage einen Link (Text, Grafik, Formularbutton etc.) ein, der das Script aufruft:
  <a href="javascript: seitenleiste();">
  Seitenleiste einbauen </a>
  In den Head-Bereich der Homepage fügen Sie das Script aus Listing 1 ein. Im Beispiel hat die Datei mit der Webseite für die Seitenleiste den Namen seite.htm. Übergeben Sie der Funktion addPanel() zwei Parameter: Der erste ist der Titel, den die Registerkarte bekommen soll, im Beispiel Meine Leiste. Der zweite ist die Web-Adresse der Datei inklusive http://. Klickt ein Surfer diesen Link an, öffnet Netscape 6 eine Dialogbox. Sie fragt, ob der Browser die angegebene Seite in die Leiste aufnehmen soll. Ein Klick auf OKschließt die Aktion ab. Bei anderen Browsern passiert gar nichts.
  
  

• Statusleiste ändern

  Statusleiste ändern
  Sie möchten Ihren Besuchern in der Statusleiste des Browsers zu einem weiterführenden Link eine nähere Beschreibung geben.
  JavaScript erlaubt Ihnen, die Anzeige in der Statusleiste des Browsers zu verändern. Mit einer simplen Anweisung im href-Tag Ihres Homepage-Quellcodes können Sie in der Statuszeile des Browsers einen beliebigen Text anzeigen lassen. Dies bietet sich insbesondere an, wenn Sie einen Link näher beschreiben möchten. Sobald der Besucher mit der Maus über den Link fährt, erscheint eine von Ihnen vordefinierte Erläuterung in der Statusleiste. Den entsprechenden Befehl fügen Sie in den bestehenden href-Tag ein:
  <a href="test.html"
  onMouseOver="a('Hier lesen Sie die Information zum Link');return true" onMouseOut="b()">Beschreibung siehe Statusleiste</a>
  Sobald der Anwender mit der Maus über diesen Verweis streift, erscheint die gewünschte Nachricht: Hier lesen Sie die Information zum Link. Mit dem OnMouseOut-Befehl verhindern Sie, dass der Text beim Entfernen der Maus weiterhin angezeigt wird. Damit dies alles funktioniert, müssen Sie das folgende Script zwischen den beiden Head-Tags im Quellcode einfügen:
  <script language="JavaScript">
  <!
  function a(txt) {
  self.status = txt
  }
  function b() {
  self.status = ""
  }
  // End Hiding Here >
  </script>
  
  

• Variablen aus anderen Fenstern

  Variablen aus anderen Fenstern
  Sie haben für Ihre Webseite ein Script geschrieben, das ein neues Fenster öffnet. In diesem müssen Sie auf Variablen oder Funktionen des Ursprungsfensters zugreifen können diese sind JavaScript aber unbekannt.
  Variablen und Funktionsdefinitionen gelten immer nur in dem Dokument, in dem sie eingeführt werden. In Ihrem neuen Fenster sind die Objekte des öffnenden Fensters als Unterobjekte von opener verfügbar. Ihre Eröffnungsseite soll eine Variable und eine Funktion enthalten:
  einwert=10;
  function warnung(x) {
  alert(x);
  }
  Dann können Sie darauf im zweiten Fenster folgendermaßen zugreifen:
  opener.warnung(opener.einwert);
  
  

• Verweise

  Verweise
  Der Mauszeiger steuert Hyperlinks.
  Wenn sich der Mauszeiger über einem Hyperlink befindet, wird die URL des Links in der Statuszeile angezeigt. Ein kleines Programm ersetzt diesen Text durch eigenen, wenn Sie die Event Handlers onMouseOver() und onMouseOut() des Hyperlinks programmieren. onMouseOver() ruft der Mauszeiger über dem Link auf, und onMouseOut() wird entsprechend aufgerufen, wenn der Mauszeiger den Link verläßt. Wichtig ist hierbei, daß der Event Handler den Wert false zurückliefert. Das unterbindet nämlich, daß der Browser die URL anzeigt. Tun Sie das nicht, passiert nichts, da der Browser Ihren Text sofort wieder überschreibt. Denken Sie auch daran, daß der JavaScript-Text für die Attribute selbst ein return-Statement, ownlink.htm (Listing in Databox 9/97) enthält.
  
  

• Welche Farbe darf es sein?

  Welche Farbe darf es sein?
  Über die Auswahl der optimalen Hintergrundfarbe lässt sich streiten. Wer sich vor solchen Diskussionen schützen will, greift zu einem ganz einfachen Trick.
  Statt sich den Kopf über die Wahl der Hintergrundfarbe zu zerbrechen, überlassen Sie diese Entscheidung getrost den Besuchern Ihrer Seite. Verwenden Sie ein einfaches JavaScript, das sich leicht an die eigenen Vorlieben anpassen lässt. Zunächst erweitern Sie den Head-Bereich der Seite um die folgenden Zeilen:
  <SCRIPT language="JavaScript">
  function changeBackground(hexNumber) { document.bgColor=hexNumber; } </SCRIPT>
  Im zweiten Schritt geht es an die Definition der gewünschten Farben. In unserem Beispiel stellen wir dem Besucher sechs verschiedene Farbtöne zur Auswahl. Die Farbe der Schrift ("font color="# 5f99ff") haben wir so gewählt, dass der Text bei allen Farbkombinationen gut lesbar ist. Sind die Vorarbeiten erledigt, fügen Sie das nachstehende Listing in den Body-Bereich der Seite ein.
  <FORM method="post" name="farbenspiel">
  <INPUT type="button" value="rot"
  onclick="changeBackground('#cc0000')">
  <INPUT type="button" value="grün"
  onclick="changeBackground('#006600')">
  <INPUT type="button" value="gelb"
  onclick="changeBackground('#ffff99')">
  <INPUT type="button" value="rosa"
  onclick="changeBackground('#ff99ff')">
  <INPUT type="button" value="schwarz"
  onclick="changeBackground('#000000')">
  <INPUT type="button" value="grau"
  onclick="changeBackground('#666666')">
  </FORM>
  
  

• Zu Favoriten hinzufügen

  Zu Favoriten hinzufügen
  Ermöglichen Sie Ihren Besuchern, Ihre Homepage per Klick auf einen Link zu deren Favoriten/ Bookmarks hinzuzufügen.
  Internet-Surfer, die auf Ihrer Website stranden und diese als Lesezeichen ablegen wollen, müssen sich gewöhnlich durch einen mittelmäßigen Menü-Dschungel kämpfen. Erleichtern Sie ihnen das Vorhaben, indem Sie folgendes Script verwenden:
  <script language="JavaScript">
  var Pfadx="http://www.Url.de";
  var Titelx = "Die beste Seite der Welt";
  document.write("<a href= 'javascript:window. external.44 AddFavorite (" + "Pfadx, Titelx" + ")'> Meine Homepage als Lesezeichen ablegen</a>");
  Nach einem Klick auf diesen Hyperlink öffnet der Internet Explorer das Fenster Zu Favoriten hinzufügen und schlägt dem Besucher einen Namen vor, in unserem Beispiel "Die beste Seite der Welt". Damit auch Besucher, die mit dem Netscape-Browser unterwegs sind, diesen Komfort genießen können, gehen Sie folgendermaßen vor:
  <script language="JavaScript">
  var BrowserName = navigator. appName;
  var Pfadx="http://www.URL.de";
  var Titelx = "Die beste Seite der Welt";
  if(BrowserName == "Microsoft Internet Explorer") {
  document.write("<a href= 'javascript:window. external.AddFavorite (Pfadx,Titelx)'> Meine Homepage als Lesezeichen ablegen </a>");
  }
  else {
  document.write("Vergessen Sie nicht meine Homepage zu Ihren Lesezeichen hinzuzufügen");
  }
  </script>
  
  

• Zugang verweigern

  Zugang verweigern
  Ein Script verweigert den Aufruf einer Seite, wenn der Surfer nicht von einer bestimmten anderen Seite kommt.
  Im World Wide Web ist es üblich, bei einem Link zu einer fremden Website direkt eine Unterseite des Angebots aufzurufen und nicht die Startseite. Wenn Sie einen solchen Zugriff auf Ihre Website verhindern wollen, hilft ein kleines Script (vgl. Textbox unten). Es prüft gleich beim Aufruf einer Webseite den Referrer. Das ist die Web-Adresse der unmittelbar zuvor besuchten Webseite. Wenn die nicht der Vorgabe, beispielsweise www.ihrname. de/index.htm, entspricht, warnt das Script den Besucher mit einer Dialogbox und schickt ihn automatisch zur vorherigen Seite zurück. Sie fügen es in den fraglichen Webseiten in den <head>-Bereich ein. Dort ist auch beschrieben, wie Sie das Script an Ihre Verhältnisse anpassen. Der Schutz ist nicht 100-prozentig: Der Surfer muss nur JavaScript ausschalten.
  ACHTUNG! Auf der lokalen Festplatte lassen sich solche Webseiten dann
  nicht mehr testen. Sie funktionieren nur, wenn Sie sie vorher auf den Web-Server kopieren.
  Die Browser verwenden unterschiedliche Werte für den Referrer beim Start von der lokalen Festplatte: Internet Explorer übergibt eine leere Zeichenkette, während Opera 6 die Referrer-URL mit file://localhost einleitet. Wenn Sie Besucher nicht abweisen wollen, leiten Sie sie zur Startseite des Angebots. Dazu ersetzen Sie im Script den Bereich zwischen den geschweiften Klammern:
  document.location="http://www.ihr name.de/index.htm
  
  

• Fast wie im Kino

  Fast wie im Kino
  Statt sich immer nur am Fußende der Seite zu verewigen, können stolze Seitenbauer ihre Pages um einen Hollywood-reifen Abspann erweitern.
  Auch wenn Pop-ups zu den eher ungern verwendeten Stilmitteln gehören, machen solche Extrafenster zumindest im Zusammenhang mit einem TV-mäßigen Abspann Sinn. Im ersten Schritt müssen Sie den <head>-Bereich der Seite um eine Funktion erweitern, die das Pop-up-Fenster öffnet. Dazu fügen Sie folgenden Code ein:
  <SCRIPT language="JavaScript">
  <!-- hide javascript
  var winOpts =
  'resizeable=no,scrollbars=yes,wid
  th=450,height=350';
  function popUp(pPage) {
  popUpWin = window.open(pPage,'
  popWin',winOpts);
  }
  //-->
  </SCRIPT>
  Die in der dritten Zeile stehenden Parameter resizeable, scrollbars, width und height können Sie nach Belieben verändern. Damit Pop-up-scheue Besucher das Zusatzfenster nicht gleich wieder schließen, sollten Sie sich nicht für einen automatischen Aufruf entscheiden, sondern das Fenster explizit durch Anklicken des folgenden Links aktivieren:
  Wer hat diese Seite verbrochen?
  Klicken Sie hier!
  Anschließend gestalten Sie wie gewohnt die im Link aufgeführte Seite abspann.html und fügen zusätzlich die folgenden Zeilen in den <head>-Bereich ein:
  <SCRIPT language="JavaScript1.1">
  <!-- hide javascript
  scrollID=0;
  vPos=0;
  function onWard()
  {
  vPos+=2;
  window.scroll(0,vPos);
  vPos%=1000;
  scrollID=setTimeout("onWard()",40);
  }
  // done hiding -->
  </script>
  Der eigentliche Abspanntext wird im <body>-Bereich der Seite abspann.html untergebracht und mit einer ganzen Reihe erzwungener Zeilenwechsel (<br>) formatiert. Wichtig: Der für die Aktualisierung des Pop-up-Inhalts zuständige Parameter vPos% (in diesem Beispiel 1000) muss an die Länge des von Ihnen gewählten Textes angepasst werden. Der <body>-Befehl der Seite abspann. html wird erweitert:
  <BODY onLoad="if
  (window.scroll)onWard()">
  
  

• Alternative Zugangsverweigerung

  Alternative Zugangsverweigerung
  Um Besucher abzuweisen, die von einer unbekannten Seite kommen, müssen Sie nicht zwangsläufig mit der Methode document. referrerarbeiten.
  Viele Webdesigner möchten den Zugang zu ihren Webseiten einschränken. Sie kontrollieren, von welcher IPAdresse ein Besucher kommt. Zum Tipp Zugang verweigern (Heft 5/02, Tipp Nr. 33, S. 177) erreichten uns mehrere Zuschriften. Die Leser wiesen darauf hin, dass die Methode document. referrer den Nachteil hat, dass im Offline-Betrieb - je nach verwendetem Browser - unterschiedliche oder keine Zeichenketten übergeben werden und es einer absoluten Adressierung bedarf. Als Alternative schlägt unser Leser Eckhard Freuwört ein Verfahren vor, das Sie in Listing 2 finden. Die Zieldatei wird dabei entweder durch Anklicken eines Links oder durch direkte Eingabe in die Adresszeile des Browsers auf gerufen. Eine JavaScript-Routine (hier "?OK") wertet aus, ob der Anhang korrekt ist. Trifft das zu, gelangt der Benutzer zur gewünschten Seite. Falls nicht, wird mit dem Parameter history.go(-1) zur aufrufenden Seite zurück verlinkt und eine Warnmeldung ausgegeben. Offline kann es bei der URL-Eingabe in die Adresszeile ohne URL-Anhang dazu kommen, dass der Browser meldet, er habe die Zieldatei nicht gefunden. Daher sollte zum Offline-Test immer der Link aus einer Datei ohne Zugangsberechtigung (Quellcode C) herangezogen werden.
  
  

• Webseite mit Wasserzeichen

  Webseite mit Wasserzeichen
  Es gibt immer mehr Webseiten, die eine Art Wasserzeichen als Hintergrundgrafik benutzen. Bauen Sie solch einen Blickfang in Ihre Seite ein.
  Was bei Word-Dokumenten längst gang und gebe ist, fügen Sie mit zwei Zeilen JavaScript auch in Webseiten ein. Die Rede ist von so genannten Wasserzeichen, also Grafiken, die hinter dem eigentlichen Text platziert und stets in der Mitte der Seite angezeigt werden. Beachten Sie bei der Auswahl der Grafik, dass sie die Lesbarkeit der Texte nicht beeinträchtigt. Besonders gut eignen sich freigestellte Objekte, die Sie mit einer Bildbearbeitung absoften. Bei PaintShop Pro 7.0 finden Sie den dafür zuständigen Befehl Bildunschärfe im Menü Effekte. Entspricht die Grafik Ihren Wünschen, erweitern Sie den body-Bereich um das nachfolgende Script und legen sowohl Bild (in diesem Beispiel wasserzeichen. jpg) als auch HTMLDatei im gleichen Verzeichnis ab.
  <script language="JavaScript1.2">
  if (document.all||document.getElementById)document.body.style.background="url('wasserzeichen.
  jpg') center no-repeat
  fixed"
  <script>
  Der Parameter no-repeat sorgt dafür, dass das eingebundene Wasserzeichen nur einmal dargestellt wird. Wollen Sie die Grafik hingegen kacheln, lassen Sie die Angabe weg.
  
  

• Ungebetene Besucher ausschließen

  Ungebetene Besucher ausschließen
  Auf Ihrer Seite haben Sie Praxisanleitungen zum Brennen von Musik- und Video-CDs veröffentlicht. Allerdings haben Sie bemerkt, dass immer mehr Warez-Seiten auf Ihr Angebot verweisen. Sie können sich davor schützen.
  Vor ungebetenen Verlinkungen können Sie sich wenn auch nur in engen Grenzen schützen. Dies gelingt mit der Kombination aus Abfrage (function came-From()) und einer Schleife. Damit ist es möglich, alle von einer bestimmten Domain, beispielsweise www.raubkopiertesoftware.de, kommenden Besucher ohne Umschweife auf eine spezielle Seite, in unserem Beispielscript antiwarez. html, zu leiten. Um diese interaktive Zugangsbeschränkung in Ihre Seite einzubauen, müssen Sie den <>head>-Bereich um den Code in Listing 1 erweitern. Die Schleife if/else können Sie um beliebig viele Abfragen erweitern, um damit alle unerwünschten Domains vom direkten Zugang auszuschließen. Eine interessante Weiterentwicklung dieses Scripts dreht sich darum, bestimmte Besuchergruppen mit einer maßgeschneiderten Message zu begrüßen. Und auch in diesem Fall spielt die Funktion cameFrom() eine wesentliche Rolle, da Sie sie mit einem beliebigen String (hier google.de) versehen oder ganz ohne Parameter verwenden können. Die entsprechenden Zeilen der Befehl alert gibt eine frei definierbare Bildschirmmeldung aus sehen so aus:
  if (cameFrom("google.de")) {
  alert("Sie haben die richtige
  Seite gefunden!");
  }
  else if (cameFrom()) {
  alert("Auch ziellose Surfer
  finden irgendwann einmal das Ge-
  suchte...")
  }
  
  

• Fenstergröße festlegen

  Fenstergröße festlegen
  Mit Hilfe von JavaScript kön nen Sie die Größe des Browser-Fensters bestimmen. Wie funktioniert das?
  In der Regel wird die Größe des sich öffnenden Browser-Fensters durch die Voreinstellung des Benutzers bestimmt. Sie können aber selbst eine bestimmte Größe für dieses Fenster und sogar dessen Position auf dem Bildschirm des Nutzers vorgeben:
  <script language="JavaScript">
  F1 = open("datei1.html","Fenster1","width=350,height=150,screenX=100,screenY=50");
  F2 = open("datei2.html","Fenster2","width=350,height=150,screenX=100,screenY=250");
  self.focus();
  self.close();
  </script>
  In diesem Beispiel werden gleichzeitig zwei neue Fenster geöffnet, die jeweils 350 Pixel breit und 150 Pixel hoch sind. Die linke obere Ecke des ersten Fensters entspricht dem 100. Pixel auf der x-Achse (vom rechten Rand des Bildschirms). Außerdem ist sie 50 Pixel vom oberen Bildschirmrand entfernt. Das zweite Fenster liegt mit einem Abstand von 50 Pixeln direkt unterhalb des ersten Fensters. Wenn Sie ein Fenster im Vollbild-Modus öffnen wollen, müssen Sie erst die verwendete Bildschirmauflösung herausfinden. Dies funktioniert über das Screen-Objekt:
  <script language="JavaScript">
  alert(screen.width + "x" +
  screen.height);
  </script>
  
  

• Zusatzfenster schließen

  Zusatzfenster schließen
  Öffnet der Besucher viele neue Fenster, führt dies oft zum Absturz. Sie können ihm helfen, indem Sie diese nach einer bestimmten Zeit automatisch schließen lassen.
  Unerfahrene Surfer betätigen sich häufig als Fenstersammler. Innerhalb kürzester Zeit öffnen sie unbemerkt so viele IE-Fenster, dass dies zum Absturz ihres Rechners führt. Surfen sie gerade auf Ihrer Website, ist das ärgerlich. Sie können Ihren Besuchern helfen, indem Sie lange ungenutzte Fenster automatisch nach einer bestimmten Zeit schließen lassen. Dazu verwenden Sie die setTimeout-Funktion. Sie können dem Befehl auch einen Warnhinweis hinzufügen:
  <script language="JavaScript">
  function Hinweis() {
  x = confirm("Sie haben dieses
  Fenster bereits seit 10 Minuten
  geöffnet. Wollen Sie es weiterhin
  ansehen?");
  if(x == false) top.close();
  }
  window.setTimeout(Hinweis()",60000);
  </script>
  
  

• Browser-Version abfragen

  Browser-Version abfragen
  Obwohl die Anzeigen von Internet-Seiten im Netscape und IE immer ähnlicher werden, bestehen weiterhin Unterschiede.
  JavaScript ermöglicht die Ermittlung der Browser-Version. Dazu antwortet der Netscape-Browser auf das Objekt navigator.appName mit seinem Namen und der IE mit Microsoft Internet Explorer. Auch die Version lässt sich über ein Objekt, navigator.appVersion, anzeigen. Dem Besucher Ihrer Website können Sie nach der Abfrage sogar eine maßgeschneiderte Nachricht zeigen:
  <script>
  <!--
  var bs = navigator.appName;
  var bs = navigator.appVersion;
  if ((bs == "Microsoft Internet
  Explorer") && (parseInt(vs) >=
  4)) {
  document.write("<h3>Sie verwenden
  den Browser "+ bs + "<br>Ich lade
  jetzt die Internet-Seite für diese
  Version.</h3>");
  }
  else if ((bs == "Netscape") &&
  (parseInt(vs) >= 6)) {
  document.write("<h3>Sie verwenden
  den Browser "+ bs + "<br>Ich lade
  jetzt die Internet-Seite für diese
  Version.</h3>");
  }
  <// --> </script>
  
  

• Größe der Überschrift anpassen

  Größe der Überschrift anpassen
  Bei ungewöhnlichen Bildschirmauflösungen oder Fenstergrößen erzeugen Überschriften durch ihre Größe oft Probleme. Wie lässt sich diese anpassen?
  Nichts ist ärgerlicher, als wenn die Überschrift nicht mehr richtig ins angezeigte Fenster passt. Vor allem bei kleinen Fenstergrößen oder geringen Bildschirmauflösungen kann das passieren. Sie können die Schriftgröße den Gegebenheiten anpassen. Dafür sorgt ein JavaScript, das die Anzahl der im Browserfenster angezeigten Pixel ermittelt. Um zu große oder zu kleine Schriften bei extremen Einstellungen zu vermeiden, können Sie eine Mindest- und eine Maximalgröße festlegen. Bei einer 30 Buchstaben umfassenden Headline entspricht dies folgendem Script:
  <script>
  function change_size() {
  var meineGroesse = document.body.
  offsetWidth/30;
  if (meineGroesse < 14) {
  meineGroesse = 14; }
  else (meineGroesse > 50) {
  meineGroesse = 50;}
  headline.style.fontSize = meine-
  Groesse; }
  </script>
  <body onLoad="change_size()"
  onResize="change_size()">
  Der Befehl document.body.offsetWidth ermittelt die Größe des sichtbaren Browserbereichs. Dieser wird durch 30, die Anzahl der Buchstaben, geteilt. Kommt dabei eine Zahl unter 14 heraus, wird die Pixelgröße auf 14 festgelegt, bei über 50 auf 50 Pixel. Dazwischen entspricht die ermittelte Zahl der Pixelgröße. Die Befehle im <body>-Bereich dienen dazu, diesen Vorgang beim Laden der Seite sowie bei einer nachträglichen Änderung der Fenstergröße zu aktivieren. Falls Sie sich nicht auf die Überschriftenlänge von 30 Buchstaben festlegen wollen, sondern auch mit kürzeren oder längeren Überschriften arbeiten, können Sie die unterschiedlichen Textlängen berücksichtigen. Dann ersetzen Sie die Zeile var meineGroesse durch folgende Angaben:
  var meineHead = headline.innerHTML;
  var zielGroesse =
  meineHead.length;
  var meineGroesse = (document.body.offsetWidth/zielGroesse);
  Wollen Sie die Überschrift größer oder kleiner anzeigen lassen, können Sie den Quotienten aus Fenstergröße und Überschriftenlänge mit einem entsprechenden Faktor multiplizieren, zum Beispiel:
  var meineGroesse = (document.body.offsetWidth/zielGroesse) *1,33;
  
  

• Position anzeigen

  Position anzeigen
  Für die Benutzerführung ist es von großem Vorteil, wenn automatisch die Position der aktuellen Seite innerhalb der Site angezeigt wird. Wie lässt sich das bewerkstelligen?
  Vor allem bei umfangreichen Websites verliert der Besucher schnell den Überblick über seine aktuelle Position. Als sehr hilfreich erweist sich hier die Anzeige der entsprechenden Ordner, zum Beispiel: Meine Homepage/Bilder/ Party vom 21.6./Hermann mit Maria. Diese lässt sich ständig aktualisiert in einem eigenen Frame anzeigen:
  <body onLoad='setTimeout("lade()", 1000)'>
  <script language="JavaScript">
  function lade (){
  document.form1.position.value=top.Center.document.title;
  // Center ist der Hauptframe,dessen Position angezeigt wird.
  setTimeout("lade()", 1000);}
  </script>
  <form name="form1">
  <input type="text" name="position" value="Meine Homepage
  / Home" size="60" maxlength="60">
  </form></body>
  
  

• Mehrere Frames ändern

  Mehrere Frames ändern
  Über Frames können Sie per Klick in einem Fenster die Anzeige in einem anderen ändern. Gleichzeitig können Sie auch das erste Fenster aktualisieren.
  Häufig stehen Webdesigner vor einem Problem, wenn die Navigation mit Hilfe von Frames gelöst wurde: Beim Anklicken eines Unterpunktes soll nicht nur die entsprechende Seite im Inhalts-Frame aufgerufen werden, sondern es soll sich gleichzeitig auch die Anzeige im Navigations-Frame ändern. So lassen sich dort nach dem Klick die weiteren Unterpunkte des Themas zeigen. In diesem Fall beruht die wohl beste Lösung auf einem JavaScript. Dabei ergänzen Sie den <href>-Befehl um eine entsprechende Onklick-Option:
  <a href="thema.html"
  target="main"
  onklick="parent.frames[0].location.href='menu2.html';">
  Die Datei menu2.html ersetzt dann im Navigations-Frame die ursprüngliche menu.html. Es gibt zwar auch eine JavaScript-lose Variante für diese Aufgabe, doch diese erfordert eine Neudefinition des Framesets. Dadurch wird die Ladezeit sehr viel länger, und die Seite baut sich komplett neu auf. Die dazwischen zu sehende weiße Seite sollte durch Frames vermieden werden.
  
  

• Bilder an anderer Stelle ändern

  Bilder an anderer Stelle ändern
  Beim Drüberfahren mit der Maus über eine Grafik möchten Sie ein Bild an einer anderen Stelle ändern. Wie funktioiert das?
  Vor allem für eine effektive Benutzerführung kann es sinnvoll sein, beim Drüberfahren mit der Maus eine Grafik zu ändern, die sich an einer anderen Stelle befindet. In unserem Beispiel erhält das ursprüngliche Vorschaubild (vorschau.gif) den Namen f. Die Grafiken 1.jpg und 2.jpg entsprechen den Grafiken im Navigations-Frame für die ersten beiden Themen. Beim Klick auf diese Themen werden die entsprechenden HTML-Dateien aufgerufen. Beim Drüberfahren mit der Maus werden das Vorschaubild (in einf1.src) und die Navigations-Grafik (in ein1a.src) ausgetauscht . Wird die Maus wieder wegbewegt, erscheinen die jeweiligen Aus-Grafiken:
  <img src="vorschau.gif" name="f"
  align="right">
  <a href="thema1.html" onMouseOver="f.src=einf1.src;
  a1.src=ein1a.src;"
  onMouseOut="f.src=ausf1.src;
  a1.src=aus1a.src;">
  <img border="0" src="1.jpg" vspace="
  3" name="a1"></a><br>
  <a href="thema2.html" onMouseOver="f.src=einf2.src;
  a2.src=ein2a.src;"
  onMouseOut="f.src=aus2.src;
  a2.src=aus2a.src;">
  <img border="0" src="2.jpg"
  vspace="3" name="a2"></a>
  
  

• Bewegung in der Statuszeile

  Bewegung in der Statuszeile
  Um die Aufmerksamkeit der Besucher auf die Statuszeile zu lenken, können Sie dort Informationen anzeigen und blinken lassen.
  Das folgende Script sorgt dafür, dass der Text in der Variablen text rhythmisch ein- und ausgeblendet wird. Die Blinkgeschwindigkeit ändern Sie dabei über den Wert der Variablen puls.
  <SCRIPT LANGUAGE="JavaScript">
  var text="Eye-Catcher in der Statuszeile";
  var puls=500;
  var visible=0;
  function Blinker() {
  if (visible == 0) {
  window.status=text;
  visible=1; }
  else {
  window.status="";
  visible=0; }
  setTimeout('Blinker()',
  puls); }
  </SCRIPT>
  Das Script, das Sie auch auf unserer Heft-CD finden, sollte beim Laden der Seite automatisch gestartet werden. Dazu setzen Sie den Event-Handler onLoad in den Body-Tag Ihrer HTML-Seite.
  <BODY onLoad="Blinker()">
  
  

• Sichere Frames

  Sichere Frames
  Wenn jemand zu einer Ihrer Seiten linkt, die innerhalb eines Frames stehen sollte, kann es passieren, dass die Seite plötzliche allein im Browser steht.
  Gewöhnlich sind dann die Navigationselemente, die in einem anderen Frame untergebracht sind, für den Besucher nicht zu erreichen. Um sicherzustellen, dass jeder Link auf Ihre Seiten die notwendige Frame-Konstruktion aufruft, benutzen sie folgendes kurze Script:
  <SCRIPT LANGUAGE="JavaScript">
  if (window == top)
  top.location.href =
  "frameset.html";
  </script>
  Die Datei frameset.html enthält die vollständige Frame-Definition.
  
  

• Parlez vous français?

  Parlez vous franGais?
  Über den Browser des Besuchers können Sie ermitteln, welche Sprachen dieser benutzt bzw. bevorzugt.
  Um internationale Besucher anzusprechen, sollten Sie mehrsprachige Seiten anbieten. Der Browser der Besucher verrät Ihnen, welche Sprache der Besucher wünscht. Mit diesem Wissen können Sie ihn dann direkt auf eine entsprechende Seite umleiten. Zunächst bestimmen Sie den Typ des Browsers und fragen im Anschluss die Sprachversion ab:
  <SCRIPT LANGUAGE="JavaScript">
  if (navigator.appName ==
  'Netscape')
  var sprache = navigator.language;
  else
  var sprache =
  navigator.browserLanguage;
  if (sprache.indexOf('en') > -1)
  document.location.href =
  'english.html';
  else if (sprache.indexOf('fr') >
  -1) document.location.href =
  'francais.html';
  else if (sprache.indexOf('de') >
  -1) document.location.href =
  'deutsch.html';
  else document.location.href =
  'english.html';
  </SCRIPT>
  Weitere Kürzel für Sprachen finden Sie beim Internet Explorer unter Extras/Internetoptionen/ Allgemein/Sprachen. Wenn Sie auf Hinzufügen... klicken, erhalten Sie eine Liste der unterschiedlichen Kürzel. Beim Netscape Navigator finden Sie diese Liste unter Bearbeiten/Einstellungen/ Navigator/Sprachen.
  
  

• Einfache Passwortabfrage

  Einfache Passwortabfrage
  Oft möchten Webmaster bestimmt Bereiche ihrer Sites vor den Zugriffen beliebiger Internet-Anwender schützen. Für eine Passwortabfrage verwenden sie oft Serverseitige Scripts. Jedoch lässt sich auch mit JavaScript ein Passwort prüfen.
  Das zu prüfende Passwort lässt sich auf der Seite im Code des Scripts speichern. Das ist sehr unsicher, weil jeder erfahrene JavaScript-Programmierer das Passwort herausfindet. Etwas sicherer ist die Methode, aus dem Passwort den Namen der Zielseite zu generieren. Hier hat der Neugierige keine Chance. Nur mit dem richtigen Passwort (Seitennamen) geht es weiter. Allerdings ist auch diese Verschlüsselung nicht sicher, denn sobald der Name der Seite bekannt ist oder sie sich im Verlauf des Browsers findet, ist kein weiterer Schutz gegeben. Die Passwortabfrage besteht aus zwei Scripts:
  <SCRIPT LANGUAGE="javascript">
  <!--
  var neuesfenster = null;
  function abfrage() {
  neuesfenster = window.open('eingabeseite.html',
  'passwortfenster','width=350, height=200,resizable=1');
  }
  // -->
  </SCRIPT>
  Das erste Script öffnet ein neues Fenster, das eine Eingabeseite (eingabeseite. html) zur Passwortabfrage enthält. Der Anwender startet es mit einem Button-Klick auf der Seite, die noch öffentlich zugänglich ist:
  <form>
  <input type="button"value="Hier
  klicken"onClick="abfrage()"
  </form>
  Die Seite, die sich im neuen Fenster öffnet, enthält ein Eingabefeld und einen Submit-Button im Body (Sie finden den Code in Listing 1, unten). Im Kopf der Seite befindet sich die Funktion passverarbeiten(), die den Seitennamen aus der Eingabe des Benutzers und der Erweiterung .html generiert. Die zweite Funktionnamens laden öffnet die geschützten Seiten mit dem von passverarbeiten() erzeugten Namen.
  
  

• Countdown

  Countdown
  Zählwerke, die auf ein bestimmtes Ereignis hinzielen, sind nicht nur zum Jahreswechsel ein beliebtes Feature. Ob Geburtstag, Feiertag oder ein wichtiges Firmenereignis: Ein Countdown lässt sich vielseitig einsetzen.
  Das folgende Programm zählt sekundenweise auf einen vorgegebenen Termin herunter und aktualisert dabei ständig die Anzeige. Ausgegeben wird dies in einem Formularfeld auf der Seite:
  <form name="countform">
  <input type="text" size="80"
  name="countfield">
  </form>
  Das Script selbst setzen Sie ebenfalls in den Body-Bereich der Seite (Listing 2, unten). Im Script sind die Stellen durch Kommentare markiert, an der Sie das Datum eingeben und die Texte, die während des Countdowns und bei Erreichen des Ziels angezeigt werden sollen.
  
  

• Statuszeilen-Anzeige verstecken

  Statuszeilen-Anzeige verstecken
  Durch zwei kleine JavaScript-Schnipsel können sie beim Überfahren eines Links die Anzeige der Adresse in der Statuszeile unterbinden. Das ist wünschenswert, wenn der Link auf eine Seite führt, die eine unschöne URL besitzt, oder das Erkennen der Adresse erschwert werden soll.
  Das erste Script blendet alle Adressen hinter den Links aus:
  <script>
  var statusmsg=""
  function hidestatus(){
  window.status=statusmsg
  return true
  }
  if (document.layers)
  document.captureEvents(event.mouseover | event.mouseout)
  document.onmouseover=hidestatus
  document.onmouseout=hidestatus
  </script>
  Das zweite Script erlaubt es Ihnen, gezielt einzelne Links auszublenden.
  <script>
  var statusmsg=""
  function hidestatus(){
  window.status=statusmsg
  return true
  }
  </script>
  Dazu müssen Sie die gewünschten Links um den Parameter onMouseover="return hidestatus()" erweitern:
  <a href="http://www.eineadresse.
  de" onMouseover="return hidestatus()">
  Ein Link</a>
  
  

• Intelligente Diashow

  Intelligente Diashow
  Sehr beliebt ist es, die Fotosammlung im Internet zu veröffentlichen. Viele Web-Designer bieten ihren Besuchern eine Diashow an, die Fotos automatisch auswechselt.
  Das Programm lädt das nächste Bild in der Diashow erst, wenn das aktuelle im Browser angezeigt wird. Der Vorteil: Der Benutzer muss nicht warten, bis alle Bilder geladen sind, bevor die Show startet. Wählen Sie die Dauer der Anzeige lang genug, wird der Ladevorgang währenddessen komplett abgeschlossen, so dass der Besucher keine Verzögerung bemerkt. Zudem lässt sich jedes Bild mit einem anderen Link verknüpfen, der aktiv ist, während das zugehörige Bild angezeigt wird. Dieses Programm lässt sich für Bannerwerbung genauso einsetzen wie für eine Produktpräsentation. Im Script setzen Sie die Namen der Bilder ein, eine gleich große Zahl von zu verknüpfenden Links und die Dauer der Anzeige in Sekunden.
  <SCRIPT LANGUAGE="JavaScript">
  <!--
  //Bilder für die Slideshow
  bild = ["bild1.jpg", "bild2.jpg",
  "bild3.gif", "bild4.gif"]
  //Links für die Bilder
  adresse = ["http://www.adresse1.de",
  "http://www.adresse2.de",
  "http://www.adresse3.de",
  "http://www.adresse4.de"]
  //Anzeigedauer pro Bild
  dauer = 4;
  //Programmcode
  kombi=[]; zähler=0;
  function bildwechsel() {
  var n=(zähler+1)%bild.length;
  if (kombi[n] && (kombi[n].complete ||
  kombi[n].complete==null)) {
  document["Anzeige"].bild = kombi
  [zähler=n].bild; }
  kombi[n=(zähler+1)%bild.length] = new
  Image;
  kombi[n].bild = bild[n];
  setTimeout("bildwechsel()",dauer*
  1000); }
  function verknuepfung(){
  location.href = adresse[zähler];
  } onload = function(){
  if (document.images)
  bildwechsel(); } //--> </SCRIPT>
  Der folgende HTML-Code wird im Body der
  Seite platziert:
  <A HREF="javascript:verknuepfung();"
  onMouseOver="status=adresse[zähler];re
  turn true;" onMouseOut="status=''">
  <IMG NAME="Anzeige" SRC="bild1.jpg"
  BORDER=0></A>
  Geben Sie beim SRC-Parameter des Image-Tags den Namen des von Ihnen gewünschten Startbildes (hier bild1.jpg) an.
  
  

• Unsichtbarer Code

  Unsichtbarer Code
  Oft wollen Anwender ihre JavaScript-Programme vor neugierigen Blicken schützen.
  Sie können Ihren Quellcode auslagern. Speichern Sie ihn als Textdatei mit der Endung .js. Die enthaltenen Scripts werden genauso behandelt, als ob sie im HTML-Code der Seite stünden. Der Verweis in der HTML-Seite lautet: <SCRIPT language="JavaScript" src="Pfad/Code.js"> </SCRIPT> wobei Sie "Pfad" durch die entsprechende Adresse und "Code" durch einen Dateinamen ersetzen. Diese Methode hat weitere Vorteile: Sie verbannen längere Scripts aus dem HTMLBereich und Sie können ein Script für mehrere HTML-Seiten verwenden. Diese Maßnahme schützt Sie allerdings nicht völlig davor, dass ein neugieriger Surfer den Code begutachtet. Denn er ermittelt über den Quelltext Adresse und Namen und lädt die Code-Datei dann direkt in seinen Browser. Zudem kann es zu Problemen kommen, wenn Sie zusätzlich JavaScript direkt in Ihre Seite einbinden. Das sollten Sie genau prüfen und im Zweifelsfall vermeiden.
  
  

• Pop-ups

  Pop-ups
  Manche Websites öffnen beim Verlassen eines oder mehrere neue Fenster. Das kann unter Umständen sinnvoll sein.
  Viele Besucher von Internet-Seiten empfinden es als störend, wenn beim Schließen einer Website Pop-up-Fenster erscheinen. Ein solches Fenster macht aber Sinn, wenn Sie sich etwa eine Erinnerungsmeldung anzeigen lassen wollen. Mit JavaScript benutzen Sie den onUnload-Event, der beim Verlassen und Laden einer Seite ausgelöst wird und ein neues Fenster öffnet. Sie können so über einen einfachen Meta-Refresh automatisch weitere Seiten öffnen. Statt des onUnload-Events können Sie auch schon beim Laden weitere Fenster erzeugen: mit dem onLoad-Event.
  <html><head>
  <script language="JavaScript">
  <!--
  function neueSeite() {
  window.open('neu.html','','toolbar=no,
  menubar=no,location=no,height=200,widt
  h=200,left=100,top=100'); }
  // -->
  </script></head>
  <body onUnload="neueSeite()">...
  </body></html>
  
  

• Uhrzeit auf der Webseite

  Uhrzeit auf der Webseite
  Sie möchten die aktuelle Uhrzeit auf Ihre Webseite bringen? Mit JavaScript geht das ganz einfach.
  Fügen Sie folgendes Script in den <head> Ihrer Seite ein:
  <SCRIPT language="Livescript">
  <!
  function showtime(){
  var now = new Date()
  var hours = now.getHours()
  var minutes = now.getMinutes()
  var seconds = now.getSeconds()
  var timeValue = "" + ((hours < 10) ?
  "0" : "") + hours
  timeValue += ((minutes < 10) ? ":0" :
  ":") + minutes
  timeValue += ((seconds < 10) ? ":0" :
  ":") + seconds
  document.clock.face.value = timeValue;
  timerID = setTimeout
  ("showtime()",1000)
  timerRunning = true }
  // >
  </SCRIPT>
  Es holt sich die System-Uhrzeit des Besucherrechners und zeigt diese in einem Formularfeld mit dem Namen clock an. Dann wartet es 1000 Millisekunden ("setTimeout") und ruft sich dann selbst wieder auf (Diese Technik nennt sich rekursiv). So erneuert es die Zeit einmal in der Sekunde. Rufen Sie die Funktion über das <body>-Tag auf:
  <body onload=showtime()>
  Für die Anzeige der Uhr erstellen Sie folgendes Formular:
  <form name=clock onsubmit=0>
  <input size=6 name=face></form>
  
  

• Tabelle mit Mouse-Over

  Tabelle mit Mouse-Over
  Große Tabellen werden schnell unübersichtlich. Schön wäre es, wenn sich die Farbe einer Zeile ändert, wenn der Benutzer mit der Maus darüber fährt.
  Ein knapper MouseOver-Befehl sorgt für diesen Effekt. Erstellen Sie Ihre Tabelle wie gewohnt. Anschließend definieren Sie mit on-MouseOver und onMouseOut die Farben des Rollover-Effekts in jeder Zeile.
  <TABLE border="2">
  <TR bgcolor="#FFFFFF"
  onMouseOver="this.bgColor='gold';"
  onMouseOut="this.bgColor='#FFFFFF';">
  <TD>Berlin</td>
  <TR bgcolor="#FFFFFF"
  onMouseOver="this.bgColor='gold';"
  onMouseOut="this.bgColor='#FFFFFF';">
  <TD>München</TD>
  <TR bgcolor="#FFFFFF"
  onMouseOver="this.bgColor='gold';"
  onMouseOut="this.bgColor='#FFFFFF';">
  <TD>Hamburg</TD>
  </TR>
  </TABLE>
  
  

• Fenster schließen

  Fenster schließen
  Wenn Sie Ihren Besuchern Informationen über spezielle zusätzliche Fenster bieten (z.B. Hilfstexte oder Sonderangebote), so sollten Sie es ihnen so einfach wie möglich machen, die Fenster wieder zu schließen. Benutzen Sie hierfür beispielsweise den onclick Befehl:
  <a href="#" onclick="window.close ()">Fenster schlie&szlig;en</a>
  
  

• Absätze formatieren

  Absätze formatieren
  Normalerweise benutzt man eine Tabelle, um einen Absatz einzurahmen. Mit folgendem Style-Sheet geht das schneller und einfacher:
  <p style="border:thin solid black;">Das ist der eingerahmte Textabsatz.</p>
  border:thin solid black definiert eine dünne schwarze Linie, border:5px solid redeine fünf Pixel breite, rote Linie um den Absatz.
  
  

• Begrüßen Sie Ihre Besucher

  Begrüßen Sie Ihre Besucher
  Sie möchten die Besucher Ihrer Homepage persönlich begrüßen, schrecken aber vor einer Datenbanklösung zurück?
  Das folgende JavaScript öffnet ein Fenster und fragt nach dem Namen des Besuchers. Gibt dieser ihn an, wird ein Cookie gesetzt. Beim nächsten Besuch erscheint gleich die Webseite mit dem Namen des Besuchers. Insbesondere wenn jemand häufig Ihre Seite aufruft, ist das ein netter Effekt. Mit dem folgenden Listing setzen Sie den Cookie:
  <SCRIPT> <!--
  function getCookieVal (offset) {
  var endstr = document.cookie.indexOf
  (";", offset);
  if (endstr == -1)
  endstr = document.cookie.length;
  return
  unescape(document.cookie.substring(off
  set, endstr)); }
  function GetCookie (name) {
  var arg = name + "=";
  var alen = arg.length;
  var clen = document.cookie.length;
  var i = 0;
  while (i < clen) {
  var j = i + alen;
  if (document.cookie.substring(i, j) ==
  arg)
  return getCookieVal (j);
  i = document.cookie.indexOf(" ", i) +
  1;
  if (i == 0) break; }
  return null; }
  function SetCookie (name, value) {
  var argv = SetCookie.arguments;
  var argc = SetCookie.arguments.length;
  var expires = (argc > 2) ? argv[2] :
  null;
  var path = (argc > 3) ? argv[3] :
  null;
  var domain = (argc > 4) ? argv[4] :
  null;
  var secure = (argc > 5) ? argv[5] :
  false;
  document.cookie = name + "=" + escape
  (value) +
  ((expires == null) ? "" : (";
  expires=" + expires.toGMTString())) +
  ((path == null) ? "" : ("; path=" +
  path)) +
  ((domain == null) ? "" : ("; domain="
  + domain)) +
  ((secure == true) ? "; secure" : "");
  } // --> </SCRIPT>
  Für das Eingabefenster benötigen Sie folgendes Script:
  <SCRIPT> <!--
  if(GetCookie('JS_besucher') == null) {
  var JS_besucher_Name = prompt ("Bitte
  geben Sie Ihren Namen an:", "" );
  if (JS_besucher_Name != null &&
  JS_besucher_Name != "") {
  var expdate = new Date ();
  expdate.setTime(expdate.getTime() +
  (24 * 60 * 60 * 1000 * 365));
  SetCookie('JS_besucher',
  JS_besucher_Name, expdate); } } //-->
  </SCRIPT>
  Sollte der Besucher Ihrer Seite seinen Namen nicht verraten wollen, sieht er lediglich den gleichen Begrüßungstext. Den Inhalt des Cookies rufen Sie über folgendes Script auf und zeigen ihn an:
  <SCRIPT> <!--
  document.open();
  if(GetCookie('JS_besucher') != null)
  document.write("<CENTER><H1>Herzlich
  Willkommen
  "+GetCookie('JS_besucher')+"!</H1></CE
  NTER>");
  if(GetCookie('JS_besucher') == null)
  document.write("<CENTER><H1>Herzlich
  Willkommen!</H1></CENTER>"); //-->
  </SCRIPT>
  
  

• Sprungmenü erstellen

  Sprungmenü erstellen
  Manchmal reicht der Platz auf einer Webseite nicht aus, um zahlreiche Hyperlinks übersichtlich aufzulisten. Webdesigner setzen dann gerne so genannte Sprungmenüs ein.
  Diese Navigationslisten sind Popup-Menüs, bei denen jede Option einen Hyperlink zu einer anderen HTML-Seite oder einer Datei darstellt. Bauen Sie zunächst das folgende JavaScript in den Seitenkopf Ihrer HMTL-Seite ein.
  <script language="JavaScript"><!--
  function Go(x) {
  if(x == "nothing") {
  document.forms[0].reset();
  document.forms[0].elements[0].blur();
  return; }
  else if(x == "end") top.location.href
  = document.location;
  else {
  document.location.href = x;
  document.forms[0].reset();
  document.forms[0].elements[0].blur();
  } } //--> </script>
  Im Script definieren Sie, was im Browser passieren soll, wenn der User auf einen Link innerhalb des Sprungmenüs klickt. Die Navigationsliste erstellen Sie folgendermaßen:
  <form>
  <select size=1 name="Auswahl"
  onChange="Go(this.form.Auswahl.options
  [this.form.Auswahl.options.selectedInd
  ex].value)" style="width:290px;
  background-color:#FFFFFF; fontfamily:
  Arial,sans-serif; fontsize:
  9pt;">
  <option value="nothing" selected>[
  Surftipps: ]</option>
  <option value="http://www.pcmagazin.
  de">PC-Magazin</option>
  <option value="http://www.pcmagazin.
  de/foren/index.php">Foren</opt
  ion>
  <option value="http://www.pcmagazin.
  de/common/tests/hard.php">Test
  s</option>
  <option value="http://www.pcmagazin.
  de/praxis/index.php">Praxis</o
  ption>
  <option value="http://www.pcmagazin.
  de/common/shop/index.php3">Sho
  p</option> </select> </form>
  Innerhalb eines Formulars legen Sie mit <select> eine Liste an. Je nach auswählbaren Optionen sollten Sie die Breite dieses Popup-Menüs anpassen ("width:290px"). Ebenso verändern Sie Hintergrundfarbe und Schrift.
  
  

• Globale Variable nutzen

  Globale Variable nutzen
  Mit einem Trick nutzen Sie eine JavaScript-Variable dauerhaft, so dass sie nicht bei jedem Seitenwechsel ungültig wird.
  Wenn Sie in JavaScript in mehreren unabhängigen Webseiten auf dieselbe Variable zugreifen wollen, haben Sie ein Problem: Sie definieren im HTML-Text im Skriptbereich mit var Thema="1" eine Variable. Diese existiert so lange, bis der Browser eine neue Webseite anzeigt dann wird sie gelöscht. Der Trick: ein Frameset. In einem Frameset mit zwei Frames enthält ein Frame eine HTML-Datei, in der die Variable definiert ist. Diese Datei bleibt immer geladen, die Variable bleibt erhalten. Im zweiten Frame zeigen Sie die einzelnen Webseiten an:
  
  <frameset cols="1,*">
  <frame name="script"
  src="script.htm">
  <frame name="main" src="index.htm">
  </frameset>
  
  Das eine Frame ist gerade einen Punkt breit und damit unsichtbar. Die Datei script.htm enthält die Definition der Variablen thema:
  
  <script language="JavaScript">
  var thema="2" </script>
  
  Aus einem anderen Frame greift JavaScript auf diese Variable so zu:
  parent.script.thema
  Dabei steht parent für das Frameset, script ist der Name des Frames.
  
  

• Änderungsdatum automatisch

  Änderungsdatum automatisch
  Es ist guter Stil, auf einer Webseite das Datum der letzten Änderung zu notieren, etwa "Letzte Änderung: 06/25/2003 18:38:36". Damit Sie bei einem Update nicht vergessen, das Datum anzupassen, zeigt eine Zeile Java-Script die Zeitangabe der Datei an.
  
  <script language="JavaScript"
  type="text/javascript">
  <!-- document.write("Letzte
  &Auml;nderung: " +
  document.lastModified);-->
  </script>
  
  

• Seite in Favoriten aufnehmen

  Seite in Favoriten aufnehmen
  Machen Sie es den Besuchern Ihrer Site leicht, die URL in Ihre Explorer-Favoriten aufzunehmen. Ein Klick auf einen Link genügt:
  
  <a href="javascript:window.
  external.AddFavorite('http://www.
  DOMAIN.de', 'Ihre
  Beschreibung')"> Seite in
  Favoritenliste aufnehmen</a>
  
  Tragen Sie Ihre eigene URL ein und ändern Sie die Beschreibung. Diese erscheint in der Favoritenliste als Seitentitel. Leider funktioniert der Kniff nur mit dem Internet Explorer weisen Sie die Besucher darauf hin.
  
  

• Aktualisieren per Link

  Aktualisieren per Link
  Über den Button Aktualisieren in der Symbolleiste des Browsers laden Sie eine Webseite erneut vom Server. Damit tricksen Sie Proxies aus, die eine alte Version der Seite gespeichert haben. Machen Sie es den Besuchern Ihrer Homepage leicht. Über einen Link aktualisieren Sie die Webseite.
  
  <a href="javascript:location.re
  load()">
  Neu laden</a>
  
  

• Quelltext-Quickie

  Quelltext-Quickie
  Wollen Sie Ihren Besuchern den Quelltext der aktuellen Webseite vollständig und einfach zugänglich machen, hilft JavaScript. Bauen Sie zunächst ein Formular mit einem Button in den Quelltext an der gewünschten Stelle ein. In das Button Tag fügen Sie dann den Event-Handler onClick ein, der einen internen JavaScript-Befehl des Browsers aufruft.
  <form> <input type="button"
  value="Quelltext"
  onClick='window.location="viewsource:"
  + window.location' >
  </form>
  Klickt der Surfer auf den Button, so zeigt der Browser den Quelltext an. Wie das genau geschieht, hängt vom Browser ab: IE und Opera öffnen ein Zusatzfenster mit dem Text, Mozilla zeigt ihn innerhalb des Browsers.
  
  

• Tabellenzeilen hervorheben

  Tabellenzeilen hervorheben
  Um Werte in einer mehrspaltigen Tabelle besser ablesen zu können, ist es hilfreich, mit der Hintergrundfarbe zu spielen. Dazu reichen zwei kleine Skript-Funktionen.
  Wenn in einer längeren Tabelle beispielsweise eine Preisangabe zu einem bestimmten Artikel interessiert, ist es bei zahlreichen Spalten nicht immer ganz einfach, in der richtigen Zeile zu bleiben. Sie können dem Besucher Ihrer Seite helfen, wenn Sie ihm erlauben, mit dem Mauszeiger eine bestimmte Zeile hervorzuheben, etwa durch Variation der Hintergrundfarbe. In dem folgenden Quellcode werden zwei einfache Funktionen zum Wechsel der Hintergrundfarbe definiert. Wenn der Mauszeiger eine bestimmte Tabellenzeile berührt, wird sie vorübergehend eingefärbt.
  <html><head>
  <title>Markierung von
  Tabellenzellen</title>
  <style>
  td {margin: 5mm; padding: 3mm}</style>
  <script language="JavaScript"
  type="text/javascript">
  function markieren(elem){
  elem.style.backgroundColor=
  "#CCC000";}
  function zuruecksetzen(elem){
  elem.style.backgroundColor="#9CCEFF";}
  </script></head>
  <body><table bgColor = "#9CCEFF"
  border="1pt" >
  <tr> <th>Produkt</th>
  <th>ISBN</th> <th>Preis</th></tr>
  <tr onMouseOver="markieren(this)"
  onMouseOut="zuruecksetzen(this)">
  <td>Wörterbuch der Umgangssprache</td>
  <td>3-86664-755-7</td>
  <td>66,99</td></tr>
  <tr onMouseOver="markieren(this)"
  onMouseOut="zuruecksetzen(this)">
  <td>Thesaurus der deutschen
  Sprache</td> <td>3-66664-754-x</td>
  <td>44,50</td></tr>
  <tr onMouseOver="markieren(this)"
  onMouseOut="zuruecksetzen(this)">
  <td> Thesaurus der englischen
  Sprache</td>
  <td>3-66664-754-y</td>
  <td>46,50</td></tr></table></body>
  </html>
  Die beiden Funktionen werden für jedes Zeilenelement <tr> den Ereignisattributen on-MouseOver und onMouseOut zugeordnet.
  
  

• Kalendergesteuerte Sternenreihe

  Kalendergesteuerte Sternenreihe
  Mit Hilfe der Methoden des Objekts Date verglüht jeden Tag ein Stern aus der Sternenreihe, die die Wartezeit bis Heilig Abend anzeigt.
  Zunächst müssen Sie zwei Date-Objekte mit dem Konstruktor new erzeugen. Das erste Objekt übernimmt die Werte des aktuellen Systemdatums. Daraus wird in dem kleinen Skript mit der Methode getFullYear() die vierstellige Jahreszahl extrahiert und der Monat mit get-Month() entnommen. Da diese Methode den Wert nullbasiert handhabt, der Januar ist 0 und nicht 1, wird mit 1 addiert, um für die Anzeige den aktuellen Monat zu erhalten. Den Tag greifen Sie direkt mit getDate() ab. Als zweites Objekt bilden Sie chday, wobei der Jahreswert des Systemdatums eingesetzt und für Dezember eben 11 angegeben ist. Nun bilden Sie die Differenz der beiden Date-Objekte mit der getTime()-Methode. Diese liefert die Millisekunden, die seit dem 1.1.1970 verstrichen sind. Um die Tage zu erhalten, wird mit (1000 * 60 * 60 * 24) dividiert. Um eine Ganzzahl zu erzeugen, bietet JS die ceil-Aufrundung der Math-Klasse. Der gefundene Wert schließlich steuert die for-Schleife, die die Sternchen ins Browserfenster bringt. .
  <html><head><title>Wie lange
  noch?</title></head>
  <body>
  <script language="JavaScript"
  type="text/javascript">
  var heute = new Date();
  var jahr = heute.getFullYear();
  var monat = heute.getMonth();
  monat = monat + 1
  var tag = heute.getDate();
  var chday = new Date(jahr, 11, 24);
  var wartezeit = chday.getTime() -
  heute.getTime();
  var tage = Math.ceil(wartezeit / (1000
  * 60 * 60 * 24));
  if ((tage > 0) && (tage < 25)) {
  document.write( "<p><h3>Heute ist der
  " );
  document.write(tag + "." + monat);
  document.write( ", nur noch " + tage
  + " Tage bis Heilig
  Abend!<br></p></h3");
  for (var i = 0; i <= tage; i++){
  document.write('<img
  src="stern.gif">');}}</script> </body>
  </html>
  
  

• Body Check

  Body Check
  Formulare sind nicht nur zum Datenaustausch mit dem Webserver sinnvoll, sondern auch für Berechnungen im Browser selbst.
  Normalerweise werden Formulare benutzt, um Daten abzufragen, Informationen anzufordern, etwas zu bestellen etc. Kombiniert mit einem Skript lassen sie sich aber auch einsetzen, um Dienstleistungen auf der Seite anzubieten. Ein kleines Beispiel ist die Berechnung der Hip-to-Waist-Ratio, die ein Indiz für Gesundheitsrisiken angibt. Die Schaltfläche ruft eine Funktion auf, die die beiden Maße zur Berechnung an eine weitere Funktion übergibt.
  <html><head>
  <title>H&uuml;fte/Taille-
  Relation</title>
  <script language="JavaScript">
  function htwert(H,T) {
  var Ergebnis = H/T;
  return Ergebnis; }
  function ht(Huefte,Taille) {
  var Wert;
  Wert = htwert(Huefte,Taille);
  document.htr.Ergebnis.value = Wert;
  document.htr.Kommentar.value = "ok";
  if ((document.htr.FM[0].checked ==
  true
  && Wert > 0.8) |
  (document.htr.FM[0].checked == false
  && Wert > 0.95))
  {document.htr.Kommentar.value =
  "bedenklich";}}
  </script>
  </head><body bgcolor="#FFE08D">
  <form name="htr">
  H&uuml;fte/Taille-Relation:
  sollte bei Frauen nicht über 0,8 und
  bei M&auml;nnern nicht über 0,95
  liegen!<br>
  <hr size = "1">
  <input type="radio" name="FM"
  value="w" checked>Frau
  <input type="radio" name="FM"
  value="m">Mann
  <p>H&uuml;fte: <input type="text"
  name="Huefte"></p>
  <p>Taille: <input type="text"
  name="Taille"></p>
  <p><input type="button" value="H/TRelation
  berechnen" name="berechnen"
  onclick="ht(document.htr.Huefte.value,
  document.htr.Taille.value)"></p>
  <p>H&uuml;fte/Taille-Relation: <input
  type="text" name="Ergebnis"></p>
  <p>Kommentar: <input type="text"
  name="Kommentar"></p></form>
  </body></html>
  
  

• Link erst nach Bestätigung aufrufen

  Link erst nach Bestätigung aufrufen
  Sobald der Besucher einen externen Link anklickt, verlässt er Ihre Seite. Möchten Sie ihm noch eine Botschaft mit auf den Weg geben, realisieren Sie dies recht einfach mit JavaScript.
  Anstatt Besucher Ihrer Webseite nach Anklicken eines externen Links gleich auf ein anderes Angebot zu leiten, können Sie mit dem folgenden JavaScript noch eine benutzerdefinierte Meldung dazwischenschalten. Kopieren Sie den folgenden Quelltext genau an diejenige Stelle des <body>-Bereiches, an der der externe Link platziert ist. Durch diese gestalterische Freiheit ist es auch möglich, in Tabellenzellen untergebrachte Querverweise um diese Abfrage zu erweitern.
  <SCRIPT language="JavaScript">
  <!-- function go_there() {
  var where_to= confirm("Möchten Sie diese Seite wirklich schon verlassen?");
  if (where_to== true){
  window.location="OK-URL"; }
  else { window.location="Abbrechen-
  URL"; } } //--> </SCRIPT>
  <A HREF="javascript:go_there()">Hier
  steht die verlinkte URL, die
  angeklickt wird</A>
  
  

• Benutzerfreundliche Formulare

  Benutzerfreundliche Formulare
  Jeder Webmaster weiß, dass die Gestaltung von Formularen alles andere als einfach ist. Neben dem Design spielt auch die Usability eine große Rolle.
  Laut Windows-Konventionen springt die Einfügemarke nach einem Druck auf die Tab-Taste zum nächsten Formularfeld; mit der Eingabe-Taste wird das Formular gesendet. Allerdings kommt es immer wieder vor, dass ein Besucher aus Versehen auf Enter drückt und das halb ausgefüllte Formular absendet oder von einer Testroutine auf fehlende Angaben aufmerksam gemacht wird. Mit einem kleinen JavaScript, das am Ende des Quellcodes, hinter dem abschließenden </html>-Tag implementiert wird, umgehen Sie diese Hürde. Sobald der Besucher die Eingabe-Taste drückt, springt die Marke zum nächsten Feld weiter.
  <SCRIPT LANGUAGE=javascript>
  function fn(form,field) {
  var next=0, found=false
  var f=form
  if(event.keyCode!=13) return;
  for(var i=0;i<f.length;i++) {
  if(field.name==f.item(i).name) {
  next=i+1; found=true break; }}
  while(found) {
  if( f.item(next).disabled==false &&
  f.item(next).type!='hidden') {
  f.item(next).focus(); break; }
  else { if(next<f.length-1)
  next=next+1; else break; }}}</SCRIPT>
  
  

• Animierte Titelleiste

  Animierte Titelleiste
  Dass sich in der Statuszeile des Browsers Meldungen einblenden lassen, ist altbekannt. Viel interessanter und auffälliger ist es aber, in der Titelleiste für Bewegung zu sorgen.
  Mithilfe dieses Scripts erweitern Sie den Seitentitel um animierte Pfeile, die eine von Ihnen vorgegebene Zeitspanne lang ("setTimeout") in Bewegung sind. Dazu erweitern Sie den <head>-Bereich der Startseite um folgende Zeilen. Das Aussehen der Pfeile definieren Sie innerhalb der Funktion anim().
  <SCRIPT>
  var titletext="Willkommen auf meiner
  Homepage"
  var thetext=""
  var started=false
  var step=0
  var times=1
  function welcometext() {
  times- -
  if (times==0) {
  if (started==false) {
  started = true;
  document.title = titletext;
  setTimeout("anim()",1); }
  thetext = titletext; } }
  function showstatustext(txt) {
  thetext = txt;
  setTimeout("welcometext()",4000)
  times++ }
  function anim() {
  step++
  if (step==7) {step=1}
  if (step==1)
  {document.title='>==='+thetext+'===<'}
  if (step==2)
  {document.title='=>=='+thetext+'==<='}
  if (step==3)
  {document.title='>=>='+thetext+'=<=<'}
  if (step==4)
  {document.title='=>=>'+thetext+'<=<='}
  if (step==5)
  {document.title='==>='+thetext+'=<=='}
  if (step==6)
  {document.title='===>'+thetext+'<==='}
  setTimeout("anim()",200); }
  if (document.title)
  window.onload=onload=welcometext
  </SCRIPT>
  
  

• CSSWeiche für Mac und PC

  CSSWeiche für Mac und PC
  Wer beim Seitendesign nicht nur auf die Browserkompatibilität achten, sondern auch die unterschiedlichen Betriebssysteme berücksichtigen will, kann sich mit einer CSS-Weiche viel Arbeit ersparen.
  Fortgeschrittene Webdesigner wissen, dass mit CSS realisierte Seitenelemente, etwa Schriftgrößen, von einem Mac anders interpretiert werden, als von einem PC. Was bei Standardlayouts kaum ins Gewicht fällt, kann bei pixelgenau austarierten Seidendesigns zu unschönen Effekten führen. Abhilfe schafft ein kleines JavaScript, dass das verwendete Betriebssystem des Besuchers ermittelt und daraufhin das entsprechend optimierte Style Sheet lädt. Dabei können Sie entweder zwei Inline-Style-Sheets (internal) oder eine externe CSS-Datei (external) einsetzen, die für viele Seiten zu verwenden ist. Die Betriebssystemweiche integrieren Sie durch die folgende Erweiterung des <head>-Bereichs in die Webseite. <script type="text/javascript"> var csstype="inline" //oder "external" Setzen Sie keine externen Style Sheets ein, müssen Sie diesen Code verwenden.
  var mac_css='body{font-size: 14pt; }'
  var pc_css='body{font-size: 12pt; }'
  Bei Verwendung externer Style Sheets sind diese Codezeilen zu verwenden und die Pfade zu den CSS-Dateien anzupassen.
  var
  mac_externalcss='/style/macstyle.css'
  var
  pc_externalcss='/style/pcstyle.css'
  Die folgenden Codezeilen gelten für beide Varianten und müssen somit nicht verändert werden.
  var
  mactest=navigator.userAgent.indexOf
  ("Mac")!=-1
  if (csstype=="inline"){
  document.write('<style
  type="text/css">')
  if (mactest)
  document.write(mac_css)
  else
  document.write(pc_css)
  document.write('</style>') }
  else if (csstype=="external")
  document.write('<link rel="stylesheet"
  type="text/css" href="'+ (mactest?
  mac_externalcss : pc_externalcss)
  +'">')</script>
  
  

• Blinkende Formularelemente

  Blinkende Formularelemente
  Ein Formularelement können Sie dadurch hervorheben, dass der Button Absenden blinkt.
  Tippen Sie folgende Codezeilen an das Ende des HTML-Dokumentes, direkt vor das abschließende </body>-Tag. Die Variablen flashcolor und flashinterval (in Millisekunden) können Sie beliebig verändern. Das Blinken sollte nicht zu hektisch erscheinen, um die Konzentration der Besucher nicht zu stören.
  <script language="JavaScript1.2">
  var flashcolor="red"
  var flashinterval=1000
  var formcollect=document.getElements
  ByTagName?
  document.getElementsByTagName("FORM")
  : document.all?
  document.all.tags("FORM") : new
  Array()
  var flashcollect=new Array()
  for (i=0; i<formcollect.length; i++){
  for (e=0; e<formcollect[i].elements.
  length; e++){
  if
  (formcollect[i].elements[e].className=
  ="flashit")
  flashcollect[flashcollect.length]=form
  collect[i].elements[e] } }
  function flashelements(){
  for (f=0; f<flashcollect.length; f++){
  if (flashcollect[f].style.color=='')
  flashcollect[f].style.color=flashcolor
  else flashcollect[f].style.color="" }}
  if (flashcollect.length>0)
  setInterval("flashelements()",flashint
  erval) </script>
  Je nach dem, wo Sie den Befehl class "flashit"
  in das Formular einfügen, bestimmen Sie, welches
  Element blinkt. Wollen Sie etwa die
  Schaltfläche Absenden animieren, sieht die
  Codezeile so aus:
  <input type="submit" value="Absenden"
  class="flashit">
  
  

• CSS-Weiche für NE 4.x

  CSS-Weiche für NE 4.x
  Diese CSS-Weiche lässt dem betagten Netscape 4.x ein eigenes Stylesheet zukommen.
  Immer noch benutzen viele Surfer den alten Netscape-4.x-Browser. Wenn sie jenen wenigstens eine lesbare und navigierbare Homepage zur Verfügung stellen möchten, und Sie selber noch den Netscape-4.x-Browser zur Kontrolle installiert haben, schreiben sie:
  
  <script type="text/javascript"
  language="JavaScript">
  <!--
  if
  ((navigator.appVersion.indexOf("4.")
  != -1) &&
  (navigator.appName.indexOf("Netscape")
  != -1))
  document.write('<link rel="stylesheet"
  TYPE="text/css" href="nn4style.css">')
  else
  document.write('<link rel="stylesheet"
  TYPE="text/css" href="style.css">')
  //--></script>
  
  Durch den Einsatz externer Stylesheets können Sie nun entspannt zunächst die Stylesheets (style.css) für neuere Browser schreiben, die den CSS.2.0 Standard besser verstehen. Später kümmern Sie sich dann um die kleine Lösung für Netscape 4.x.
  
  

• Submit-Button mit Mouseover

  Submit-Button mit Mouseover
  Ohne komplexe Mouseover-Anweisungen zu schreiben, belegen Sie einen grafischen Submit-Button (siehe Tipp Nr. 02) mit Mouseover-Effekten.
  Das folgende Skript ist ein browser- und plattformübergreifendes Beispiel. Ein mit Java-Script generierter Submit-Button hat mit dem ursprünglichen Standard-HTML <submit>-Tag nichts mehr gemein. Der Vorteil: Sie können diese Grafik komfortabel mit weiteren browser- und plattformübergreifenden JavaScript-Anweisungen belegen.
  
  <form action="Hier steht Ihr CGI-Pfad"
  method="post" name="abschicken">
  <input type="hidden" name="aktion"
  value="">
  <a
  href="javascript:document.abschicken.s
  ubmit();"
  OnMouseover="bild.src=meinbild2.jpg';"
  OnMouseout="bild.src='meinebild1.jpg';
  "><img src="'meinebild1.jpg'"
  BORDER="0" name="bild"></a></form>
  
  

• Linkrahmen entfernen

  Linkrahmen entfernen
  Der Internet Explorer und Netscape 6 punkten Linien um einen angeklickten Link. Schöner wäre es ohne.
  Egal ob Text- oder Grafik-Links, mittels eines einfachen JavaScripts können Sie die von Internet Explorer und Netscape 6 generierten gepunkteten Linien bei angeklicktem Link unterdrücken. Auf andere Browser hat das Script keine negativen Auswirkungen. Besonders bei Imagemaps wird die mühsam aufgebaute Homepage verschandelt. Schreiben Sie onfocus=" if(this.blur) this.blur()" in Ihren Link-Tag und die gepunkteten Linien sind weg. Ihr Link-Tag sieht dann folgendermaßen aus: <a href="meinlink.html" onfocus= "if(this. blur)this.blur()">Mein Link</a>. Für Dreamweaver gibt es Dank des Extension Manager eine Methode, Linkrahmen zu entfernen. Sie ersparen sich so Programmierarbeit und ermüdendes Copy & Paste. Unter www. projectseven.com finden Sie die Erweiterung und Freeware, die Sie laden und installieren können.
  
  

• Meldung im neuen Fenster

  Meldung im neuen Fenster
  Per JavaScript definieren Sie Interaktionen auf der Webseite. Per Alert-Befehl heben Sie Botschaften in einem separaten Dialogfenster hervor.
  Der Alert-Befehl hebt Botschaften in einem separaten Dialogfenster hervor, das der User schließen muss. Es gibt zwei Arten, diese Technik einzusetzen: Einerseits kann das Meldungsfenster erscheinen, nachdem der User beispielsweise in einen verlinkten Text geklickt hat. Andererseits kann sich das Meldungsfenster nach dem Laden der Site öffnen. Die Sequenz /n erzwingt einen Zeilenumbruch. Der Browser gibt das Dialogfenster vor.
  
  <a href="?">http://www.susanne-rupp.de">?
  
  Um den Alert-Befehl in obigem Hyperlink zu integrieren, fügen Sie folgenden Code hinzu:
  
  OnClick="alert(`Herzlich Willkommen auf meiner Homepage!');"
  
  Soll sich das Fenster nun direkt nach dem L aden der Webseite automatisch öffnen, integrieren Sie den Alert-Befehl mit dem Ereignis OnLoad in den <body>-Tag:
  
  <body OnLoad="alert(`Herzlich Willkommen\n auf meiner Homepage!');">
  
  

• Digitales Fotoalbum

  Digitales Fotoalbum
  Bei vielen Fotoalben im Web klicken Sie von einer Übersicht zu einzelnen Bildern. Einfacher ist eine Vorschau, die das Bild auf der gleichen Seite zeigt.
  Sie entwickeln die Seite wie gewohnt. So platzieren Sie die kleinen Vorschaubilder beispielsweise in eine übersichtliche Tabelle. Da direkt nach dem Laden der Webseite kein großes Bild angezeigt werden soll, fügen Sie ein transparentes Bild ein, welches später die vergrößerten Fotos ersetzen soll. In diesem Beispiel weisen Sie diesem Bild den Namen zielbild zu.
  
  <img src="platzhalter.gif" border="0" name="zielbild">
  
  Dann fügen Sie das Script bildwechsel in den Kopf (Head) Ihrer Seite ein.
  
  <SCRIPT>
  function bildwechsel(ziel,url){
  if (document.images){ document.images.zielbild.src=ziel.src
  } }
  var bild=new Array()
  function bild_laden(){ for
  (i=0;i<bild_laden.arguments.length;i++ ){ } bild[i]=new Image() }
  bild[i].src=bild_laden.arguments[i]
  } }
  bild_laden(,,beeren_rot_gross.jpg","birne_gross.jpg","rose_gross.jpg", "tulpen_gross.jpg")
  //--></SCRIPT>
  
  
  Anschließend weisen Sie jedem einzelnen Vorschaubild die Bilddatei mit der vergrößerten Darstellung zu:
  
  <a OnClick=
  bildwechsel(bild[0],this.href)
  href="#" ><img
  src="beeren_rot_klein.jpg"></a>
  
  Hierbei nummerieren Sie die Bilder (bild[X]). Der Code für das nächste Mini-Bild lautet also:
  
  <a OnClick=bildwechsel(bild[1],this.
  href) href="#"><img
  src="birne_klein.jpg"></a>
  
  Den JavaScript-Befehl OnClick können Sie durch ein OnMouseOver ersetzen. Das große Bild erscheint dann bereits, wenn der User die Maus über die Miniaturvorschau bewegt.
  
  

• Inhalt eines Textfeldes markieren

  Inhalt eines Textfeldes markieren
  Wichtige Aussagen heben Sie per Textfeld hervor. Der User kann den Text mit Hyperlink kopieren.
  Wichtiges auf Ihrer Site setzen Sie in ein Textfeld. Soll der Besucher den Text dann aus der Seite kopieren können, muss er ihn auswählen. Doch Sie können Ihrem Besucher einen Hyperlink anbieten. Verantwortlich für die Textauswahl ist das folgende Skript. Fügen Sie dieses in den Head Ihres Webdokuments ein.
  
  <SCRIPT>
  function Auswahl(){
  document.info.news.focus();
  document.info.news.select();
  }
  </SCRIPT>
  
  Anschließend fügen Sie das Textfeld mit dem <form>-Tag in den Quelltext ein:
  
  <form name="info" method="post">
  <textarea name="news" cols="40"
  rows="4">
  Den Text markieren Sie per Klick.
  </textarea>
  </form>
  
  Formular- und Textfeldname müssen mit den Angaben im JavaScript übereinstimmen.
  
  

• User bestimmt Hintergrundfarbe

  User bestimmt Hintergrundfarbe
  Die Farbdarstellung hängt von Grafikkarte und Monitor ab. Lassen Sie Ihren Besucher selbst bestimmen, welche Hintergrundfarbe er sehen möchte.
  Damit der User die Farbe einstellen kann, verlinken Sie ein Objekt. Klickt der User auf dieses, ändert sich der Hintergrund. Hierfür können Sie einen Text, ein Bild oder ein anderes Seitenelement verwenden, dem Sie einen Link zuweisen können. Das entsprechende Seitenelement, wobei es sich im Beispiel um einen Text handelt, verlinken Sie dann mit folgendem Eintrag:
  
  <A href="#"
  OnClick="bgColor='#0000FF';">blau</A>
  
  Mit OnClick geben Sie die Hintergrundfarbe (bgColor) im Hexadezimalcode (#0000FF) an.
  
  

• Browser-Fenster schließen

  Browser-Fenster schließen
  Häufig liefern zusätzliche Browser-Fenster weitere Informationen. Schnell haben sich viele Fenster geöffnet. Doch dabei läuft Ihr Besucher Gefahr, den Überblick zu verlieren. Damit es also nicht zu einer Inflation an Browser-Fenstern kommt, sollten Sie dem User erlauben, diese auch über einen Hyperlink wieder zu schließen. Verantwortlich hierfür ist das JavaScript onClick="window.close()", das Sie in das Tag <a href> einbinden: <a href="#" onClick="window.close()"> Fenster schließen</a>
  
  

• Alle Checkboxen markieren

  Alle Checkboxen markieren
  In einem Formular markiert ein Klick auf einen Button alle Checkboxen einer Gruppe.
  In einem Formular mit vielen Checkboxen wünschen sich viele Surfer eine Funktion, um einfach alle Optionen auf einmal anzukreuzen oder abzuwählen. Das leistet ein kurzes Skript, das Sie zum Beispiel über eine Schaltfläche im Formular aufrufen. Im Kopfbereich der Webseite fügen Sie die folgende Funktion Aktivieren ein:
  
  <script type="text/JavaScript">
  var Marker = "false";
  function Aktivieren(field){
  if(Marker=="false")
  {
  for(i=0; i<field.length; i++)
  { field[i].checked = true; }
  Marker = "true";
  return;
  }
  else
  { for(i=0; i<field.length; i++)
  { field[i].checked = false; }
  Marker = "false";
  return;
  }
  }
  </script>
  
  Als Parameter übergeben Sie Aktivieren() den Namen der betroffenen Checkbox. Damit ist die Funktion universell für verschiedene Formulare und Checkboxgruppen anwendbar. Ein Formular sieht in vereinfachter Form so aus:
  
  <form name="Wein">
  <input type="button"
  
  onClick="Aktivieren(this.form.Sorte);" value="Alle/Keine"> <input type="checkbox" name="Sorte" value="Merlot">Merlot...
  </form>
  
  Im Beispiel schaltet die Funktion beim ersten Anklicken alle Checkboxen ein, deren Name Sorte ist. Klickt der Anwender den Schalter erneut an, so deaktiviert er sämtliche Checkboxen dieses Namens. Bei der Auswertung der For mulareingaben, zum Beispiel mit einem PHP-Skript auf dem Webserver, spielt das keine Rolle. Der Browser behandelt per Skript markierte Checkboxen genauso, als hätte ein Surfer sie angeklickt.
  
  

• Zahleneingabe prüfen

  Zahleneingabe prüfen
  Ein Skript prüft, ob in einem Formularfeld tatsächlich nur Zahlen eingegeben wurden.
  Manche Texteingabefelder in einem Formular sollen nur Zahlen aufnehmen, etwa für das Geburtsjahr. HTML sieht eine solche Einschränkung nicht vor. Wenn Sie sich die Formulareingaben mit einem Standardskript Ihres Providers (Formmailer) als E-Mail zusenden lassen, scheidet eine Prüfung durch ein Skript auf dem Server aus. Das folgende Skript erledigt die Aufgabe im Browser:
  
  <script type="text/javascript">
  function ZahlCheck(Eingabe) {
  var nur_das ="0123456789";
  for (var i = 0;
  i <Eingabe.length; i++)
  if
  (nur_das.indexOf(Eingabe.charAt(i)) <0 ) return false;
  
  return true; }
  </script>
  
  Die Funktion lässt sich für beliebige Eingabefelder anwenden, sie erwartet als Parameter den Text aus dem Eingabefeld. Das Tag für das betroffene Formularfeld erweitern Sie deshalb so:
  
  <input name="zahlen" type="text" lenght="20"
  onBlur="if (!ZahlCheck(zahlen.value))
  {alert(`Nur Zahlen erlaubt!');
  focus(zahlen)}">
  
  Der Event-Handler onBlur wird aktiv, sobald der Surfer das Eingabefeld verlassen will. Dann r uf t er die Prüfroutine mit dem Feldinhalt auf (ZahlCheck(zahlen.value)). Falls der Rückgabewert falsch ist (Operator !), weist eine Dialogbox (alert()) auf den Fehler hin. Anschließend setzt focus() die Schreibmarke wieder in das Eingabefeld.
  
  

• Rollende Seiten

  Rollende Seiten
  Mit diesem kleinen Skript wird die Website im Browser des Besuchers automatisch gescrollt.
  Die außergewöhnliche, aber von Fall zu Fall recht nützliche Anwendung basiert auf DHTML in Kombination mit JavaScript. Der Browser scrollt dabei den Fensterinhalt automatisch von oben nach unten. Ist das untere Ende der Seite erreicht, startet die Ausgabe erneut. Besonders geeignet ist diese Funktion für Präsentationen, die vom Besucher keine Eingaben erfordern. Die Geschwindigkeit des Scrolls bestimmt die Variable tempo, wobei höhere Werte den Lauf beschleunigen. Das Skript verfügt über eine Abfrage um zwischen Internet Explorer und Netscape Navigator zu unterscheiden. Platzieren Sie es einfach im Body-Bereich der gewünschten Seite und schon können sich ihre Besucher zum Lesen entspannt zurücklehnen.
  Das Listing roller.html finden Sie auf der Heft-CD.
  
  

• Unterschiedliche Auflösung

  Unterschiedliche Auflösung
  Webdesigner entwickeln häufig Seiten für ein festgelegtes System. Bei der Bildschirm-Auflösung kann es zu bösen Überraschungen kommen.
  Eine Website erscheint bei einer Auflösung von 1 024 x 768 Pixel häufig anders als wenn der User sich die gleiche Seite bei einer niedrigeren Auflösung von 800 x 600 Pixel ansieht. Mit dem folgenden JavaScript bieten Sie zwei Site-Versionen an, die je nach Einstellung automatisch geladen werden. So bleibt Ihre Site funktionsfähig und flexibel. Damit die Seiten automatisch geladen werden, schalten Sie eine Seite vor, welche die Auflösung überprüft:
  
  <script language="JavaScript" type="text/JavaScript"> function anzeige() { if (screen.width >= ,,1024") {window.location.href= ,,index1.htm";} if (screen.width <= ,,800") {window.location.href="index2.htm";} }</script>
  
  Die Funktion anzeige() (Heft-CD) fragt die Auflösung ab. Lädt der User eine Webseite mit 1024 x 768 Pixel, wird die Datei index1.htm angezeigt. Die Bildschirm-Auflösung wird immer mit einem horizontalen und einem vertikalen Wert angegeben. Da sich der zweite Wert aus dem ersten ergibt, geben Sie nur einen Wert unter screen.width an. Eine Auflösung von 800 x 600 Pixel zeigt index2.htm. Um Folgeseiten zu laden, ergänzen Sie das <body>-Tag mit dem Befehl <body onLoad="anzeige()">. Der Haken: Optimieren Sie Ihre Site für verschiedene Auflösungen, müssen Sie den kompletten Webauftritt mehrmals entwickeln auch die Aktualisierungen.
  

• Fehlermeldungen vermeiden

  Fehlermeldungen vermeiden
  Manche Browser melden Scriptfehler. Falls Sie sich Ihres Scripts nicht sicher sind, könnten Sie folgenden Code einbauen:
  <script language="JavaScript" type="text/JavaScript"> onerror = ignore; function ignore() { return true; } </SCRIPT>
  
  

• Button mit Bild

  Button mit Bild
  Grafische Schaltflächen sind viel interessanter als Submit-Buttons. Verbinden Sie diesen mit einem Bild und kombinieren Sie das Ganze mit einem frei formatierbaren Text:
  <button type="button" onmouseclick="self.location.href= '">http://meine-homepage.de'"> <img src="foto.jpg"><br><b>zum Pilz-Seminar</b></button>
  
  

• Formular nur einmal versenden

  Formular nur einmal versenden
  Bieten Sie im Web ein einfaches Formular an, dessen Daten per E-Mail verschickt werden, fehlt meist eine Bestätigungsseite.
  Wenn eine Bestätigungsseite fehlt, passiert es häufig, dass ein User mehrmals auf den Senden-Button klickt und das Formular entsprechend häufig verschickt. Um dies zu verhinder n, können Sie den Senden-Button nach dem ersten Klick mit einem Script inaktiv schalten:
  
  <script language="JavaScript" type="text/JavaScript"> function mailer(form) { if (document.all){ for (i=0;i<form.length;i++){ var wegdamit=form.elements[i] if(wegdamit.type=="submit") wegdamit.disabled=true } return false }} </script>
  
  Im Rahmen der Funktion mailer prüft die forSchleife zunächst, wie viele Formulare die aktuelle Webseite enthält. Werden hier mehrere Formulare registriert, kann der User die Daten jedes einzelnen Formulars abschicken, ohne dass das Anklicken der Schaltfläche die Funktion der anderen Schaltflächen beeinflusst. Das Objekt elements greif t auf die Formularelemente zu, deren Inhalt die lokale Variable wegdamit speichert. Abschließend werden durch Mausklick die Formular-Schaltflächen submit und reset mit disabled=true inaktiv. Nur wenn der User auf den Abschicken-Button geklickt hat, wird dieser inaktiv und kann damit nicht mehr benutzt werden. Allerdings kann ein erneuter Seitenaufruf die Schaltfläche wieder aktivieren, wobei jedoch alle zuvor eingegebenen Informationen verloren gehen. Klickt der User auf den Zurücksetzen-Button, können die Daten des Formulars weiterhin verschickt werden; die Senden-Schaltfläche ist also weiterhin aktiv. Anschließend schreiben Sie wie gewohnt das Formular und rufen im Tag <form> die Funktion mailer auf. Durch das Schlüsselwort this stellen Sie den Bezug zum aktuellen Formular her.
  
  

• Einfacher Zoomeffekt

  Einfacher Zoomeffekt
  Wie Sie Seiteninhalte per Script manipulieren, zeigt eine Bildvergrößerung auf Mausklick.
  Das Beispiel zeigt eine einfache Zoomfunktion, die auf Mausklick die Abmessungen des Bildes verändert. Dabei setzen Sie ausschließlich die Breiten- und Höhenparameter ein. Beachten Sie also, dass sich die Qualität der Darstellung entsprechend verschlechtert. Die Funktion zur Änderung der Abmessungen lautet:
  
  <script language="JavaScript" type="text/javascript"> function zoom(type) { if (type=="in" ) {document.images["img"].width+=5; document.images["img"].height+=5;} if (type=="out") {document.images["img"].width-=5; document.images["img"].height-=5;} } //--> </script>
  
  Sie erkennen, dass die Werte für Höhe und Breite jeweils um fünf Pixel erhöht bzw. verringert werden. Die Ausgabe erfolgt innerhalb der Body-Tags, zwei Links steuern diese:
  
  <body> <div style="width:....<a href= "javascript:zoom(`in')">Vergrößern</a> <big>|</big> <a href="javascript:zoom(`out')" >Verkleinern</a> <big>|</big> <a href="javascript:location.reload()" >Zurücksetzen</a> ...</body>
  
  Sie zeigen das Bild wieder im Originalzustand, indem Sie es neu laden.
  
  

• Kleines Bildermenü

  Kleines Bildermenü
  Eine kleine, komfortable Galerie benötigt nur ein paar Zeilen JavaScript. Mit Hilfe einer Listbox wechseln Sie schnell von Bild zu Bild.
  Formulare lassen sich vielseitig nutzen. So lassen sich mit Hilfe der Auswahlboxen schnell komfortable Menüs erzeugen. Ein populäres Einsatzgebiet zeigt das folgende Beispiel. Über eine Listbox lassen sich Menüpunkte, hier Bilder, auswählen, die dann auch gleich in der Seite angezeigt werden. Zunächst benötigen Sie eine JavaScript-Funktion, die den ausgewählten Menüpunkt ermittelt (selectedIndex) und dessen Wert anzeigt:
  <html> <head> <script language=Javascript> <! function galerieMenu() { tindex = document.galerie. auswahl.selectedIndex; var bild = document.galerie. auswahl.options[tindex].value; document.getElementById (`anzeige').src = bild; return false; } //> </script></head>
  
  Das zugehörige Formular ist einfach aufgebaut und enthält als aktives Element die Listbox (select). Mit der Auswahl eines Elements rufen Sie die JavaScript-Funktion onChange="galerieMenu()" auf :
  
  <body>
  <center>
  <h1>Kleine Bildergalerie</h1> <table border="0" bgcolor="cccccc">
  <tr>
  <td>
  <form method="post" name="galerie" id="galerie">
  
  Bitte wählen Sie ein Bild aus:<br><br> <select name="auswahl" id="auswahl" onChange="galerieMenu()" size="4"> <option value="bild1.gif">Bild 1 <option value="bild2.gif">Bild 2 <option value="bild3.gif">Bild 3 <option value="bild4.gif">Bild 4 </select> </center> </form> </td>
  
  Die Ausgabe des Bildes erfolgt anhand der übermittelten Identifikation. Das beim Aufruf der Seite anzuzeigende Bild wird hier im ImgTag eingetragen:
  <td valign="center" width="300" align="center"> <img src="bild0.gif" border="0" id="anzeige" /> </td> </tr> </table> </body> </html>
  
  

• Kontrollierte Auswahl

  Kontrollierte Auswahl
  Mit Kontrollkästchen in Ihren Online-Umfragen fragen Sie schnell die wichtigsten Items ab.
  Bei Online-Umfragen sollten User nur die wichtigsten Punkte und nicht alle ankreuzen können. JavaScript löst die Aufgabe: Sobald der User ein Kontrollkästchen aufruft, wird durch den verbundenen onClick-Befehl die JavaScript-Funktion kontrolle() aufgerufen:
  
  <input type="checkbox" name="dreamweaver" value="1" onClick="return kontrolle()" />
  
  Die Funktion kontrolle() prüft, wie viele Kontrollkästchen der User ausgewählt (checked) hat. Dabei wird von Null an gezählt (var kontr olle = 0). Hat der User die entsprechende Anzahl von Items aktiviert, meldet dies ein Fenster. Im Beispiel soll der Benutzer des Formulars (form) maximal zwei Kontrollfelder auswählen können. Sobald er ein drittes Feld aktivieren will, erscheint dank der Anweisung if (kontrolle == 3) das alert-Fenster mit der Information, er solle nicht mehr als zwei Programme auswählen. Wichtig ist, dass Sie alle Checkbox-Namen im Script nach den vergebenen Formularnamen aufführen, da Ihr Befragungsteilnehmer, ansonsten doch wieder mehrere Optionen auswählen kann. Außerdem kann es zu Fehlermeldungen kommen.
  
  <script language="JavaScript" type="text/JavaScript"> <! function kontrolle() { var kontrolle = 0 if (document.form.dreamweaver.checked) {kontrolle = kontrolle + 1} if (document.form.frontpage.checked) {kontrolle = kontrolle + 1}.....
  
  

• Tagesaktueller Seitentitel

  Tagesaktueller Seitentitel
  So geben Sie das aktuelle Datum im Seitentitel aus.
  Besonders für News-Seiten macht sich ein netter Zusatz gut: Ein kleines Skript gibt das aktuelle Datum in der Titelzeile aus. Der Besucher erhält unweigerlich den Eindruck, dass die Seite tagesaktuelle Informationen enthält. Dabei generiert das Skript das Datum automatisch. Die Monate werden zuvor in einem Array abgelegt. Sie können den Titel selbstverständlich noch um eigene Informationen erweitern, indem Sie einen weiteren Textstring beim Zusammenbau des Datums addieren.
  
  <script language="Javascript"> monate = new Array("Januar","Februar","März","April ","Mai","Juni","Juli","August","Septem ber","Oktober","November","Dezember"); var heute = new Date(); document.title = (heute.getDate() + ". " + monate[heute.getMonth()] + " " + heute.getYear()) </script>
  
  

• Abwechslungsreiche Statuszeile

  Abwechslungsreiche Statuszeile
  Sie können die Statuszeile für wechselnde Textmessages nutzen.
  Wenn Sie den Besuchern Ihrer Website ein wenig zusätzliche Information bieten wollen, dann nutzen Sie einfach die sonst wenig beachtete Statuszeile. Mit dem folgenden Skript legen Sie ein Array an, in dem Sie mehrere Nachrichten ablegen können. Diese werden dann beim Aufruf der Seite in zufälliger Folge in der Statuszeile ausgegeben. Wichtige Mitteilungen sollten Sie hier jedoch nicht machen, dazu wird diese Nachricht zu leicht übersehen.
  
  <script language="JavaScript"> var Statuszeile=new Array(); Statuszeile[0]="Guten Morgen"; Statuszeile[1]="Guten Abend";
  Statuszeile[2]="Guten Tag"; Statuszeile[3]="Herzlich Willkommen"; Statuszeile[4]="Vielen Dank für ihren Besuch"; Statuszeile[5]="Besuchen Sie uns bald wieder"; Statuszeile[6]=""; var i=0; var len=0; while(Statuszeile[i++]!="") len++; window.status= Statuszeile[Math.floor (Math.random()*len)];
  </script>
  
  

• Dynamische Titel per Skript

  Dynamische Titel per Skript
  Die Titelleiste muss nicht statisch sein: Ein Skript sorgt für Abwechslung.
  Warum soll die Titelleiste nicht für Hinweise an den Webbesucher genutzt werden? Eine kleine Skriptfunktion wechselt die dort erscheinenden Meldungen in einem beliebigen Rhythmus. Dabei weisen Sie dem Objekt document.title den gewünschten Text zu. Das Zeitinterval geben Sie in Tausendstel Sekunden an.
  
  <SCRIPT LANGUAGE='JavaScript'><!-- var starttitel = "Skriptpool"; var wtitel1 = "Eine Menge Tipps ..."; var wtitel2 = "... und Tricks zu
  
  JavaScript"; var interval = 3000; var meldungsnr = 0; function titelWechsel() { if (meldungsnr == 0) { document.title=starttitel; } else if (meldungsnr == 1) { document.title=wtitel1; } else if (meldungsnr == 2) { document.title=wtitel2; meldungsnr = 0; } meldungsnr ++; setTimeout("titelWechsel();",interval) ; } titelWechsel(); //-->
  </SCRIPT>
  
  

• Text-/Seitenelemente ein- und ausblenden

  Text-/Seitenelemente ein- und ausblenden
  Es ist nicht immer sinnvoll, alle Seitenelemente sofort nach dem Laden einer Webseiten anzuzeigen. Diese erschweren häufig die Lesbarkeit und Übersichtlichkeit einer Seite.
  Überlassen Sie es doch Ihrem Besucher, ob er beispielsweise erklärenden Text sehen möchte, oder ob ihm bereits im Vorfeld alles klar ist, und er diesen überhaupt nicht benötigt. Lassen Sie ihn doch einfach die erklärenden Textstellen ein- und auch wieder ausblenden. Alles, was Sie hierzu benötigen, ist ein ID-Zugriff auf ein HTML-Element, das beispielsweise eine Ebene, eine Tabelle, ein Bild oder wie in der folgenden Darstellung ein simpler Absatz sein kann. So geht's: Zunächst fügen Sie das entsprechende HTML-Element in Ihre Webseite ein und vergeben hierfür einen eindeutigen IDNamen wie id="erklaerung1". Diese Benennung wird für ein oder mehrere Elemente verwendet, die gleichzeitig ein- und ausgeblendet werden sollen. Anschließend bestimmen Sie den Anfangszustand dieses Elements mit CSS. Soll das Seitenelement zunächst unsichtbar sein, geben Sie visibility:hidden an; soll es dagegen zuerst sichtbar sein, bestimmen Sie visibility:visible. Außerdem benötigen Sie ein Element, über das der User die Anzeige des Textes steuern kann. Das Beispiel wählt hierfür eine Schaltfläche.
  
  <input type="submit" value="Text einblenden" name="zeigen" onClick="javascript:ein_aus();" > <p id="erklaerung1" style="visibility:hidden">Diesen Absatz k&ouml;nnen Sie ein- und ausblenden!</p>
  
  Anschließend benötigen Sie ein JavaScript, das den Zugriff auf das Seitenelement über das id-Attribut regelt. Über die Funktion ein_aus wird zunächst mit getElementById auf das Element erklaerung1 zugegriffen und überprüft, ob es ausgeblendet ist. Ergibt dies eine positive Rückmeldung, wird dieses angezeigt und gleichzeitig verändert sich die Beschriftung der Schaltfläche. Schließlich soll der User darüber das Element anschließend auch wieder ausblenden können.
  
  <script language="JavaScript">
  <!-
  function ein_aus()
  {
  if(document.getElementById(,,erklaerung1").style. visibility == ,,hidden")
  {
  document.getElementById(,,erklaerung1").style. visibility = ,,visible";
  zeigen.value="Text ausblenden";
  }
  else
  {
  document.getElementById(,,erklaerung1").style. visibility = ,,hidden";
  zeigen.value="Text einblenden";
  }
  return true;
  }
  //-->
  </script>
  
  

• DHTML-Menüs

  DHTML-Menüs
  Menüs sollten mehrere Kriterien erfüllen: gut aussehen, übersichtlich sein, W3C-konform und suchmaschinenfreundlich.
  Alle Anforderungen erfüllt ein Skript. Zunächst etwas HTML: Eine aktuelle Empfehlung des W3Csieht vor, Dateilisten und Menüs als unsorted lists umzusetzen. Dies machen die folgenden Zeilen:
  
  <ul>
  <li><div onClick="set('menu1')">1. Überschrift</div>
  <ul id="menu1">
  <li><a href="1_1.html">1.1 Dokument</a></li>
  <li><a href="1_2.html">1.2 Dokument</a></li>
  </ul>
  </li>
  <li><a href="2.html">2. Dokument</a></li>
  </ul>
  
  JavaScript öffnet und schließt die Menüs mit etwas CSS-Unterstützung:
  
  function set(b) {
  var a = document.getElementById(b);
  if (a.style.visibility != "hidden")
  a.style.visibility = "hidden";
  else
  a.style.visibility = "visible";
  if (a.style.position != "absolute")
  a.style.position = "absolute";
  else
  a.style.position = "static"; }
  
  Nun fehlt nur noch etwas CSS für die Schönheit:
  
  <style type=?text/css?>
  ul {border: 1px solid #000;padding: 2px 5px 2px 10px;}
  li {list-style-type: none;}
  ul div {font-weight:800}
  </style>
  
  Ergänzt durch etwas Farbe gestalten Sie so recht ansehnliche Menüs, welche nicht nur gut aussehen, sondern auch suchmaschinenfreundlich sind.
  
  

• Bildergalerie

  Bildergalerie
  Manchmal ist für eine große Bildergalerie mit Vorschau nicht genügend Platz.
  Platz fehlt z. B., wenn die Galerie in einer Navigationsleiste unterkommen muss. Eine Nummer kleiner geht es aber auch. In solchen Fällen reichen zwei Schalter für das Vorwärts- und Rückwärts-Blättern in den gespeicherten Bildern und das Bild selbst bereits aus. Das folgende Skript erledigt dies:
  
  <p>
  <input type="button"
  value="zurück"
  onClick="if (i>0) {
  LoadPic(-i) };">
  <input type="button"
  value="vor"
  onClick="if
  (i<pictures.length-1) {
  LoadPic(++i) };">
  </p>
  
  Der OnClick Eventhandler sorgt dafür, den Ladevorgang auszulösen, wenn jemand auf die Schalter klickt. Es fehlt nur noch die Grafik:
  
  <p>
  <img name="image" src="blank.gif">
  </p>
  
  Abschließend arbeitet das Skript die Bilderfolge ab:
  
  <script type="text/javascript">
  pictures = new Array("pic1.jpg", "pic2.jpg");
  function LoadPic(a) {
  document.images['image'].src = pictures[a];
  }
  var i = 0;
  </script>
  
  Diese Funktion überschreibt das Attribut src des img-Tags mit dem im Datenfeld pictures gespeicherten Dateinamen. Die Variable i dient dazu, die aktuelle Position zu merken.