 InfoBox 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, ...
Die Inhalte für die Info-Boxen werden in einem Register abgelegt.
|
|
InfoBox 02 - PopUp bei MouseOver - Box-Inhalte im Array
UPDATE 04.07.2010 neues Script, Aufbau des Arrays vereinfacht, Formatierung, Erklärungen
Die Infobox 02 bietet viele Anpassungsmöglichkeiten und ist in der Anwendung sehr flexibel. Anders als bei der InfoBox 01 (bei der die Inhalte an Ort und Stelle des Aufrufs übergeben wurden) werden die Inhalte für alle innerhalb der Seite eingesetzen Boxen im Head-Bereich in einem Array notiert.
Screenshot:
MouseOver für eine Demo:  Was ist ein Array ?
Arbeitsaufwand des Webmasters für den Einbau
- Script im HEAD-Bereich kopieren
- CSS-Anweisungen im HEAD-Bereich kopieren
- Inhalte für jede Box als Array-Element notieren
- DIV-Bereich im Body notieren (gleich hinter dem BODY-Tag)
- In den Verweisen EventHandler (MouseOver / MouseOut) notieren
Bitte entnehmen Sie den gesamten Quellcode für dieses Beispiel der Textdatei (Link oben im Kopfbereich). Dort können Sie ebenfalls eine Demo- bzw. eine Beispieldatei abrufen. Infos und Erklärungen zum 'Einbauen' von JavaScript  JavaScript Menü 01
Ich verwende für die Box eine Hintergrundgrafik, die ich mit CSS einbinde. Die Grafik ist im Download enthalten. Die Farbwerte unter den Grafiken entspechen der Hintergrundfarbe.
#ECF5FE
|
#FFEEDE
|
#E6F8E5
|
#F9F9F9
|
Das war's schon! Lassen sie sich von den langen Erklärungen hier nicht abschrecken und kopieren für einen ersten Versuch einfach den Code in ihre Seite (Textdatei des Quellcodes im Kopfbereich oben). Wenn sie mehr über Funktion und Anpassungen erfahren möchten, lesen Sie unten weiter.
Wenn Ihnen das als Einstieg ausreicht öffnen Sie die Quellcodeseite, kopieren den Code in Ihre Seite und experimentieren weiter.
Inhalte für die Info-Boxen notieren
Für jede Infobox die innerhalb der Seite eingeblendet werden soll, wird ein entprechender Inhalt notiert! Die Inhalte sind in einem  Array (deutsch: Register) abgelegt.
Ich möchte z.B. 5 Info-Boxen innerhalb der Seite einsetzen. In den einzelnen Elementen des Arrays wird eingetragen, was in den Info-Boxen angezeigt werden soll. Da ich das erste Element nicht nutze, hat mein Register 6 Elemente. Die Elemente können unterschiedliche Inhalte wie Texte, Grafiken oder Verweise beinhalten. Die Inhalte für jedes Element stehen in Anführungszeichen.
Beispiel eines Arrays mit 6 Elementen. Der Array hat hier den Namen 'InfoBox'.
var InfoBox = new Array();
InfoBox[0] = "nicht benutzt";
InfoBox[1] = "Text für Array-Element mit dem Index 1";
InfoBox[2] = "Text für Array-Element mit dem Index 2";
InfoBox[3] = "Text für Array-Element mit dem Index 3";
InfoBox[4] = "Text für Array-Element mit dem Index 4";
InfoBox[5] = "Text für Array-Element mit dem Index 5";
JavaScript beginnt beim Zählvorgang mit Null. Die einzelnen Elemente des Arrays werden mit der fortlaufenden Nummer angesprochen. Folglich hat das erste Element des Arrays die Nummer 0 (Null), das zweite die Nummer 1 (Eins), das dritte die Nummer 2 (Zwei), ...
Um Ihnen das Leben zu erleichtern benutze ich das Array-Element mit der Nummer 0 nicht. So können Sie beim Abruf der Inhalte ganz normal durchnummerieren und für die Anzeige der Info-Box 1 das Array-Elemet 1 abrufen. JavaScript-Beginner behalten so eine bessere Übersicht.
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.  Info-Box für Index-Nummer 3 anzeigen
<a onMouseOver="BoxAnzeigen(3)"
Bei MouseOver wird die Funktion 'BoxAnzeigen()' aufgerufen. Innerhalb der Klammern steht die Index-Nummer des Array-Elements. Hier ist das die Nummer 3 was bedeutet, dass der Inhalt der "Schublade" mit der Nummer 3 angezeigt werden soll.
Verbal ausgedrückt lautet diese Anweisung:
"... bei MouseOver rufe die Funktion zur Anzeige der Info-Box auf und zeige innerhalb der Info-Box das an, was im Array 'InfoBox' für die Index-Nummer 3 eingetragen wurde."
Funktionen zum Ein- und Ausblenden der Box
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 notiert Bei MouseOver wird die Funktion zur Anzeige, bei MouseOut die Funktion zum Ausblenden aufgerufen.
In den üblichen Link ...
<a href="#"> Textlink </a>
... werden die hier rot markierten Erweiterungen eingetragen.
<a href="#" onMouseOver="BoxAnzeigen(4)" onMouseOut="BoxAusblenden()">
Textlink </a>
Wenn es Probleme gibt:
Sollte die Infobox in ihrem Browser nicht korrekt arbeiten nachdem sie das Script mit ihrem Editor in ein HTML-Dokument eingefügt haben
a überprüfen Sie die paarweise zu benutzenden Anführungszeichen
b überprüfen sie die DOCTYPE-Angabe für ihre Seite!
Einige Editoren ändern den Dokument-Type ohne Nachfrage.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
Formatierung, HTML-Tags + Grafiken innerhalb der Info-Box
HTML-Tags oder CSS-Anweisungen können eingesetzt werden. Das bedeutet das in der InfoBox neben Textformatierungen auch Grafiken oder Links eingetragen werden können!
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 steht am Beginn, das zweite am Ende jeden Eintrags.
var InfoBox = new Array();
InfoBox[0] = 'nicht benutzt';
InfoBox[1] = 'Text für Box 1';
InfoBox[2] = 'Text für Box 2';
InfoBox[3] = 'Text für Box 3';
InfoBox[4] = 'Text für Box 4';
InfoBox[5] = 'Text für Box 5';
 Anführungszeichen werden paarweise benutzt!
