 Info-Box 02 (Beispiel 01)
Für die Info-Box 02 habe ich separate Beispielseiten ohne weitere Erklärungen erstellt. Im Wesentlichen handelt es sich um Varianten durch benutzerseitige Anpassungen. Erklärungen auf der Seite  Info-Box 02
Bei MouseOver wird eine InfoBox eingeblendet, bei MouseOut wieder ausgeblendet. Dieses Beispiel zur Info-Box 02 zeigt die Formatierung von Texten mit CSS-Anweisungen, den Einsatz von Verweisen (Links) und die Verwendung von Grafiken. Die Box-Breite ist 350 Pixel.
Ziel der Anpassungen im Beispiel 01
In der Info-Box soll ein Verweis eingebunden werden, Texte sollen mit CSS-Anweisungen formatiert und Grafiken sollen angezeigt werden.
Demo der Variante 01
Zur Anzeige der Info-Box den Mauszeiger über einen Link bewegen.
Info-Box 0 anzeigen
Info-Box 1 anzeigen
|
Einstellungen
Breite der Info-Box: 350 Pixel
Zeitverzögerung: 4 Sek
Anzeige: am Link
Textformatierung: CSS
Anzeige der Verweisseite: _blank
Grafik eingebunden: ja
|
|
|
Einträge für die Array-Elemente
Im Array-Element 0 wurde eingetragen, was in der InfoBox 0 angezeigt werden soll (Elefanten). Im Array-Element 1 wurde eingetragen, was in der InfoBox 1 angezeigt werden soll (Delphine).
In den Infoboxen dieses Beispiels sind auch Verweise notiert!
Damit man den Mauszeiger auch zum Link innerhalb der Info-Box führen kann bevor die Box ausgeblendet wird, habe ich die Verzögerung auf 4000 MilliSekunden eingestellt.
Notierungen der Links
<a href="javascript:void(0)"
onMouseOver="popLayer(0)" onMouseOut="setTimeout('hideLayer()',4000)">
Info-Box 0 anzeigen
</a>
<a href="javascript:void(0)"
onMouseOver="popLayer(1)" onMouseOut="setTimeout('hideLayer()',4000)">
Info-Box 0 anzeigen
</a>
Bsp.: Eintrag für das Array-Element 1
Unten habe ich CSS-Formatierungen und HTML-Tags einmal eingefärbt.
Deutlicher werden ihnen die Einträge wahrscheinlich, wenn sie den Quellcode in der Textdatei oder in der Vergößerung betrachten. Hier erscheint alles ein wenig unübersichtlich.
|
|
"<span style='color:#FF007F'>erstes Array-Element - Nummer 0</span><br><br>
<span style='color:#9999FF;font-size:18px;'>Elefanten</span><br><br>
<img src='ani-elefant.gif' width='89' height='73' border='0' alt=''><br><br>
<img src='pfeil-klein.gif'>
<a target='_blank' href='http://de.wikipedia.org/wiki/Elefanten'>
Wikipedia Elefanten</a><br><br>
Elefanten sind die größten noch lebenden Landtiere. Bei der Geburt wiegt
ein Kalb bis zu 100 Kilogramm. Die Tragzeit ist mit 20 bis 22 Monaten die
längste aller Landsäugetiere. Der älteste Elefant lebte im Zoo von Taipeh
und wurde 86 Jahre alt. Je nach Art kann ein Elefant im Durchschnitt
zwischen zwei und fünf Tonnen Körpergewicht und eine Größe von bis zu
vier Metern erreichen.",
Breite der Info-Box
Die Breite der Box habe ich in der DIV-Definition festgelegt
<!-- Anfang DIV-Definition -->
<div id="object1" style="width:350px; position:absolute; ...
verwendete Grafiken
|
|
|
ani-delphin.gif
www.kneller-gifs.de
|
ani-elefant.gif
www.kneller-gifs.de
|
pfeil-klein.gif
Mini-Image-Box
|
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.
 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;
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;
Duch 2 vorangestellte Doppelslashes [ // ] wird bei JavaScript eine Zeile zu einem Kommentar. Die Anweisungen in der Zeile werden nicht ausgeführt.
|
WWW.WEB-TOOLBOX.NET
QuellCode
ZURÜCK 