 Info-Box 02 (Info-Box-Inhalte werden im Array notiert)
Bei MouseOver wird eine InfoBox eingeblendet, die bei MouseOut (wenn sie möchten zeitverzögert) wieder ausgeblendet wird. Einsetzbar für Links, Bildinformationen, Querverweise, ... Demo:  Array
Die Infobox 02 bietet viele Anpassungsmöglichkeiten und ist in der Anwendung sehr flexibel. Anders als bei der InfoBox 01 werden die Inhalte für alle innerhalb der Seite eingesetzen Boxen zentral im Head-Bereich notiert. (Bei der InfoBox 01 werden die Inhalte an Ort und Stelle des Aufrufs übergeben)
 06.03.2008 Info Formatierung und HTML-Tags  lesen
Wenn es Probleme gibt:
Sollte die Infobox im FireFox nicht korrekt arbeiten, nachdem sie das Script mit ihrem Editor in ein HTML-Dokument eingefügt haben, überprüfen sie die DOCTYPE-Angabe für ihre Seite!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
Möglichkeiten
Für die Info-Box stehen neben den Möglichkeiten der Formatierung und Gestaltung der Inhalte auch eine zeitverzögerte Ausblendung und Positionierungsangaben zur Verfügung.
- HTML-Formatierungen erlaubt
- Enbindung von Images
- Einbindung von Verweisen
- zeitverzögerte Ausblendung
- Positionierung der Info-Box
|
|
Arbeitsaufwand des Webmasters für den Einbau:
- Script im HEAD-Bereich kopieren
- Inhalte für jede Box notieren
- DIV-Bereich im Body notieren
- In den Verweisen EventHandler (MouseOver / MouseOut) notieren
Lassen sie sich von den langen Erklärungen hier nicht abschrecken und kopieren für einen ersten Versuch einfach den Code der Textdatei in ihre Seite. Falls sie dann die Funktion der InfoBox erweitern möchten oder weitere Erklärungen benötigen, lesen sie den betreffenen Abschnitt.
Inhalte für die Info-Boxen notieren
Für jede Infobox die innerhalb der Seite eingeblendet werden soll, wird der entprechende Inhalt notiert! Die Inhalte sind in einem Array (deutsch: Register) abgelegt.
In den einzelnen Elementen des Arrays wird eingetragen, was in den Info-Boxen angezeigt werden soll. Die Elemente können unterschiedliche Inhalte wie Texte, Grafiken oder Verweise beinhalten. Der Inhalt jedes einzelnen Array-Elements steht in Anführungszeichen. Die Elemente sind durch ein Komma voneinander getrennt. Logisch: Nach dem letzten Eintrag folgt kein Komma.
Beispiel eines Arrays mit 4 Elementen. Der Array hat hier den Namen 'descarray'.
descarray = new Array(
"Text für Anzeige in Info-Box 1",
"Text für Anzeige in Info-Box 2",
"Text für Anzeige in Info-Box 3",
"Text für Anzeige in Info-Box 4"
);
Die einzelnen Elemente des Arrays werden mit der fortlaufenden Nummer angesprochen. Dabei hat das erste Element des Arrays die Nummer Null (0), das zweite die Nummer Eins (1),, das dritte die Nummer Zwei (2), ...
gezielter Abruf der Array-Inhalte
Die Inhalte dieses Arrays können nun von der InfoBox-Funktion abgerufen und dargestellt werden. Beim Aufruf der Funktion wird durch den Eintrag der Ziffer festgelegt, welches Array-Element des Registers genutzt werden soll.
Verbal ausgedrückt könnte eine Anweisung für die Anzeige der Info-Box mit dem Inhalt des Eintrags 3 so lauten:
"... bei MouseOver rufe die Funktion zur Anzeige der Info-Box auf und zeige innerhalb der Info-Box das an, was im Array 'descarray' als 3. Element eingetragen wurde."
Die JavaScript-Anweisung wird so notiert:
onMouseOver="popLayer(2)"
|
|
Bei Mouseover wird die Box angezeigt
Inhalt der Anzeige ist das, was im Array-Element 3 notiert wurde.
 Info-Box anzeigen
|
Bei MouseOver wird die Funktion 'popLayer()' aufgerufen. Innerhalb der Klammern steht die Nummer des Array-Elements, dessen Inhalt in der Box angezeigt werden soll. Hier ist das die Nummer 2 was bedeutet, das der Inhalt des dritten Array-Elements angezeigt werden soll.
Was bedeutet "popLayer(2)" ?
Die 2 im Aufruf bewirkt: Die eingeblendete InfoBox soll für die Anzeige verwenden, was im Array an 3. Stelle eingetragen wurde. Die eingeblendete InfoBox verwendet die Inhalte des Array-Element 3.
|
|
|
Mit Null beginnen
Bedenken sie dabei, das JavaScript beim Zählen mit der Null beginnt! Das erste Array-Element ist das Element Nr. 0 (Null), das zweite das Element Nr. 1, das dritte eingetragene Element das Element mit der Nr. 2, ... usw.
|
|
Aufruf der Funktionen
Es gibt 2 Funktionen, eine zur Anzeige der Box, eine zum Ausblenden der Box. Innerhalb eines Verweises (Link) werden Eventhandler für MouseOver- und MouseOut-Ereignisse eingebaut! Bei MouseOver wird die Funktion zur Anzeige, bei MouseOut die Funktion zum Ausblenden aufgerufen.
In den üblichen Link ...
<a href="datei04.htm"> Textlink </a>
... werden die hier rot markierten Erweiterungen eingetragen. Die Zahl bestimmt den Inhalt der Info-Box.
<a href="datei04.htm" onMouseOver="popLayer(4)" onMouseOut="hideLayer()">
Textlink </a>
Formatierung, HTML-Tags + Grafiken innerhalb der Info-Box
Die Grundlage ist bekannt: Die Inhalte für alle innerhalb der Seite anzuzeigenden InfoBoxen sind in einem Register abgelegt. Bitte beachten sie, dass die einzelnen Inhalte des Arrays innerhalb von Anführungszeichen stehen. Das erste Anführungszeichnen (Doppelstrich) steht am Beginn, das zweite am Ende jeden Eintrags. Anführungszeichen werden paarweise benutzt! Beispiel:
descarray = new Array(
"Text der Info-Box 1",
"Text der Info-Box 2",
"Text der Info-Box 3",
"Text der Info-Box 4"
);
 keine weiteren (normalen) Anführungszeichen erlaubt!