Als Anführungszeichen die jedes Array-Element einschließen, habe ich einstrichige Anführungszeichen (Hochkommas) eingesetzt. Das soll Ihnen die Arbeit erleichtern wenn Sie zusätzlich HTML-Tags oder CSS-Anweisungen eintragen möchten. Solche Anweisungen werden ja normalerweise mit normalen (doppelstrichigen) Anführungszeichen notiert.
Wäre ich bei den doppelstrichigen Anführungszeichen geblieben, würde das erste doppelstrichige Anführungszeichen in einem HTML-Tag oder einer CSS-Anweisung das Elemet abschließen.
Zur Anschauung habe ich die simple Notierung der Inhalte, die nur aus reinem Text bestehen (oben), nun einmal um HTML-Tags und CSS-Anweisungen erweitert.
var InfoBox = new Array();
InfoBox[0] = 'nicht benutzt';
InfoBox[1] = '<span style="color:#0000FF;">Text für Box 1</span>';
InfoBox[2] = 'Text für Box 2';
InfoBox[3] = 'Text für Box 3<br>zweite Zeile';
InfoBox[4] = 'Text für Box 4';
InfoBox[5] = 'Text für Box 5<br><img src="kuh.gif" height="45" width="60">';
Beispiel Zeitverzögerung
Die Info-Box2 wird bei den meisten Browsern während der Zeit eingeblendet, die der Mauszeiger auf dem Link verweilt. Eine Mindestanzeigezeit (und verzögerte Ausblendung) ist im Script mit 2 Sekunden festgelegt. Sie können das Ausblenden aber zusätzlich verzögern indem Sie einen 'Timeout' definieren:
onMouseOut="setTimeout('BoxAusblenden()',5000)"
<a href="#"
onMouseOver="BoxAnzeigen(8)"
onMouseOut="setTimeout('BoxAusblenden()',5000)">
Symbol PDF-Datei + Text
</a>
 Info PDF-Datei
