 Info-Box 02 (nur Text)
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 simple Version 'nur Text'. Die Formatierung der Box und des Textes erfolgen mit CSS-Anweisungen.
Ziel der Anpassungen im Beispiel 'nur Text'
In der Info-Box soll lediglich Text werden, die Texte sollen mit CSS-Anweisungen formatiert werden. Die Hintergrundfarbe der Box soll bestimmt werden. Die Box-Breite soll 350 Pixel betragen. Der Rand soll 1 Pixel schwarz sein.
Demo der Variante 'nur Text'
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
Anzeige: am Link
Textformatierung: CSS
Hintergrundfarbe: #ECFFF1
Rand: 1px solid #000000
|
|
|
2 Array-Elemente for 2 Info-Boxen
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).
Einträge für die Array-Elemente.
Unten habe ich CSS-Formatierungen und HTML-Tags einmal eingefärbt.
descarray = new Array(
"<span style='color:#9000E0'><b>Elefanten</b> - erstes Array-Element</span>
<br>Elefanten sind die größten noch lebenden Landtiere.
Bei der Geburt wiegt ein Kalb bis zu 100 Kilogramm.",
"<span style='color:#0D0DFF'><b>Dephine</b> - zweites Array-Element</span>
<br>Die Delfine gehören zu den Zahnwalen und sind somit
Säugetiere, die im Wasser leben (Meeressäuger). Sie sind in allen
Meeren verbreitet."
);
Notierungen der Links
<a href="javascript:void(0)"
onMouseOver="popLayer(0)" onMouseOut="hideLayer()">
Info-Box 0 anzeigen
</a>
<a href="javascript:void(0)"
onMouseOver="popLayer(1)" onMouseOut="hideLayer()">
Info-Box 0 anzeigen
</a>
Breite der Info-Box
Die Breite der Box habe ich in der DIV-Definition festgelegt (Body-Bereich)
<!-- Anfang DIV-Definition -->
<div id="object1" style="width:350px; position:absolute; ...
Hintergrundfarbe der Info-Box
Die Formatierungsanweisungen finden sie innerhalb des JavaScripts (Head-Bereich)
desc = "<table style='border:1px solid #5F5F5F; background-color:#ECFFF1' ...
Randformatierung der Info-Box
Die Formatierungsanweisungen finden sie innerhalb des JavaScripts (Head-Bereich)
desc = "<table style='border:1px solid #5F5F5F; background-color:#ECFFF1' ...
Allgemeine Textformatierung für die Info-Box
Die Formatierungsanweisungen finden sie innerhalb des JavaScripts (Head-Bereich)
... <td style='font-size:11px; color:#000000;'> ...
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 