archive-de.com » DE » E » EKIWI.DE

Total: 422

Choose link from "Titles, links and description words view":

Or switch to "Titles and links view".
  • SELFHTML: Dynamisches HTML / DHTML-Modelle / Das ältere DHTML-Modell von Netscape
    wurde Die Funktion Hervorheben erwartet einen Parameter nämlich den Namen desjenigen Layers der anstelle des bisher vorne liegenden Layers hervorgeholt werden soll Bei den Verweisen die die Funktion aufrufen wird denn auch wieder der Name übergeben der im entsprechenden Layer bei id vergeben ist Innerhalb der Funktion Hervorheben wird zunächst die normale Layer Reihenfolge hergestellt Das geschieht durch Zuweisen einer Zahl an die Layer Objekteigenschaft zIndex Je höher die Zahl desto weiter vorne im Stapel liegt der Layer Das Wiederherstellen der normalen Layer Reihenfolge bewirkt dass der Karteikastenstapel den das Beispiel darstellt immer aufgeräumt erscheint Anschließend wird der bisher aktive Layer bezeichnet durch document layers aktiv mit mehreren Anweisungen behandelt Die Angabe aktiv in den eckigen Klammern zeigt zunächst auf den Layer Home Am Ende der Funktion wird der Wert der Variablen aktiv jedoch geändert Dort wird ihr der Name des neuen hervorgehobenen Layers zugewiesen Dadurch ist beim nächsten Aufruf der Funktion dieser Layer derjenige der von document layers aktiv betroffen ist Die Anweisungen die den bisher aktiven Layer betreffen weisen diesem Attribute zu die ihn optisch zu einem untenliegenden Layer im Karteikastenstapel machen Derjenige Layer mit dem Namen der mit dem Parameter neu aktiv übergeben wurde erhält dagegen diejenigen optischen Attribute die ihn als hervorgehobenen Layer auszeichnen Er bekommt auch die höchste Zahl für zIndex Dadurch wird er als oberster Layer angezeigt Beachten Sie Im Layer Feedback ist ein Formular definiert Dieses Formular wird im Netscape 4 mit document layers Feedback document Formular angesprochen da es Bestandteil des Layers Feedback ist Ein Layer stellt aus Sicht von Netscape ein Dokument im Dokument dar und hat ein eigenes document Objekt Layer Bereiche dynamisch bewegen Sie können Layer mit beliebigen Inhalten über das Anzeigefenster springen oder wandern lassen Das Springen zu einer Stelle ist dabei nur ein einziger Befehl da dies als Methode im Layer Objekt von JavaScript zur Verfügung steht Wenn Sie dagegen zeitgesteuerte Bewegungseffekte wollen müssen Sie die Positionsberechung vom Startpunkt bis zum Endpunkt des Bewegungsvorgangs zu Fuß programmieren Das folgende Beispiel zeigt wie so etwas im Prinzip funktioniert Beispiel Anzeigebeispiel So sieht s aus html head title Test title style type text css p font weight bold a Navlink link color FF0000 a Navlink visited color FF0000 a Navlink active color 000000 style script type text javascript function hBeweg LayerNum bis links Pixel Pause var Restpixel bis links document layers LayerNum left if bis links document layers LayerNum left Pixel 0 Pixel if Math abs Restpixel Math abs Pixel document layers LayerNum moveBy Pixel 0 else document layers LayerNum moveBy Restpixel 0 if document layers LayerNum left bis links window setTimeout hBeweg LayerNum bis links Math abs Pixel Pause function vBeweg LayerNum bis oben Pixel Pause var Restpixel bis oben document layers LayerNum top if bis oben document layers LayerNum top Pixel 0 Pixel if Math abs Restpixel Math abs Pixel document layers LayerNum moveBy 0 Pixel else document layers LayerNum moveBy 0 Restpixel if document layers LayerNum top bis oben window setTimeout vBeweg LayerNum bis oben Math abs Pixel Pause script head body layer left 10 top 30 width 450 height 250 bgcolor FFFF66 h1 Einen springen lassen h1 p Springe nach a class Navlink href javascript document layers 0 moveTo 10 30 links oben a a class Navlink href javascript document layers 0 moveTo 260 30 rechts oben a a class Navlink href javascript document layers 0 moveTo 10 260 links unten a a class Navlink href javascript document layers 0 moveTo 260 260 rechts unten a br p p Bewege nach a class Navlink href javascript hBeweg 0 10 4 2 links a a class Navlink href javascript hBeweg 0 260 4 2 rechts a a class Navlink href javascript vBeweg 0 30 4 2 oben a a class Navlink href javascript vBeweg 0 260 4 2 unten a p layer body html Erläuterung Innerhalb des Dateikörpers der HTML Datei im obigen Beispiel wird ein Layer definiert Dieser Layer enthält insgesamt acht Verweise Bei jedem Verweis wird JavaScript Code ausgeführt Dabei wird der Befehl den der Verweis dem Anwender anbietet in die Tat umgesetzt Alle Verweise sorgen für eine Neupositionierung des Layers in dem sie sich selber befinden Das muss nicht so sein es ist im obigen Beispiel einfach zu Demo Zwecken so gelöst Der Layer den es dynamisch zu positionieren gilt könnte auch etwas ganz anderes enthalten etwa Grafiken Tabellen usw Die ersten vier Verweise führen lediglich Sprünge aus d h beim Klicken auf einen dieser Verweise wird der Layer Inhalt einfach sofort an einer anderen Stelle im Anzeigefenster angezeigt Für diese Aufgabe stellt das Layer Objekt von JavaScript die Methode moveTo zur Verfügung Mit einer Anweisung wie document layers 0 moveTo positionieren Sie den ersten Layer der Datei der den Index 0 hat an einer neuen Position Die Methode moveTo setzt die neue Position der linken oberen Ecke des Layers Dazu erwartet die Methode zwei Parameter und zwar zuerst den Wert für links und als zweites den Wert für oben Mit einer Anweisung wie document layers 0 moveTo 260 10 wird also die linke obere Ecke des Layers auf 260 Pixel von links und 10 Pixel von oben gesetzt Die Angaben beziehen sich auf das jeweilige Elternelement des Layers Da der Layer im obigen Beispiel kein Layer innerhalb eines anderen Layers ist ist das normale Anzeigefenster das Elternelement Während das einfache Neupositionieren mit einer einzigen JavaScript Anweisung möglich ist die im obigen Beispiel direkt in den entsprechenden Verweisen steht muss zum dynamischen Bewegen von Layern eine eigene Funktion aufgerufen werden die den Bewegungsablauf bestimmt Im obigen Beispiel gibt es zwei solcher Funktionen Die Funktion hBeweg kann Layer horizontal nach links oder rechts verschieben die Funktion vBeweg leistet das gleiche nur vertikal nach oben oder unten Entsprechend werden die Funktionen aufgerufen Wenn der Anwender einen der Verweise zum Bewegen nach rechts oder links angeklickt wird hBeweg aufgerufen und bei den Verweisen zum Bewegen nach unten oder oben wird vBeweg aufgerufen Beide Funktionen sind allgemein geschrieben Deshalb erwarten sie als Input auch verschiedene Parameter die beim Funktionsaufruf zu übergeben sind LayerNum ist die Indexnummer des Layers der bewegt werden soll Da im Beispiel immer der gleiche und einzige vorhandene Layer bewegt werden soll wird beim Aufruf der Funktionen immer dessen Indexnummer 0 übergeben bis links bei hBeweg bzw bis oben bei vBeweg ist der neue Endwert bei dem die Bewegung gestoppt werden soll Je nachdem ob der Wert den Sie dabei übergeben größer oder kleiner ist als die aktuelle Position des Layers ergibt sich automatisch die Bewegungsrichtung Pixel ist die Anzahl der Pixel um die pro Bewegungsschritt weiter gesprungen wird Je höher der Wert ist den Sie dafür übergeben desto schneller und ruckartiger die Bewegung Im obigen Beispiel wird in allen Fällen 4 übergeben Pause ist ein weiterer Parameter zur Beeinflussung der Geschwindigkeit Je höher der Wert desto langsamer die Bewegung Ein Bewegen von Layern besteht in nichts anderem als einem schrittweise neuen Positionieren des Layers In den Funktionenen hBeweg und vBeweg stehen jeweils etwa in der Mitte zwei Anweisungen der Art document layers LayerNum moveBy von denen immer nur eine ausgeführt wird Das ist diejenige Anweisung mit der der Layer jeweils neu positioniert wird Es handelt sich einfach um den Aufruf der Methode moveBy des Layer Objekts Diese Methode funktioniert genauso wie moveTo nur mit relativen Angaben statt mit absoluten Damit der Layer nicht nur einmal sondern weiter bewegt wird rufen sich die beiden Funktionen hBeweg und vBeweg am Ende jeweils selbst wieder auf Der Schleifen Effekt der dadurch entsteht wird erst abgebrochen wenn der gewünschte Endwert erreicht ist Der Selbstaufruf der Funktion ist in die JavaScript Methode window setTimeout eingebunden Dadurch kann die Verzögerung berücksichtigt werden die mit dem Parameter Pause übergeben wurde Der Selbstaufruf der Funktion wirkt etwas kompliziert Das liegt daran dass die Funktion sich auch wieder mit den von ihr erwarteten Parametern aufrufen muss Leider ist es nicht möglich dazu einen normalen Funktionsaufruf zu notieren und einfach die übergeben bekommenen Parameter wieder zu übergeben Stattdessen wird eine Zeichenkette zusammengebaut welche die Funktion beim Neuaufruf mit tatsächlichen Werten versorgt Die übrigen Anweisungen in den beiden Funktionen dienen zur Kontrolle des Bewegungsablaufs vor allem dazu dass trotz unterschiedlicher Aufrufparameter am Ende tatsächlich die gewünschte Endposition erreicht wird So ist Restpixel eine Hilfsvariable die ermittelt wie viele Pixel noch zwischen aktueller Layerposition und dem gewünschten Endwert liegen Wichtig ist auch die korrekte Bestimmung der Bewegungsrichtung Wenn der gewünschte Endwert der Bewegung kleiner ist als die Position des Layers beim Start der Bewegung dann muss der Schrittwert der mit dem Parameter Pixel übergeben wird als negative Zahl interpretiert werden Denn nur so kann es rückwärts gehen also nach links oder nach oben Mit dem Ausdruck Pixel 0 Pixel wird der Schrittwert bei Bedarf auf eine negative Zahl umgepolt Beachten Sie Komplexere Bewegungsabläufe benötigen entsprechend komplexere Programmierung Bei diagonalen Bewegungen ist es nur einfach solange die Anzahl der Pixel um die pro Bewegungsschritt weiter positioniert wird horizontal und vertikal immer proportional ist Sobald Sie aber krumme Aufgaben lösen wollen etwa die von oben 10 links 10 nach oben 86 links 623 auf möglichst geradem Weg zu kommen dürfen Sie in die Tiefen der Arithmetik eintauchen Und wenn Sie gar Kreis oder Ellipsenbewegungen wollen müssen Sie entsprechende geometrische Formeln kennen und die dafür vorgesehenen Methoden des Math Objekts von JavaScript benutzen Layer Bereiche dynamisch vergrößern verkleinern Durch dynamisches Verändern des angezeigten Bereichs eines Layers lassen sich unzählige interessante Effekte erzielen zum Beispiel zum dynamischen Aufklappen und Zuklappen von Teilen einer WWW Seite Das folgende Beispiel bewirkt drei Blöcke von denen zunächst nur Titelzeilen sichtbar sind Jede Titelzeile enthält einen Verweis Beim Anklicken des Verweises wird unterhalb der Titelzeile ein Bereich mit Inhalt nach unten aufgerollt Beim nächsten Anklicken des Verweises wird er wieder zugerollt Beispiel Anzeigebeispiel So sieht s aus html head title Test title style type text css layer Text padding 5px font size 18px font family Arial Helvetica Sans Serif color FFFFFF layer Kopf padding 5px font size 14px font family Arial Helvetica Sans Serif font weight bold a link a visited a active color FFFFE0 a normal link color AA5522 text decoration underline a normal visited color 772200 text decoration underline a normal active color 000000 text decoration underline style script type text javascript var Status new Array zu zu zu function AufUndZu LayerNum var i if Status LayerNum zu for i 2 i 250 i document layers LayerNum clip bottom i Status LayerNum auf else for i 250 i 2 i document layers LayerNum clip bottom i Status LayerNum zu script head body layer class Text left 10 top 70 width 198 height 250 bgcolor 000099 clip 0 0 198 2 HTML ist die Sprache für die Strukturierung von Hypertext Projekten Logos und Godfather aller Web Seiten Vermutlich das erfolgreichste Dateiformat der EDV Geschichte layer layer class Text left 210 top 70 width 198 height 250 bgcolor 994000 clip 0 0 198 2 CSS ist die Sprache für die Formatierung von Web Seiten Physis und Sohnprinzip Klinkt sich nahtlos in HTML ein und sorgt dafür das Strukturen zu Farben und Formen werden layer layer class Text left 410 top 70 width 198 height 250 bgcolor 008000 clip 0 0 198 2 JavaScript ist die Sprache für Dynamische Web Seiten Kinesis und Geistprinzip Klinkt sich nahtlos in HTML ein und zunehmend auch in CSS Ist allerdings am schwersten zu verstehen layer layer class Kopf left 10 top 45 width 198 height 25 bgcolor 000000 a href javascript AufUndZu 0 HTML a layer layer class Kopf left 210 top 45 width 198 height 25 bgcolor 000000 a href javascript AufUndZu 1 CSS a layer layer class Kopf left 410 top 45 width 198 height 25 bgcolor 000000 a href javascript AufUndZu 2 JavaScript a layer body html Erläuterung In dem Beispiel werden insgesamt sechs Layer definiert Die ersten drei Layer sind diejenigen die auf und zuklappbar sind Zunächst sind diese Layer zugeklappt Das wird durch das Attribut clip erreicht Durch diese Angabe lässt sich der angezeigte Bereich eines Layers beliebig einschränken Die auf zuklappbaren Layer im obigen Beispiel etwa haben durch die Angaben width 198 height 250 eine Breite von 198 und eine Höhe von 250 Pixeln Durch die Angabe clip 0 0 198 2 wird folgendes erreicht trotz der definierten Breite und Höhe ist nur der Bereich von links 0 oben 0 bis links 198 oben 2 sichtbar Das ist nur ein ganz dünner Streifen der aus optischen Gründen zugelassen wird Mit 0 0 198 0 wäre von den Layern überhaupt nichts zu sehen Die drei unteren Layer sind mit Hilfe der Angaben zu top left width und height so positioniert dass sie genau über den auf zuklappbaren Layern stehen Diese Kopf Layer enthalten Verweise Bei jedem Klick auf einen Verweis in einem der Kopf Layer wird der Layer unterhalb davon auf oder wieder zugeklappt Dazu wird bei jedem Klick auf einen der Verweise eine JavaScript Funktion aufgerufen die Funktion AufUndZu die im Kopf der Datei in einem JavaScript Bereich definiert ist In dem JavaScript Bereich wird vor der Funktion AufUndZu bereits ein Array bestehend aus drei Werten definiert der Array Status Alle seine drei Werte erhalten den Anfangszustand zu Da dieser Array außerhalb jeder Funktion definiert ist stehen seine Daten jederzeit zur Verfügung Innerhalb der Funktion AufUndZu wird geprüft ob ein Layer derzeit auf oder zugeklappt ist Dazu bekommt die Funktion beim Aufruf einen Parameter LayNum übergeben Das ist die Indexnummer des Layers der auf oder zugeklappt werden soll Da im Beispiel die ersten drei definierten Layer davon betroffen sein sollen kommen also nur die Indexnummern 0 1 und 2 in Frage Beim Aufruf der Funktion in den unteren drei Layern werden denn auch genau diese drei Werte übergeben Mit der Abfrage if Status LayerNum zu vergleicht die Funktion AufUndZu was im Array Status als Wert für die übergebene Indexnummer steht Wenn dort zu steht wird der Layer aufgeklappt Wenn er aufgeklappt wird wird der Wert im Array am Ende auf den Wert auf gesetzt Dadurch gelangt die Funktion bei der nächsten Abfrage für den gleichen Layer in den else Zweig wo sie genau die umgekehrten Arbeiten durchführt Das eigentliche Auf und Zuklappen geschieht innerhalb der for Schleife Dort wird beim Aufklappen von 2 bis 250 gezählt und beim Zuklappen von 250 zurück auf 2 Abhängig vom aktuellen Schleifenwert wird die Unterseite des Clip Bereichs des Layers mit document layers LayerNum clip bottom dynamisch verändert Die Grenzwerte von 2 und 250 hängen mit den definierten Layern zusammen die 2 ist jener Wert der bei den Angaben clip 0 0 198 2 vorkommt und 250 ist die Höhe der definierten Layer height 250 Beim Aufklappen wird also der Clip Bereich im Script dynamisch auf 0 0 198 250 verändert Das bedeutet der Layer ist vollständig sichtbar Beim Zuklappen wird dagegen wieder der Clip Anfangszustand von 0 0 198 2 wiederhergestellt Layer Inhalte dynamisch austauschen Einen der großen Vorteile des Microsoft Ansatzes für Dynamisches HTML nämlich das beliebige Austauschenkönnen von HTML Elementinhalten können Sie mit Hilfe von Netscape Layern zumindest nachstellen Der Grund ist dass Netscape einen Layer wie ein eigenes kleines neues Dokument innerhalb des Elterndokuments behandelt So sind auch alle JavaScript Objekte darauf anwendbar die unterhalb des document Objekts liegen Das folgende Beispiel verdeutlicht wie dies bei Layern im einzelnen funktioniert und welche Möglichkeiten sich dabei eröffnen Beispiel Anzeigebeispiel So sieht s aus html head title Test title script type text javascript function DatenSchreiben var Text document Input document Eingabe Feld value var Laenge document Input document Eingabe Feld value length document Output document clear document Output document write p Sie haben folgenden Text eingegeben br document Output document write b Text b p document Output document write p Der Text hat eine Laenge von document Output document write b Laenge Zeichen b p document Output document close script head body layer id Input bgcolor E4EEFF style padding 18px left 10 top 100 width 280 height 280 p Geben Sie in dem Feld Text ein und klicken Sie dann auf Interaktion p form name Eingabe action textarea name Feld cols 25 rows 6 wrap virtual textarea br input type button value Interaktion width 220 onclick DatenSchreiben form layer layer id Output style padding 18px left 310 top 100 width 280 height 280 layer body html Erläuterung Im Beispiel werden zwei Layer definiert einer mit dem Namen id Input und einer mit dem Namen Output Beide Layer sind so positioniert dass der Layer für den Output neben dem Layer für den Input erscheint Der Layer für den Output erhält jedoch zunächst keinen Inhalt Im Layer für den Input wird dagegen ein Formular definiert Das Formular besteht aus einem mehrzeiligen Eingabefeld und einem Button Wenn der Anwender auf den Button klickt wird die JavaScript Funktion SchreibeDaten aufgerufen die im Kopf der Datei innerhalb eines JavaScript Bereichs definiert ist Die Funktion ermittelt zunächst den eingegebenen Text und dessen Länge Anschließend schreibt sie diese Daten zur Kontrolle in den Layer mit dem Namen Output Wichtig ist dass vor dem dynamischen Schreiben des Inhalts die Methode clear aufgerufen wird die den aktuellen Inhalt des Layers löscht und nach dem Schreiben die Methode close die den Vorgang abschließt sodass beim nächsten Mal ein neuer Schreibzugriff möglich ist Dazwischen werden die eigentlichen Daten geschrieben und zwar mit der Methode write Alle drei Methoden sind altbekannte Methoden des document Objekts von JavaScript Das besondere im Fall der Layer ist dass das document Objekt bei den Anweisungen gleich doppelt verwendet wird Ein Beispiel ist die Anweisung document Output document clear Auch zu Beginn der Funktion beim Ermitteln des Formularfeldinhalts kommt diese doppelte Verwendung von document vor Solche Konstruktionen müssen Sie so verstehen über das vorne notierte document sind Layer Objekte ansprechbar da diese unterhalb des document Objekts liegen Output ist im Beispiel der Name eines Layers Dadurch wird dieser Layer angesprochen Ein Layer gilt nun aber selbst wieder als Dokument Deshalb müssen Sie dahinter nochmals document und dahinter erlaubte Eigenschaften und Methoden des document Objekts notieren Die Anweisungen beziehen sich dann auf die Elemente innerhalb des entsprechenden Layers Im obigen Beispiel

    Original URL path: http://html.ekiwi.de/dhtml/modelle/netscape.htm (2016-04-25)
    Open archived version from archive


  • SELFHTML: Dynamisches HTML / DHTML-Modelle / Dynamische Filter (nur Microsoft)
    ist ein Script erforderlich Im obigen Beispiel wird im Dateikopf ein JavaScript Bereich definiert Dort werden zunächst mit Hilfe des Bildobjekts image beide betroffenen Bilder als Objekte Bild1 und Bild2 definiert Der Eigenschaft src der Bildobjekte werden die gewünschten Grafikdateien zugewiesen Diese Vorarbeit mit dem image Objekt ist zwar nicht zwingend notwendig hat aber den Vorteil dass alle betroffenen Bilder bereits in den Arbeitsspeicher geladen sind wenn der Übergang angestoßen wird Innerhalb der Funktion Bildwechsel findet dann der eigentliche Übergang statt Diese Funktion wird aufgerufen wenn der Anwender auf das Bild klickt Dazu ist im img Tag der Event Handler onclick notiert In der Funktion Bildwechsel wird zunächst die Methode Apply des blendTrans Filters aufgerufen Dieser Aufruf ist notwendig um dasjenige Objekt zu identifizieren das in ein anderes übergehen soll Im Beispiel ist das die Grafik angesprochen über das all Objekt und den vergebenen id Namen DynBild Als nächster Befehl wird der Grafik diejenige neue Grafik zugeordnet durch die sie ersetzt werden soll Erst dann sind alle Voraussetzungen erfüllt um den eigentlichen Übergang zu starten Dazu wird die Methode Play des filter Objekts benutzt Die Variable Bild und der else Zweig in der Beispielfunktion dienen dazu den Wechseleffekt sicherzustellen Mit den beschriebenen Befehlen findet der Übergang ansonsten genau einmal statt Der Übergangs Effekt ist nicht nur bei Grafiken möglich sondern auch bei Text Beispiel für Text Anzeigebeispiel So sieht s aus html head title Test title script language JScript type text jscript var NormalText Wer HTML nicht ehrt var AndererText ist des Dynamischen nicht wert var Text 1 function Wechsel if Text 1 Text 2 document all MeinText filters blendTrans Apply document all MeinText innerText AndererText document all MeinText filters blendTrans Play else Text 1 document all MeinText filters blendTrans Apply document all MeinText innerText NormalText document all MeinText filters blendTrans Play script head body p Klicken Sie auf den folgenden Text p div id MeinText style cursor hand margin bottom 100px font size 2 6em color red width 14em filter blendTrans Duration 0 5 onclick Wechsel Wer HTML nicht ehrt div body html Erläuterung Anwendbar ist der blendTrans Filter bei Text auf die HTML Elemente body body div div span span input button textarea textarea marquee marquee sowie auf alle Tabellenelemente Bei div div und bei span span müssen Sie Stylesheet Angaben zu Breite und oder Höhe des Elements notieren sonst funktioniert es nicht Das obige Beispiel ist im wesentlichen das gleiche wie bei den Grafiken Im Unterschied dazu wird jedoch ein Übergang zwischen zwei Texten definiert Der erste Text ist im Dateikörper der HTML Datei mit div div entsprechend der Regeln definiert Die Realisierung des Übergangs zwischen den beiden Texten ist ähnlich wie bei Grafiken Anstelle der Objekteigenschaft src bei Grafiken müssen Sie bei Texten jedoch die Eigenschaft innerText wie im Beispiel oder innerHTML verwenden Diese Eigenschaften erlauben das dynamische Austauschen des Inhalts den das angesprochene HTML Element enthält Fließende Übergänge mit dem revealTrans Filter Der revealTrans Filter ist ganz ähnlich zu handhaben wie der blendTrans Filter Während der blendTrans Filter jedoch nur einfache Blenden von einem Inhalt zum anderen erlaubt stellt der revealTrans Filter ein ganzes Arsenal grafischer Überblend Effekte bereit Beispiel für Grafik Anzeigebeispiel So sieht s aus html head title Test title head body img id DynBild src rain gif style filter revealTrans Duration 2 Transition 12 width 150 height 145 alt Sonnenschein script language JScript type text jscript window setTimeout Wechsel 5000 function Wechsel document all DynBild filters revealTrans Apply document all DynBild src sun gif document all DynBild filters revealTrans Play script body html Das Beispiel bewirkt dass innerhalb von 5 Sekunden 5000 Millisekunden das angezeigte Bild rain gif zerbröselt und durch das Bild sun gif ersetzt wird Beispiel für Text Anzeigebeispiel So sieht s aus html head title Test title head body div id MeinText style width 14em height 150px font size 2em filter revealTrans Duration 1 Transition 7 Wer HTML nicht ehrt div script language JScript type text jscript window setTimeout Wechsel 2500 function Wechsel document all MeinText filters revealTrans Apply document all MeinText innerText ist des Dynamischen nicht wert document all MeinText filters revealTrans Play script body html Erläuterung Das Beispiel bewirkt dass der Text Wer HTML nicht ehrt nach 2 5 Sekunden durch den Text ist des Dynamischen nicht wert ersetzt wird und zwar so dass der neue Text den zunächst angezeigten Text von rechts her überrollt Dazu wird zunächst der Text Wer HTML nicht ehrt innerhalb eines div Bereichs notiert Denn der revealTrans Filter ist im Zusammenhang mit Text auf die folgenden HTML Elemente anwendbar body body div div span span input button textarea textarea marquee marquee sowie auf alle Tabellenelemente Bei div div und bei span span müssen Sie Stylesheet Angaben zu Breite und oder Höhe des Elements notieren sonst funktioniert es nicht Im obigen Beispiel werden Breite und Höhe des div Bereichs mit width und height festgelegt Ferner wird eine spezielle Stylesheet Angabe notiert der Filter revealTrans Dieser Filter erwartet zwei Parameter nämlich die Angabe zu Duration und eine Angabe zu Transition Mit Duration können Sie angeben wie lange der Übergang von dem Text zu seinem Nachfolger dauern soll Im Beispiel wird 1 angegeben das steht für eine Sekunde Sie können auch Bruchwerte bis zu tausendstel Sekunden angeben etwa 2 450 Dezimalzeichen ist ein Punkt Bei Transition geben Sie die Art an wie der Filter wirken soll Mögliche Werte beim revealTrans Filter Anzeigebeispiel So sieht s aus alle 24 Möglichkeiten für Text und Grafik Notation Bedeutung Notation Bedeutung Notation Bedeutung Transition 0 Box Effekt außen nach innen Transition 8 Streifen Effekt von links nach rechts Transition 16 Aufklapp Effekt nach oben und unten Transition 1 Box Effekt innen nach außen Transition 9 Streifen Effekt von oben nach unten Transition 17 Aufroll Effekt von rechts oben nach links unten Transition 2 Kreis Effekt von außen nach innen Transition 10 Rechteck Effekt von links nach rechts Transition 18 Aufroll Effekt von rechts unten nach links oben Transition 3 Kreis Effekt von innen nach außen Transition 11 Rechteck Effekt

    Original URL path: http://html.ekiwi.de/dhtml/modelle/dynamische_filter.htm (2016-04-25)
    Open archived version from archive

  • SELFHTML: Dynamisches HTML / Beispiele für die Praxis / Allgemeine DHTML-Bibliothek
    gibt vier erlaubte Werte für diesen Parameter id name tagname und layerindex Übergeben Sie id wenn Sie auf ein Element zugreifen wollen das ein id Attribut hat z B div id Bereich Übergeben Sie name wenn das Element auf das Sie zugreifen wollen kein id Attribut aber dafür ein name Attribut hat z B a name Anker Übergeben Sie tagname wenn das Element auf das Sie zugreifen wollen weder ein id noch ein name Attribut hat Übergeben Sie layerindex nur dann wenn es sich um Netscape Layer handelt die über das layers Objekt mit Hilfe von Indexnummern angesprochen werden sollen Identifier ist die nähere Angabe zu dem was Sie bei Mode festgelegt haben Wenn Sie bei Mode den Wert id übergeben dann erwartet die Funktion bei Identifier den Wert des id Attributs Wenn Sie bei Mode den Wert name übergeben dann erwartet Identifier den Wert des name Attributs Wenn Sie bei Mode den Wert tagname übergeben haben dann erwartet Identifier den gewünschten Elementnamen also z B h1 oder div Wenn Sie bei Mode den Wert layerindex übergeben haben erwartet Identifier die Indexnummer für den gewünschten Netscape Layer ElementNumber wird nur dann benötigt wenn bei Mode einer der beiden Werte name oder tagname angegeben wurde In diesem Fall müssen Sie bei ElementNumber eine Indexnummer angeben mit der Sie festlegen das wievielte Element im Dokument mit dem entsprechenden Namen oder Elementnamen Sie meinen Das erste Element hat die Indexnummer 0 das zweite Nummer 1 usw Die Funktion getElement geht der Reihe nach die möglichen DHTML Modelle durch und fragt zuerst mit if DOM die globale Variable DOM daraufhin ab ob DOM Syntax verfügbar ist Wenn ja dann wird abhängig von den übergebenen Parametern das gewünschte Element nach DOM Syntax ermittelt und zurückgegeben Nur wenn keine DOM Syntax verfügbar ist wird versucht die älteren DHTML Modelle anzuwenden Zunächst wird mit if MSIE4 geprüft ob das ältere DHTML Modell von Microsoft verfügbar ist Wenn ja wird das Element nach dessen Syntax über das document all Objekt ermittelt Wenn auch die Microsoft Syntax nicht greift bleibt noch die ältere Netscape Syntax die mit if NS4 abgefragt wird In diesem Fall wird aus den übergebenen Parametern der Zugriff auf ein Layer Objekt konstruiert Gleichzeitig erfolgt in der Funktion eine Fehlerbehandlung In jedem Zweig der Funktion wird jeweils geprüft ob das gewünschte Element überhaupt existiert Tritt dieser Fall ein wird das Element zurückgegeben Andernfalls wird false zurückgegeben Funktion getAttribute Attributwert ermitteln Beispielaufrufe Attribut getAttribute name Bildname 0 height Attribut getAttribute id Bereich null id if NS4 Attribut getAttribute name Anker 0 href Über diese Funktion die ihrerseits auf die Funktion getElement zurückgreift können Sie auf bequeme Weise den Wert eines Attributs eines bestimmten Elements ermitteln zumindest wenn das DOM Modell oder das ältere Microsoft Modell für DHTML verfügbar sind Neben den drei bereits bekannten ersten Parametern erwartet diese Funktion einen vierten Parameter AttributeName Bei diesem müssen Sie den Namen des gewünschten Attributs übergeben Wenn Sie den dritten Parameter ElementNumber nicht angeben notieren Sie an dessen Stelle das Schlüsselwort null Die Funktion getAttribute benutzt die Objektmethoden getAttribute die sowohl im DOM Modell als auch im älteren Microsoft Modell verfügbar sind Bei Netscape 4 dagegen wird die gewünschte Eigenschaft direkt abgefragt Die Auswahl des richtigen Objekts übernimmt die Basisfunktion getElement Natürlich erfolgt auch in jedem Fall die Überprüfung ob das gewünschte Objekt überhaupt existiert Funktion getContent Elementinhalt ermitteln Beispielaufrufe if NS4 Elementinhalt getContent id Hinweis if NS4 Elementinhalt getContent name Verweis 3 if NS4 Elementinhalt getContent tagname p 8 Über diese Funktion können Sie auf bequeme Weise den Inhalt eines Elements ermitteln zumindest wenn das DOM Modell oder das ältere Microsoft Modell für DHTML verfügbar sind getContent bedient sich der Basisfunktion getElement und reicht ihre drei übergebenen Parameter einfach an jene durch Bei DOM Syntax versucht sie an den Textinhalt des Elements mit firstChild nodeValue zu kommen bei Microsoft Syntax über die Eigenschaft innerText des all Objekts Das ältere Netscape Modell kennt kein Auslesen von Elementinhalten In den Beispielaufrufen ist der Funktionsaufruf deshalb davon abhängig gemacht dass nicht nach älterer Netscape Syntax gearbeitet wird if NS4 Sie können diese Funktion zwar auch im Netscape 4 ausführen sie wird aber immer false anstelle des gewüschten Elementinhalts zurückgeben Beachten Sie dass die Funktion getContent bei Verwendung des DOM Modells eine leere Zeichenkette zurückliefert wenn der erste Kindknoten des Elements kein Text ist sondern ein weiteres Element Wenn also beispielsweise notiert ist p id Absatz der Text p Dann liefert der Funktionsaufruf getContent id Absatz den Wert der Text zurück Wenn aber notiert ist p id Absatz b der Text b p Dann liefert der Funktionsaufruf bei Anwendung des DOM Modells eine leere Zeichenkette zurück da es keinen Text als Elementinhalt von p gibt sondern der Inhalt ein anderes Element nämlich ein b Element ist Die Parameter sind bei getContent die gleichen wie bei getElement Nur der Wert layerindex beim Parameter Mode wird von dieser Funktion nicht verarbeitet da sich dieser auf Netscape spezifisches Verhalten bezieht Die Funktion getContent kümmert sich auch um ältere Browser die Inhalte nicht dynamisch lesen können jedoch andere Teile der Bibliothek interpretieren Bevor der Versuch unternommen wird Inhalte zu lesen fragt sie ab ob das gewünschte Objekt existiert und ob auch das Objekt firstChild vorhanden ist Erst wenn diese Bedingung erfüllt ist wird versucht den Inhalt zu lesen Dadurch wird in jedem Fall eine Fehlermeldung vermieden Funktion setContent Elementinhalt dynamisch ändern Beispielaufrufe setContent id Hinweis null neuer Hinweistext setContent name Verweis 3 neuer Verweistext setContent tagname p 8 neuer Textinhalt des Elements if NS4 setContent layerindex 2 null neuer Inhalt des Layers Mit dieser Funktion können Sie den Inhalt eines Elements dynamisch ändern Die Funktion setContent bedient sich für den Zugriff auf das gewünschte Element der Basisfunktion getElement Die ersten drei Parameter die bei denen der übrigen Funktionen gleichen werden dazu an getElement weitergereicht Als vierten Parameter Text erwartet die Funktion setContent den gewünschten Textinhalt Beachten Sie dass dieser Text zumindest beim DOM Modell und beim älteren Microsoft Modell nur als reiner Text interpretiert wird HTML Formatierungen

    Original URL path: http://html.ekiwi.de/dhtml/beispiele/dhtml_bibliothek.htm (2016-04-25)
    Open archived version from archive

  • SELFHTML: Dynamisches HTML / Beispiele für die Praxis / Dynamische Navigationsleiste
    bewegen Um das Men uuml wieder wegzubekommen Maus wieder zum rechten Fensterrand bewegen p p Und jetzt kommen noch etliche leere Abs auml tze damit auch sichtbar wird dass das Men uuml immer an der gleichen Stelle angezeigt wird egal wie weit man scrollt p p nbsp p p nbsp p p nbsp p p nbsp p p nbsp p p nbsp p p nbsp p p nbsp p p nbsp p p nbsp p p nbsp p p nbsp p p nbsp p p nbsp p p nbsp p p nbsp p p nbsp p p nbsp p p nbsp p p nbsp p p nbsp p p nbsp p p nbsp p p nbsp p p nbsp p p nbsp p p nbsp p p nbsp p p nbsp p p nbsp p p Na das d uuml rfte reichen p body html Erläuterung Im sichtbaren HTML Bereich der Datei ist zunächst ein größerer div Bereich notiert der mit Hilfe von CSS Eigenschaften im style Bereich im Dateikopf absolut positioniert wird Durch die Angabe visibility hidden wird zunächst einmal alles was sich in diesem Bereich befindet nicht angezeigt Innerhalb dieses Bereichs mit dem id Namen Nav ist zunächst eine Grafik notiert navigation gif und anschließend ein weiterer absolut positionierter div Bereich wobei aber dort CSS Zuweisungen wie top 42px oder left 42px als relativ zur oberen linken Ecke des Eltern div Bereichs zu interpretieren sind Die Grafik navigation gif ist einfach eine optische Unterlage für den nachfolgenden div Bereich der die eigentlichen Verweise der Navigationsleiste enthält Der Rest des in der Datei notierten statischen HTML Codes ist für das Beispiel nicht wichtig Die vielen Textabsätze mit dem erzwungenen Leerzeichen nbsp dazwischen dienen nur dazu viel Dokumenthöhe zu erzeugen sodass man in der Datei scrollen kann Denn es soll demonstriert werden dass die dynamische Navigationsleiste immer an der gleichen Stelle erscheint auch wenn im Dokument gescrollt wird Im einleitenden body Tag der Datei ist der Event Handler onload notiert Wenn das Dokument vollständig geladen ist wird die Funktion Event init aufgerufen Event init stößt die Überwachung der Mausbewegungen im Dokument an Denn nur wenn eine solche Überwachung stattfindet kann die Navigationsleiste dynamisch eingeblendet werden Event Handling ist leider ein schwieriges Kapitel da die Implementierungen bislang doch noch recht unterschiedlich sind Das Beispiel versucht es erst mal nach der neueren DOM Syntax Die Abfrage if document addEventListener stellt sicher dass nur die Browser in den diesen Ausführungszweig nicht gelangen die Event Handling nach DOM Syntax interpretieren In den entsprechenden Zweig gelangt aber Netscape 6 der die Methode addEventListener versteht Mit addEventListener wird nach DOM Syntax eine Funktion bestimmt die aufgerufen wird wenn ein bestimmtes Ereignis eintritt Im Beispiel wird das Ereignis mousemove überwacht Während der Anwender im Dokumentbereich die Maus bewegt bewirkt diese Registrierung dass dann so oft es geht die Funktion handleMove aufgerufen wird Zur Bestimmung des zu überwachenden Elementes wird die Funktion getElement der DHTML Bibliothek aufgerufen Mit if NS4 fragt die Funktion Event init ab ob ein

    Original URL path: http://html.ekiwi.de/dhtml/beispiele/navigation.htm (2016-04-25)
    Open archived version from archive

  • SELFHTML: Dynamisches HTML / Beispiele für die Praxis / Laufende Datums-/Uhrzeitanzeige
    if NS4 setContent id Uhr null span class Uhr Gesamt span else setContent id Uhr null Gesamt window setTimeout ZeitAnzeigen 1000 script style type text css Uhr position absolute top 10px left 10px RestDerSeite position absolute top 50px left 10px Uhr font family Arial font size 24px color blue RestDerSeite font family Arial color black style head body onload window setTimeout ZeitAnzeigen 1000 div id Uhr class Uhr nbsp div div id RestDerSeite class RestDerSeite h1 Willkommen auf dieser Seite h1 p hier gehts ganz normal weiter p div body html Erläuterung Im Körper der HTML Datei im Beispiel werden insgesamt zwei div Bereiche definiert Beide Bereiche erhalten einen id Namen und erhalten über den jeweiligen id Namen im style Bereich im Dateikopf entsprechende CSS Eigenschaften zugewiesen Beide Bereiche werden absolut positioniert Ohne diesen Trick wäre die ganze Sache mit Netscape 4 x nicht realisierbar Der erste Bereich dient zur Anzeige von Datum und Uhrzeit und der zweite Bereich enthält den gesamten restlichen Inhalt der Datei weshalb er auch den Namen RestDerSeite trägt Der erste Bereich enthält zunächst nur ein geschütztes Leerzeichen So sieht man zunächst noch nichts von dem Bereich aber das Leerzeichen ist wichtig damit der Bereich einen Inhalt hat Ansonsten würde beim ersten dynamischen Zugriff auf seinen Inhalt mit DOM fähigen Browsern und den Funktionen der DHTML Bibliothek ein Fehler erzeugt Die Beispieldatei enthält ferner zwei JavaScript Bereiche im Dateikopf Im ersten leeren JavaScript Bereich wird die DHTML Bibliothek eingebunden im zweiten steht die Funktion ZeitAnzeigen die für die Zeitanzeige verantwortlich ist Im einleitenden body Tag ist der Event Handler onload der eintritt wenn die Datei und alle ihre eingebundenen Ressourcen vollständig geladen sind Diesem Event Handler ist ein Funktionsaufruf zugeordnet Er startet die Funktion ZeitAnzeigen jedoch eingebettet in eine setTimeout Anweisung die den Aufruf um 1

    Original URL path: http://html.ekiwi.de/dhtml/beispiele/datumuhr.htm (2016-04-25)
    Open archived version from archive

  • SELFHTML: Dynamisches HTML / Beispiele für die Praxis / Bilderbuch zum Umblättern
    aktuelleBreite 0 if DOM MSIE4 bildbereich style clip rect 0 Breite px 225px 0 else if NS4 bildbereich clip right Breite function Init bildbereich getElement id Bildbereich if DOM document createElement bildbereich appendChild var img document createElement img img setAttribute src Bild 0 src bildbereich appendChild img else if MSIE4 bildbereich innerHTML img src Bild 0 src else if NS4 setContent id Bildbereich null img src Bild 0 src script style type text css body color black background color white Bildbereich position absolute left 10px top 140px padding 0 clip rect 0 300px 225px 0 visibility show Navigationsbereich position absolute left 320px top 140px width 100px font size 24px style head body onload Init div id Bildbereich div div id Navigationsbereich a href javascript Blaettern 1 lt lt a a href javascript Blaettern 1 gt gt a div body html Erläuterung Im Körper der HTML Datei des Beispiels werden zwei div Bereiche definiert Der erste div Bereich ist zum Anzeigen der jeweils aktuellen Grafik gedacht Der zweite Bereich enthält Verweise mit deren Hilfe der Anwender vorwärts und rückwärts durch die Grafiken blättern kann Beide Bereiche werden mit Hilfe entsprechender CSS Eigenschaften absolut positioniert Die entsprechenden CSS Definitionen stehen im Dateikopf im style Bereich und beziehen sich auf die ID Namen der Bereiche Die Beispieldatei enthält ferner zwei JavaScript Bereiche im Dateikopf Im ersten leeren JavaScript Bereich wird die DHTML Bibliothek eingebunden Im einleitenden body Tag wird die Funktion Init aufgerufen die im JavaScript im Dateikopf notiert ist Diese Funktion sorgt dafür dass das erste Bild angezeigt wird Damit das Beispiel des Bilderbuches zum Umblättern sauber funktioniert passiert jedoch schon vorher etwas Gleich beim Einlesen der Datei also außerhalb jeder Funktion wird der JavaScript Code ausgeführt der zu Beginn des zweiten JavaScript Bereichs notiert ist Dort werden erst mal alle Grafiken eingelesen die im Verlauf des Umblätterns angezeigt werden sollen Denn nur wenn die Grafiken zu diesem Zeitpunkt bereits im Arbeitsspeicher sind gibt es keine Synchronisationsprobleme Dazu kommt das images Objekt von JavaScript zum Einsatz Zuerst wird ein neuer leerer Array angelegt Dann wird der Array mit Grafikobjekten gefüllt Dem jeweiligen Image Objekt das zu diesem Zweck erzeugt wird wird über die src Eigenschaft eine gewünschte Grafikdatei zugewiesen Anschließend werden noch ein paar globale Variablen definiert die später benötigt werden Die Funktion Init zeigt dann nach ihrem Aufruf die erste Grafik innerhalb des vorgesehenen Anzeigebereichs an Dabei ist einige Unterscheidungsarbeit nötig um die verschiedenen Browser und ihre DHTML Modelle zu bedienen In Browsern die das DOM Modell unterstützen wird mit den Funktionen createElement und setAttribute der img Elementknoten für das neue Bild erzeugt Mit appendChild wird das Bild anschließend an das div Element mit der ID Bildbereich gehängt Der Internet Explorer 4 gelangt dagegen in den Zweig der mit else if MS4 beginnt Dort wird die Elementknoten Eigenschaft innerHTML genutzt um den gewünschten HTML Code zusammenzubasteln Schließlich bleibt noch Netscape 4 x übrig der in den Zweig else if NS4 gelangt und die Grafik mit der Funktion setContent aus der DHTML

    Original URL path: http://html.ekiwi.de/dhtml/beispiele/bilderbuch.htm (2016-04-25)
    Open archived version from archive

  • Kommentarseite
    Ihr Kommentar Name Text zurück

    Original URL path: http://html.ekiwi.de/servercgi/cgi/anzeige/comments.htm (2016-04-25)
    Open archived version from archive

  • SELFHTML: Webserver/CGI / Webserver / Webserver lokal auf einem PC einrichten
    Zum lokalen Einsatz sind solche Produkte völlig ausreichend Der im Internet am meisten verbreitete Webserver Apache ist auch für typische PC Betriebssysteme wie Windows verfügbar Angesichts der Tatsache dass dieses Produkt längst auf der Mehrzahl der Server im Internet seinen Dienst tut ist er wohl das empfehlenswerteste Produkt Im Link Verzeichnis des Online Angebots von SELFHTML aktuell finden Sie eine Produktübersicht mit Links zu den Anbietern SELFHTML Linkverzeichnis Server Software Auf den Anbieterseiten können Sie die Produkte in der Regel downloaden Grundeinstellungen für den lokalen Betrieb Ein Webserver ist kein Programm mit Arbeitsoberfläche Durch den Aufruf der ausführbaren Programmdatei starten Sie einfach den Server Betrieb Ihr Browser ist dann in der Lage mit diesem Server auf Ihrem Rechner zu kommunizieren genau so wie der Browser mit jedem öffentlichen Webserver kommunizieren kann Bevor das richtig funktioniert müssen Sie den Webserver jedoch einrichten d h wichtige Grundeinstellungen vornehmen Einige Webserver können Sie nach dem Starten dialoggesteuert einrichten z B OmniHTTPd für Windows oder Quid Pro Quo für Macintosh bei anderen Produkten richten Sie den Webserver vor dem ersten Starten durch Editieren von Konfigurationsdateien ein beim Apache ist dies z B die Datei httpd conf im Programmunterverzeichnis conf Einige Produkte laufen unter Windows in einem DOS Fenster z B Apache können auf moderneren Systemumgebungen aber auch als Hintergrunddienste eingerichtet werden Suchen Sie im Zweifelsfall nach der Installation des Webservers in dessen Programmverzeichnis nach Hilfedateien Dort sollte dokumentiert sein wie Sie Ihren Webserver einrichten können Alle Einstellungen bleiben auf jeden Fall gespeichert Wenn Ihr Webserver also erst einmal funktioniert brauchen Sie ihn nur noch durch Starten und Beenden der Programmdatei ein und auszuschalten Das können Sie in der Regel auch mit Hilfe einiger bei der Installation erzeugter Einträge im Startmenü erreichen Folgende wichtige Daten müssen Sie nach Wunsch bzw korrekt einstellen IP Adresse und Hostnamen des Servers Für den lokalen Betrieb müssen Sie hier normalerweise die reservierte IP Adresse 127 0 0 1 oder den reservierten Hostnamen localhost eintragen Wenn die Angaben nicht funktionieren versuchen Sie in den Hilfedateien Informationen zu finden oder setzen Sie sich mit dem Produktanbieter des Webservers über dessen Homepage nach E Mail Adresse suchen in Verbindung Wenn die Angaben funktionieren können Sie im Browser nach Einschalten des Webservers lokal gespeicherte HTML Dateien über die Internet Adressen http 127 0 0 1 oder http localhost aufrufen Port des Servers Dabei ist normalerweise 80 einzutragen Ports sind Nummern für TCP IP Dienste auf dem betreffenden Rechner Für häufig genutzte Dienste sind so genannte Well Known Ports festgelegt Das heißt diese Portnummern werden von Clients wie Browsern oder FTP Programmen standardmäßig verwendet sofern nicht explizit anders angegeben Für den Dienst FTP sind beispielsweise 20 und 21 die üblichen Portnummern für den HTTP Dienst ist es 80 Lesen Sie jedoch sicherheitshalber in der Dokumentation des Webservers nach welche Nummer Sie hier eintragen sollten HTTP Wurzelverzeichnis für HTML Dateien document root Dabei geben Sie entsprechend der Syntax Ihres Betriebssystems den Pfadnamen an unterhalb dessen sich Ihre lokalen HTML Dateien befinden Wenn Sie Windows benutzen

    Original URL path: http://html.ekiwi.de/servercgi/server/allgemein.htm (2016-04-25)
    Open archived version from archive



  •