PopUp-InfoBox 01

Home • Verweise • DHTML • Info-Box 01

BEISPIEL

Demo

Quellcode

Info-Box 01 (Info-Box-Inhalt wird am Link notiert)

Bei MouseOver wird eine InfoBox eingeblendet die bei MouseOut wieder ausgeblendet wird. Einsetzbar für Hinweise, Erklärungen, Bildinformationen, Querverweise, ... . Die Info-Box ist kein PopUp-Window sondern wird als Layer über die Seite gelegt. Größe und Erscheinungsbild kann mit CSS angepasst werden.

Info-Box 01 bei MouseOver - Inhalte werden 'vor Ort' notiert

UPDATE 27.12.2012, Script-Update, CSS-Formatierung und Definition der Box

Demo der Funktion - InfoBox 01

Die Variante Infobox 01 ist in der Anwendung flexibel. Vorteil gegenüber der InfoBox 02: Die Notierung der Inhalte für die anzuzeigende Box werden an Ort und Stelle des Aufrufs (direkt am Link) übergeben. Daher bleibt auch bei einer Mehrfachverwendung dieser Funktion innerhalb eines WEB-Projekts alles recht überschaubar. Nachteil gegenüber der InfoBox 02: Da die Box sofort ausgeblendet wird sobald Sie den verweissensitiven Bereich verlassen, macht es keinen Sinn innerhalb der Info-Box einen oder mehrere Links zu platzieren

Demo. Natürlich kann der Verweissensitive Bereich selbst als Link dienen.

Box anzeigen

AcrobatReader

Möglichkeiten + Einsatzbereiche

Verwendung zur Anzeige von Informationen und Hinweisen
Anzeigeort der Box relativ zur Mauszeigerposition
individuelle Positionierung durch Angaben von Offsetwerten
Anzeige von Grafiken bei Maskierung von Anführungszeichen möglich
Notierung von HTML-Code bei Maskierung von Anführungszeichen möglich

Für die Anzeige von nicht zusätzlich formatierten Texten ohne Grafiken innerhalb der Box bleibt die InfoBox 01 recht einfach im Einsatz. Text-Formatierungen und Einbinden von Grafiken sind allerdings auch möglich (siehe unten). Durch Angabe von Werten für den Offset lässt sich die Box individuell positionieren:

Beispiel Positionierung links vom Mauszeiger:

Box anzeigen

Positionierung rechts vom Mauszeiger:

Box anzeigen

Aufwand für den Webmaster

JavaScript im Head-Bereich notieren
CSS-Angaben im Head-Bereich notieren
DIV-Bereich im Body definieren
Funktionsaufruf an einem Objekt (Link, Grafik, ...) eintragen

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

1 Script im Head-Bereich Ihrer Seite notieren

(siehe Quellcode-Datei)

2 Bereich für die Info-Box notieren

Für die (zunächst ausgeblendete) Info-Box wird ein DIV-Bereich notiert. Durch die Anweisung 'visibility:hidden;' ist die Sichtbarkeit (visibility) auf 'versteckt' (hidden) eingestellt.

Der DIV-Bereich für die Info-Box wird üblicherweise gleich unterhalb des <body>-Tags notiert:

<!-- Anfang DIV für die InfoBox -->

<div id="InfoBox" style="z-index:1; visibility:hidden;">
<div id="BoxInnen"><span id="BoxInhalte"> </span></div>
</div>

<!-- Ende DIV für die InfoBox -->

Die Info-Box ist durch die Angabe 'visibility:hidden' zunächst auf 'unsichtbar / versteckt' geschaltet. Beim späteren MouseOver schaltet das Script den Wert auf 'visible' und die Box wird sichtbar.

Innerhalb der eigentlichen InfoBox sehen Sie zwei weitere Bereiche / Objekte. 'BoxInnen' nutze ich zur Formatierung, 'BoxInhalte' wird vom JavaScript genutzt um Inhalte auszutauschen.

