PopUp-InfoBox 01
 HomeVerweiseDHTML • 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.

dhtml pu-up-box infobox einblenden mouseover layer

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: Bei langen Texten plus HTML-Tags für Grafiken wird die Befehlszeile recht lang. Da die Infobox 01 ohne zusätzliche Zeitverzögerung für das Ausblenden sofort ausgeblendet wird sobald Sie den verweissensitiven Bereich verlassen, macht es hier keinen Sinn innerhalb der Info-Box Links zu platzieren  Demo (mehr Info unten). Natürlich kann der verweissensitive Bereich selbst als Link dienen, wie ich es für das PDF-Symbol unten umgesetzt habe.


 Box anzeigen

 Box anzeigen






AcrobatReader


Möglichkeiten + Einsatzbereiche

  1. Verwendung zur Anzeige von Informationen und Hinweisen
  2. Anzeigeort der Box relativ zur Mauszeigerposition
  3. individuelle Positionierung durch Angaben von Offsetwerten
  4. Anzeige von Grafiken bei Maskierung von Anführungszeichen möglich
  5. 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 (sihe 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


1  Script und Styles im Head-Bereich Ihrer Seite notieren

(siehe Quellcode-Datei)


2  <div>-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. Beim späteren MouseOver schaltet das Script den Wert auf 'visible' und die Box wird sichtbar. 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 -->
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.

Die beiden Funktionen heißen 'InfoBoxAnzeigen()' und 'InfoBoxAusblenden()'. Beim Aufruf der Funktion 'InfoBoxAnzeigen()' werden 4 Parameter übergeben:
onMouseOver="InfoBoxAnzeigen(event,'Text',Offset-X,Offset-Y);"
onMouseOver="InfoBoxAnzeigen(event,'Hier steht Text',20,-30);"

Beispiel PopUp-Box an einem Link:

Wenn die InfoBox eine kurze Vorab-Info an einem Link einblenden soll, wird der Link zunächst wie üblich notiert. Die URL für das Verweisziel wird ganz normal eingetragen. Zusätzlich wird im <a>-Tag die Überwachung der Maus-Aktionen (onMouseOver, onMouseOut) mit dem Aufruf der Funktionen eingetragen.
<a onMouseOver="xxxxx" onMouseOut="xxxxx" ... > Verweistext </a>
<a
onMouseOver="InfoBoxAnzeigen(event,'Hier steht Text',20,-30);"
onMouseOut="InfoBoxAusblenden();"
href="javascript:void(0)">
Verweistext
</a>
Die Anweisung (Quelltext oben) resultiert in: Verweistext

Weitere Beispiele zum Aufruf der PopUp-Box, zur Übergabe der Parameter und dem Enblenden der Box an einer Grafik finden Sie weiter unten!

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






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).



Einblenden Parameter CSS Box CSS Inhalte Zeitverzögerung





   PopUp-Box einblenden - Beispiele für den Einsatz


a  InfoBox an einem Text-Link

Beispiel: Webseite der KGS Würm

Wenn die InfoBox eine kurze Vorab-Info 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

1  Demo   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


2  Demo   Änderung: Text + Zeilenumbruch
<a
onMouseOver="InfoBoxAnzeigen(event,'Hier steht ein anderer Text<br> ...',20,-30);"
onMouseOut="InfoBoxAusblenden();"
href="javascript:void(0)">
MouseOver für mehr Info
</a>
Das Resultat dieser Notierung ist:   MouseOver für mehr Info


3  Demo   Änderung: relative Positionsangaben
<a
onMouseOver="InfoBoxAnzeigen(event,'Hier steht Text',-200,-100);"
onMouseOut="InfoBoxAusblenden();"
href="javascript:void(0)">
MouseOver für mehr Info
</a>
Das Resultat dieser Notierung ist:   MouseOver für mehr Info


4  Demo   Änderung: Textformatierung
<a
onMouseOver="InfoBoxAnzeigen(event,'<h4>Überschrift</h4>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




   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




   Inhalte formatieren HTML-Tags + CSS

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:
  1. Statt Anführungszeichen Hochkommas verwenden
  2. 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\'>



Möchten Sie Grafiken, HTML-Tags oder CSS-Formatierungen für die Inhalte 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.

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

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



   Beispiel Zeitverzögerung

Die Info-Box1 wird bei den meisten Browsern während der Zeit eingeblendet, die der Mauszeiger auf dem Link verweilt. Eine Mindestanzeigezeit (und verzögerte Ausblendung) ist in meinem Modul nicht festgelegt. Sie können das Ausblenden aber verzögern indem Sie einen 'Timeout' definieren:
onMouseOut="setTimeout('InfoBoxAusblenden()',5000)"
<a href="javascript:void(0)"
onMouseOver="InfoBoxAnzeigen(event,'Hier steht Text',20,-30);"
onMouseOut="setTimeout('InfoBoxAusblenden()',5000)">
Symbol PDF-Datei + Text
</a>

PopUp-Box anzeigen - verzögert ausblenden

Als Inhalt für die InfoBox, der bei MouseOver erscheinen soll, wurde festgelegt:

'<b>Infobox 01</b><br><br>Anzeige einer Box bei MouseOver neben dem Mauszeiger. Sie haben den Mauszeiger über den Textlink bewegt. Die Box wird zeitverzögert ausgeblendet (nach 5 Sekunden) nachdem Sie den Mauszeiger von Link wegbewegt haben.'




   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







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