Interaktive Webseiten mit viele Funktionen sind schön und gut, erfordern aber eine neue Anfrage am Server und der Besucher muss wieder warten. Dieser möchte zeigen wie man dies auch mit kleine PopUps hinbekommt (funktioniert auch bei aktivem PopUp-Blocker).
Für den hier dargestellte Inhalt ist nicht der Betreiber der Plattform,
sondern der jeweilige Autor verantwortlich.
Falls Sie Missbrauch vermuten, bitten wir Sie, uns unter missbrauch@it-academy.cc
zu kontaktieren.
Einige Webmaster bauen für jedes einzelne Element ihrer Seite (Kontaktformular,
Suchfunktion usw.) eine ganz eigene Seite, welche dann wieder jedesmal einzeln
geladen werden müssen. Für die Internet-Benutzer mit Breitbandverbindungen ist das ja meist kein Problem,
für die anderen jedoch ziemlich umständlich. Diesen Leuten kann man mittels JavaScript
helfen.
Es handelt sich hierbei um "interaktive Boxen" die mittels JavaScript über die Seite
schweben. Dieses Script wurde erfolgreich getestet mit
Für Besucher mit anderen Browsern oder ohne JavaScript gibt es natürlich noch
alternative Links. Sie können das Script nachher noch ändern, sodass es auch in
anderen Browsern funktioniert. Dafür fragen Sie erst beim Hersteller nach wie sich dieser identifiziert
(der Name) und welches HTML, CSS und JavaScript er versteht. Dazu werde ich zur rechten
Zeit nochmal auch zurück kommen. Ich möchte aber schon mal darauf hinweisen, dass
im Browser Opera der Nutzer auswählen
kann wie er sich identifiziert, was zu Kompatibilitätsproblemen führen kann.
Die Theorie
Die verschiedene Boxen werden in einer Variable vom Typ Array aufgenommen. Diese werden
dann alle zum Schirm geschrieben. Anfangs sind sie alle unsichtbar. Beim betätigen eines Links
wird eines sichtbar gemacht. Dabei werden alle andere nochmal unsichtbar gemacht, sodass
mit Sicherheit nur eine Box sichtbar ist. Die Boxen können durch den Besucher auch einzeln
weggeklickt werden.
Das Script braucht:
eine Variabele, die die HTML-Codes für die Boxen enthält
eine Schleife die diese zum Schirm schreibt
eine Funktion die eine Box sichtbar macht beim Betätigen eines Links. Diese Funktion besteht aus:
einer Schleife die alle Boxen erneut unsichtbar macht
einem Teil, dass die gefragte Box sichtbar macht
einer Funktion, der ein alternativer Link folgt, wenn der Besucher einen anderen Browser hat
eine Funktion, die eine einzelne Box wieder unsichtbar macht
Das Script
Das Script steht unten. Hier wird schrittweise erklärt wie das Script funktioniert.
Es wird jedesmal referenziert wo die Codeteile stehen (die Codeteile haben die selbe
Nummerierung wie die Erklärungen).
Als erstes muss ich nochmal erklären wie die Links funktionieren. Es werden immer zwei Variablen mitgegeben:
eine für die ID der Box die angezeigt werden soll (immer nur ein Buchstabe, später mehr dazu) und eine die
den alternativen Link andeutet (eine Zahl, später mehr dazu). Der Link hat auch selbst ein Link, für den Fall,
dass der Besucher überhaupt kein JavaScript hat. Um zu verhindern, dass dieser Link gefolgt wird wenn der Besucher
doch JavaScript hat, wird der deklarierung return false mitgegeben
(mehr zu return false). Ein Link
sieht dann so aus:
In den Boxen sind auch Links enthalten um eine Box wieder verschwinden zu lassen. Hierbei muss nur ein Variable
mitgegeben werden, nämlich die ID der Box die unsichtbar gemacht werden soll.
<a onClick="unsichtbar('a');">
Beachten Sie bitte die Schreibweise: Buchstaben kommen zwischen einfachen Anführungszeichen, Zahlen ohne.
Die HTML-Codes für die Boxen kommen alle in eine Variable vom Typ Array.
Mehr dazu sehen Sie unter Punkt 2 vom Script.
Hier möchte ich nur kurz erklären wie die HTML-Codes für die Boxen
aus zu sehen haben. Ich benutze hierfür Tabellen (mehr zu Tabellen).
Diese sollten anfangs unsichtbar sein und bekommen deshalb die Deklaration visibility:hidden;.
Des Weiteren sollten sie über den eigentlichen Seiten-Inhalt schweben, was man mit z-index:2; bewirkt.
Hierbei muss allerdings verhindert werden, dass sich der Seiten-Inhalt verschiebt, deshalb müssen die Boxen absolut
positioniert werden mit position:absolute;.
Diese drei sind die minimale Voraussetzungen für die Tabellen, ansonsten kann man sie formatieren wie man es selber möchte.
Aber noch mal kurz die minimale Formatierung zeigen:
Sie sollten auch unbedingt beachten, dass Sie die einfachen Anführungszeichen die in einer Tabellendefinition
vorkommen, maskiert werden müssen mit einem Rückstrich/Backslash ( \ ). Dies verhindert,
dass der Browser denkt, die Variable endet dort.
Die Tags, die darin vorkommen, sollten auch maskiert werden. Ein <
am Anfang einer Tags ersetzt man durch -->. Das ist ein Referenzcode,
wodurch der Browser die Tabellendefinition nicht als Tabelle anzeigt
(mehr zu Referenzcodes).
Um dieses Script nutzen zu können, müssen Sie nur Ihre Boxen definieren und diese in den Array einführen und Ihre
Links gestalten. Hierfür müssen Sie beachten, dass die ID der Boxen immer nur ein einziger Buchstabe ist. Der Wert der
ersten Variablen für die Funktionen boxen() und unsichtbar()
ist die ID. Die zweite Variable für die Funktion boxen() ist eine Zahl.
Diese ist die Nummer des Array-Elementes worin die Box enhalten ist. Dazu sehen Sie später mehr, jetzt müssen Sie nur
wissen, dass die zwei Variablen-Werte immer Paare sind in der Art von ('a',0), ('b',1), ('c',2), usw.
Zuerst kommt der Öffnungstag des Scripts (<script>). Hierin wird deklariert,
dass es sich um JavaScript handelt. Früher wurde dies gemacht mit language="javascript",
jetzt sollte man jedoch type="text/javascript" benutzen.
Als nächstes müssen wir die Boxen deklarieren. Dafür schreiben wir die Codes in assoziative
Arrays (mehr über assoziative Arrays). Wir brauchen hier zwei
Inhalte für jede Box: den HTML-Code und einen alternativen Link für den Fall, dass der Besucher ein anderen Browser
als Internet Explorer, Netscape oder Mozilla hat. Beachten Sie, dass im Code keine
Zeilenumbrüche vorkommen, da dies Probleme macht mit JavaScript.
Mit einer While-Schleife schreiben wir alle Boxen zur Seite mit der Funktion document.write().
(mehr zuWhile-Schleifen
und document.write).
Jetzt fangen wir die Funktion boxen() an.
Sie benutzt zwei Variablen, die die Namen idd und
nr haben. Woher die Variablen kommen, haben Sie schon weiter oben
gelesen (mehr über Funktion-Deklarierung).
Es wird abgefragt ob der Besucher den Internet Explorer benutzt. Dies geschieht mit
navigator.appName. Wenn dies nicht der Fall ist, wird abgefragt
ob der Besucher den Netscape Navigator oder den Mozilla verwendet. Wenn auch dies nicht der Fall ist,
wird ein alternativer Link gefolgt, aber dazu später mehr.
Dieser Teil wird nur ausgeführt wenn der Besucher den Internet Explorer benutzt. In älteren
Versionen machte Microsoft Gebrauch von einem eigenen Dynamischen Objekt Model (DOM) und
Objekte wurden angesprochen mit document.all. Jetzige Versionen von
Internet Explorer benutzen das standardisierte document.getElementById.
In einer IF-Abfrage testen wir einfach ob der Browser das ältere Model erkennt. Wenn dies der Fall ist,
werden Punkt 7 und 8 ausgeführt, ansonsten geht es weiter bei Punkt 9.
In Punkt 8 soll eine Box sichtbar gemacht werden. Um zu verhindern, dass zwei Boxen zu gleicher Zeit
sichtbar sind, werden erst alle Boxen unsichtbar gemacht. Dies machen wir wie in Punkt 3, aber jetzt mit der
Variable zaehler2.
Wir brauchen allerdings die ID einer Box. Diese lesen wir aus mit der Funktion
substr (mehr zur Funktion substr()). Deshalb darf die ID auch nur einen
einzigen Buchstaben haben (wenn Sie mehr Boxen auf einer Seite haben wollen als das Alfabet Buchstaben hat,
müssen Sie jede ID zwei Buchstaben geben und die Funktion dem entsprechend anpassen.
Danach wird die Eigenschaft visibility auf
hidden gestellt und die Variable wird um einen Zähler erhöht.
Als nächstes wird die Box, die der User haben möchte, sichtbar gemacht. Hierbei positionieren wir die
Box auch neu mit style.left und
style.scrollTop.
LEFT ist der Abstand in Pixeln vom linken Fensterrand. SCROLLTOP gehört zum Modell von Microsoft und bestimmt
den Abstand vom oberen Fensterrand. Der Unterschied mit TOP ist, dass der Abstand zum Fensterrand gemessen
wird und deshalb mitscrollt.
Zweiter Teil der IF-Abfrage. Wenn der Internet Explorer des Besuchers das ältere Modell nicht erkennt,
das neuere (getElementById) aber schon (sollte normalerweise der Fall sein), dann werden Punkt 10 und 11
ausgeführt.
Das gleiche wie in Punkt 7, aber jetzt mit document.getElementById
anstatt document.all.
Das gleiche wie in Punkt 8, aber jetzt mit document.getElementById
anstatt document.all.
Wenn der Internet Explorer des Besuchers keine dieser beiden Modelle erkennt, wird ein alternativer Link gefolgt.
Dies sollte nie der Fall sein, da alle Versionen von Internet Explorer ab der Version 3 wenigstens einen dieser
beiden erkennt. Jedoch könnte sich dies vielleicht in der Zukunft ändern, und dann sind wir schon mal vorbereitet.
Hier schließt sich der ganze Internet Explorer Teil ab.
Hier wird abgefragt ob der Browser des Besuchers sich als "Netscape" identifiziert (das machen Netscape
Navigator und Mozilla), genau wie in Punkt 5.
Genau wie in Punkt 6, jedoch nennt sich das ältere Modell von Netscape
document.layers.
Genau wie in Punkt 7, aber mit dem älteren Netscape-Modell.
Genau wie in Punkt 8, aber mit dem älteren Netscape Modell. Hier wird aber
document.scrollTop ersetzt durch window.pageYOffset.
Genau wie Punkt 9.
Genau wie Punkt 10.
Genau wie Punkt 11. Hier wird aber document.scrollTop
ersetzt durch window.pageYOffset.
Genau wie Punkt 13.
Der letzte Teil der IF-Abfrage. Dieser wird nur ausgeführt wenn der Besucher keinen Internet Explorer, Netscape
Navigator oder Mozilla benutzt. Hier wird nichts weiteres gemacht als das Öffnen von einem alternativen Link.
Im Fall, dass der Browser des Besuchers ein anderer ist als Internet Explorer, Netscape Navigator
und Mozilla, wird ein alternativer Link geöffnet.
Hier schließen wir die Funktion boxen() die wir
in Punkt 4 geöffnet hatten.
Hier haben wir noch die Funktion unsichtbar().
Diese dient dazu eine einzelne Box manuell unsichtbar zu machen. Hierfür wird per Link die ID
der Box mitgegeben. Danach wird, abhängig davon ob der Browser document.all,
document.layers oder document.getElementById
versteht, die Box unsichtbar gemacht.
Zu guter letzt kommt noch der End-Tag jedes Scriptes.
Anmerkung:
Sie sehen an den Farben welche Teile zusammen gehören bzw.
welche Klammern einselben Code-Teil umklammern. Schwarze Nummern zeigen ein eigenständiges Teil an.