3 Aufruf der Funktion InfoBoxAnzeigen()

An einem Objekt (Link, Grafik, ...) wird eine MouseOver- und MouseOut-Überwachung eingebaut! Bei MouseOver wird die Funktion zur Anzeige, bei MouseOut die Funktion zum Ausblenden aufgerufen. (Bemerkung: Für ältere Browser musste man früher zusätzlich eine ID für die Positionierung der Box eintragen.)

Die beiden Funktionen heißen 'InfoBoxAnzeigen()' und 'InfoBoxAusblenden()'

Beim Aufruf der Funktion 'InfoBoxAnzeigen()' werden 4 Parameter übergeben:

InfoBoxAnzeigen(event,'Text',Offset-X,Offset-Y);"

InfoBoxAnzeigen(event,'Hier steht Text',20,-30);"

Beispiele zur Übergabe der Parameter finden sie weiter unten!

Die InfoBox kann an jedem HTML-Objekt eingesetzt werden. Standard-Einsatzbereiche sind der Einsatz an

einem Link zur Darstellung zusätzlicher Informationen
einem Pseudo-Link z.B. als Worterklärung
einem Download-Link mit Hinweis auf die Dateigröße
einer Grafik, z.B. mit Hinweis auf das Urheberrecht
...

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.

Wenn Sie der angezeigten Box einen anderen Look geben möchten passen Sie die CSS-Formatierungen an oder übernehmen eines meiner 3 Beispiele zur Anpassung (Links zu den Erklärungsseiten im Fußbereich dieser Seite).

CSS-Formatierungen für die Box und deren Inhalte

Mit CSS-Angaben für die InfoBox (#InfoBox) lege ich das generelle Aussehen fest. Dabei beschränke ich mich in diesem Beispiel auf die Breite, Hintergrundfarbe und die Randformatierung.

Die zusätzliche Box innerhalb der InfoBox (#InfoBoxInnen) habe ich definiert wegen der unterschiedlichen Handhabung von 'padding' in den Browsern. Für die Texte in der Info-Box definierte ich nun eine zusätzliche CSS-Formatierung (#BoxInhalte) um Formatierung für Texte zuweisen zu können. Für Überschriften, Absätze, ... könnten Sie weitere Formatierungen festlegen.

Infobox bei Mouseover anzeigen

Die zugehörigen CSS-Notierungn im Head-Bereich:

<style type="text/css">
<!--

#InfoBox {
visibility:hidden;
position:absolute;
top:10px;
left:10px;
z-index:1;

/* diese Angaben können Sie anpassen */
width:300px;
background-color:#FDFEFF;
border:4px solid #0090E0;
}


/* weitere Box in der Info-Box für padding */
#BoxInnen {
padding:15px;
}


/* Formatierung Texte in der Info-Box */

#BoxInhalte {
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:11px;
color:#5F5F5F;
line-height:130%;
}

/* Beispiel h1 Überschrift */
#BoxInhalte h1 {
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:14px;
color:#0090E0;
}

-->
</style>

Ändern Sie die Angaben um die Schriftformatierung anzupassen.

Querverweise:

Ich habe 3 Beispiele zur Formatierung der Box erstellt, die Sie für die InfoBox 01 übernehmen (oder noch einmal anpassen) können.

InfoBox 01 - Variante A zur Formatierung der Box

InfoBox 01 - Variante B zur Formatierung der Box

InfoBox 01 - Variante C zur Formatierung der Box

Beispiele für den Einsatz

a InfoBox an einem Text-Link

Beispiel:

Webseite der KGS Würm

Wenn die InfoBox eine kurze Zusatzinfo an einem Link einblenden soll, wird der Link zunächst wie üblich notiert. Die URL für das Verweisziel wird ganz normal eingetragen.

<a
href="http://kgs-wuerm.de">
Webseite der KGS Würm
</a>