Bis auf die Anführungszeichen, die jedes Array-Element einschließen, sind keine weiteren doppelstrichigen Anführungszeichen erlaubt. Alle zusätzlichen Anführungszeichen für HTML-Formatierungen, CSS-Anweisungen, Verweise oder Image-Tags müssen daher durch das eingestrichene Anführungszeichen (Hochkomma) ersetzt werden!
Zur Anschauung habe ich die simple Notierung der Inhalte die nur aus reinem Text bestehen (oben), nun einmal für Info-Box-Inhalte erweitert, die Formatierungen oder Grafiken vorsehen. Dort, wo für die Erweiterungen üblicherweise doppelte Anführungszeichen benutzt würden, sind eingestrichene Anführungszeichen (Hochkommas) eingesetzt!
descarray = new Array(
"<span style='color:#0000FF;'>Text der Info-Box 1</span>",
"<img src='kuh.gif' height='45' width='60'>Text der Info-Box 2",
"<b>Text der Info-Box 3</b><br>zweite Textzeile",
"<div align='center'>Text der Info-Box 4</div>"
);
|
|
Beispiel für eine zusätzliche Grafik in der Info-Box.
Dieser Info-Box-Inhalt soll auch eine Grafik enthalten.
"Text der Info-Box",
Neben dem Text wird nun zusätzlich ein HTML-Image-Tag eingetragen. Die üblichen (doppelt-gestrichenen) Anführungszeichen im Image-Tag ...
"<img src="kuh.gif" height="45" width="60"> Text der Info-Box",
... müssen durch (einzel-gestrichene) Anführungszeichen ersetzt werden:
"<img src='kuh.gif' height='45' width='60'> Text der Info-Box",
Beispiel Info-Box für Verweise
Soll die Info-Box nicht bei einem echten Link sondern über einem normalen Text oder ein Image erscheinen, muss man ein wenig mogeln! Man muss einen Link einbauen, der in Wiklichkeit keiner ist (nirgendwo hin leitet). Statt des Eintrags für das Verweisziel (http://www.irgendwas.de) tragen sie ein #-Zeichen (Gatter) als Referenz-Angabe ein.
<a href="#" onMouseOver="popLayer(7)" onMouseOut="hideLayer()">
Symbol PDF-Datei + Text
</a>
 Info PDF-Datei
Was benötige ich
Ein Klick auf disen Pseudo-Link bewirkt bei einigen Browsern einen Sprung zum Seitenanfang oben. Statt des '#' (Gatter) können sie alternativ ...
<a href="javascript:void(0)" onMouseOver="popLayer(7)" ... ">
Symbol PDF-Datei
</a>
... eintragen.
Positionierung der Info-Box
Grundsätzlich ist die Positionierung unmittelbar am Link. Meine Erweiterung dieses Beispiels eröffnet ihnen die Möglichkeit eine fixe X-Y-Position zu definieren.
Sie haben hier also die Wahl: Die Position der Info-Box entweder gleich neben dem Link oder immer an der gleichen, festgelegten Position anzeigen zu lassen. Dazu werden im JavaScript die beiden entsprechenden Zeilen für die Positionierung aktiviert / deaktiviert.
A Position an einem festgelegten Punkt
Die X-Y Koordinaten bestimmen den Punkt für die linke obere Ecke der Box.
// Position bei 300 von links, bei 20 von oben
x = 300;
y = 20;
// oder Plazierung neben Mauszeiger
// x = (isNav) ? e.pageX : event.clientX + document.body.scrollLeft;
// y = (isNav) ? e.pageY : event.clientY + document.body.scrollTop;
B Position neben Mauszeiger
// Position bei 300 von links, bei 20 von oben
// x = 300;
// y = 20;
// oder Plazierung neben Mauszeiger
x = (isNav) ? e.pageX : event.clientX + document.body.scrollLeft;
y = (isNav) ? e.pageY : event.clientY + document.body.scrollTop;
Durch 2 vorangestellte Slashes [ // ] wird bei JavaScript eine Zeile zu einem Kommentar. Die Anweisungen in der Zeile werden nicht ausgeführt.
Weitere Möglichkeiten der Positionierung
Grundsätzlich war die Positionierung unmittelbar am Link oder an einer fixen Position vorgesehen.
Meine Erweiterung dieses Beispiels (16.06.2006) eröffnet ihnen neben den beschriebenen ersten beiden Varianten zusätzliche Möglichkeiten.
- berechnete Position
- Anzeige in der Seitenmitte
- Übergabe der Koordinaten
|
|
Grafiken
Diese selbst hergestellten Grafiken dürfen sie gerne herunterladen und verwenden. Mehr davon gibts in meiner MINI-IMAGE-BOX
 10 x 10 Pixel
 10 x 10 Pixel
 10 x 10 Pixel
9 x 9 Pixel
|
HOME
Beispiel 
Positionierung