Was benötige ich
Als Inhalt für die InfoBox, der bei MouseOver erscheinen soll, wurde festgelegt:
'Zum Betrachten und Ausdrucken einer PDF-Datei benötigen sie den ArcobatReader, den sie kostenlos herunterladen können.<br><br><img src="pfeil-klein.gif"><a target="_blank" href="http://get.adobe.com/de/reader/">www.adobe.com/de/reader/</a>'
Pseudo-Link
Soll die Info-Box nicht bei einem echten Link (der auf eine Datei verweist) sondern über einem normalen Text oder einr Grafik erscheinen, muss man ein wenig mogeln! Man muss einen Link einbauen, der nirgendwo hin leitet.
Statt des Eintrags für das Verweisziel (http://www.irgendwas.de) tragen sie im href-Attribut des Links ein #-Zeichen (Gatter) als Referenz-Angabe ein.
<a href="#"
onMouseOver="BoxAnzeigen(8)"
onMouseOut="BoxAusblenden()">
Textlink
</a>
Statt des Eintrags für das Verweisziel (http://www.irgendwas.de) tragen sie im href-Attribut des Links ein #-Zeichen (Gatter) als Referenz-Angabe ein.
Ein Klick auf disen Pseudo-Link bewirkt bei einigen Browsern einen Sprung zum Seitenanfang oben. Statt des '#' (Gatter) sollten Sie stattdessen 'javascript:void(0)' eintragen.
<a href="javascript:void(0)"
onMouseOver="BoxAnzeigen(8)"
onMouseOut="BoxAusblenden()">
Textlink
</a>
Möchten Sie bei MouseOver die InfoBox anzeigen lassen, beim Anklicken aber auf eine andere Seite weiterleiten, tragen Sie eine gültige URL ein.
<a target="_blank" href="http://www.rennmaus.net"
onMouseOver="BoxAnzeigen(8)"
onMouseOut="BoxAusblenden()">
Textlink
</a>
<a href="../ordner/dateiname.htm"
onMouseOver="BoxAnzeigen(8)"
onMouseOut="BoxAusblenden()">
Textlink
</a>
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.
Formatierung der Info-Box (Breite)
Ich habe CSS-Styles für die InfoBox2 festgelegt. Hintergrundgrafik und Rahmenfarbe sind aufeinander abgestimmt. Wichtig ist unter Umständen der Eintrag für die Breite der Box (hier 350px). Ändern Sie die Eintragungen nach belieben.
Die Hintergrundgrafik (im Download enthalten) habe ich bearbeitet, stammt im Original aus WikimediaCommons (User:ViperSnake151) und hat eine GNU General Public License.
<style type="text/css">
<!--
#InfoBox2 {
background:url(bg01-info.gif) #FFFFFF bottom right no-repeat;
width:350px;
padding:10px;
margin:0px;
border:5px solid #D0DCEB;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:12px;
line-height:130%;
color:#5F5F5F;
}
-->
</style>
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
 InfoBox 01 - PopUp bei MouseOver
InfoBox 02 - Demo 01 - Formatierung der Box
InfoBox 02 - Demo 02 - Formatierung der Box
InfoBox 02 - Demo 03 - PopUp über Image-Map
Weitere Möglichkeiten der Positionierung
Die Basisversion des Scripts für die InfoBox 02 wurde am 04.07.2010 völlig überarbeitet! Die unten aufgeführten Varianten entsprechen noch dem alten Stand. Überarbeitung steht an!
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
|
|
|
Home • Verweise • DHTML • Info-Box 02
Bsp 01
Download
Positionierung