Dann wird in diesen Link die Überwachung der Maus-Aktionen (onMouseOver, onMouseOut) mit dem Aufruf der Funktionen eingetragen.

<a
onMouseOver="InfoBoxAnzeigen(event,'Hier steht Text',20,-30);"
onMouseOut="InfoBoxAusblenden();"
href="http://kgs-wuerm.de">
Webseite der KGS Würm
</a>

b InfoBox an einem Pseudo-Link

Beispiel:

was bedeutet 'Pseudo'?

Wenn die InfoBox lediglich eine kurze Erklärung einblenden soll setze ich einen Link. der nicht wirklich einer ist. Das bedeutet, beim Klicken geschieht nichts.

Erst einmal ein Link, bei dem jede weitere Aktion ausgeschlossen wird. Das erreicht man durch die Notierung eines Gatters (#) oder besser mit der Anweisung 'javascript:void(0)' statt der üblichen URL.

<a
href="javascript:void(0)">
was bedeutet 'Pseudo'?
</a>

Dann wird in diesen Link die Überwachung der Maus-Aktionen (onMouseOver, onMouseOut) mit dem Aufruf der Funktionen eingetragen.

<a
onMouseOver="InfoBoxAnzeigen(event,'Hier steht Text',20,-30);"
onMouseOut="InfoBoxAusblenden();"
href="javascript:void(0)">
was bedeutet 'Pseudo'?
</a>

c InfoBox an einer Grafik

Es ist nicht unbedingt ein Link erforderlich um die InfoBox einsetzen zu können. Die Funktionen für MouseOver und MouseOut können auch an anderen Objekten / Seitenelementen eingetragen werden. Hier ein Beispiel für den Einsatz an einer Grafik:

Erst einmal wird ein 'normales' Image-Tag notiert.

<img src="pdf.gif" width="16" height="16" border="0" alt="">

Dieses Image-Tag wird um die EventHandler 'onMouseOver' und 'onMouseOut' erweitert und als auszuführende Aktionen werden die beiden Funktionsaufrufe eingetragen. Das Resultat dieser Notierung ist eine Grafik mit InfoBox

Demo 01:

Anwendung der InfoBox an einer Grafik (inaktiver Link):

(MouseOver für die Grafik)

<img src="pdf.gif"
onMouseOver="InfoBoxAnzeigen(event,'Symbol PDF-Datei',20,-30);"
onMouseOut="InfoBoxAusblenden();"
href="javascript:void(0)">
width="16" height="16" border="0" alt="">

Demo 02:

Anwendung der InfoBox an einer Grafik (aktiver Link):

Adobe AcrobatReader herunterladen

<img src="pdf.gif"
onMouseOver="InfoBoxAnzeigen(event,'Zum Lesen, Ausdrucken und ...',20,-30);"
onMouseOut="InfoBoxAusblenden();"
href="http://www.adobe.com/de/products/reader/">
width="16" height="16" border="0" alt="">

Beispiele zur Übergabe der Parameter

Demo 01 Standard

<a
onMouseOver="InfoBoxAnzeigen(event,'Hier steht Text',20,-30);"
onMouseOut="InfoBoxAusblenden();"
href="javascript:void(0)">
MouseOver für mehr Info
</a>

Das Resultat dieser Notierung ist:

MouseOver für mehr Info

Demo 02 Änderung: Text

<a
onMouseOver="InfoBoxAnzeigen(event,'Hier steht ein anderer Text',20,-30);"
onMouseOut="InfoBoxAusblenden();"
href="javascript:void(0)">
MouseOver für mehr Info
</a>

Das Resultat dieser Notierung ist:

MouseOver für mehr Info

Demo 03 Änderung: relative Positionsangaben

<a
onMouseOver="InfoBoxAnzeigen(event,'Hier steht Text',-150,-50);"
onMouseOut="InfoBoxAusblenden();"
href="javascript:void(0)">
MouseOver für mehr Info
</a>

Das Resultat dieser Notierung ist:

MouseOver für mehr Info

Demo 04 Änderung: Fettschrift

<a
onMouseOver="InfoBoxAnzeigen(event,'<b>Hier</b> steht Text',20,-30);"
onMouseOut="InfoBoxAusblenden();"
href="javascript:void(0)">
MouseOver für mehr Info
</a>

Das Resultat dieser Notierung ist:

MouseOver für mehr Info

Verwendung von HTML-Tags im Text der InfoBox

Möchten sie Grafiken, HTML-Tags oder CSS-Formatierungen für die Anzeige innerhalb der InfoBox verwenden, gibt es möglicherweise Probleme mit den Anführungszeichen, die bei der Notierung der Attribute dieser zusätzlichen Anweisungen notwendig sind.

Bitte beachten sie, das im Aufruf der Funktion bereits 2 Anführungszeichen-Paare stehen:

1) die auszuführende Aktion bei MouseOver steht bereits in (doppelten) Anführungszeichen
2) der Parameter zur Übergabe des Textes steht bereits in Hochkommas /eitsrichige Anführungszeichen)

onMouseOver="InfoBoxAnzeigen(event,'Hier steht Text',20,-30);"

Das bedeutet, das innerhalb dieses Bereichs keine weiteren Anführungszeichen stehen dürfen. Zusätzliche Anführungszeichen oder Hochkommas (einstrichige Anführungszeichen) würden in der Ausführung der Funktion zu Fehlern führen.

Eine Lösung bietet sich durch 'Maskieren' der zusätzlichen Anführungszeichen an. Dabei wird dem Anführungszeichen ein Backslash (\) vorangestellt. Javascript ignoriert derart maskierte Anführungszeichen und interpretiert sie dann nicht mehr als Codezeichen für sich selbst.

Ich empfehle den Einsatz von Hochkommas (') an Stelle der üblichen Anführungszeichen (")

Beispiel: Der Text soll mit 18 Pixel Textgröße und in blauer Farbe angezeigt werden. Statt

'Hier steht Text'

soll diese Notierung eingetragen werden

'<span style='font-size:18px;color:#0090E0;'>Hier steht Text</span>'

Dann müssen die Hochkommas innerhalb der CSS-Anweisung maskiert werden:

'<span style=\'font-size:18px;color:#0090E0;\'>Hier steht Text</span>'

Der Text in der InfoBox wird nun so angezeigt:

MouseOver zur Anzeige

Mit dieser Technik lassen sich HTML-Tags (z.B. für Grafiken) oder CSS-Anweisungen für den Anzeigebereich implementieren. Sie sind also nicht mehr nur auf simplen Text beschränkt solange sie die Regeln beachten:

Statt Anführungszeichen Hochkommas verwenden
diese zusätzlichen Hochkommas mit einem Backslash maskieren

... ein Beispiel für die HTML-Tags einer Grafik:

<img vspace=\'5\' hspace=\'10\' align=\'left\' src=\'bueroklammer.gif\'>

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, ü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">

Grafiken

Diese selbst hergestellten Grafiken dürfen sie gerne herunterladen und verwenden. Mehr davon gibts in meiner MINI-IMAGE-BOX

10 x 10 Pixel

9 x 9 Pixel

Ich habe 3 Beispiele zur Formatierung der Box erstellt, die Sie für die InfoBox 01 übernehmen (oder noch einmal anpassen) können.

InfoBox 01 - Variante A zur Formatierung der Box

InfoBox 01 - Variante B zur Formatierung der Box

InfoBox 01 - Variante C zur Formatierung der Box

InfoBox 02 - Basisversion und Erklärungen

InfoBox 02 - Demo 01 - Formatierung der Box

InfoBox 02 - Demo 02 - Formatierung der Box

InfoBox 02 - Demo 03 - PopUp über Image-Map