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

So funktioniert mein DHTML-Info-PopUp:  Box anzeigen

Ich definiere einen Div-Bereich für eine AnzeigeBox, den ich zunächst auf 'unsichtbar' schalte (visibility:hidden;). Die Box existiert, wird aber erst einmal nicht angezeigt. Diese Box möchte ich später einblenden und schalte bei der Gelegenheit die Eigenschaft der Box auf 'sichtbar' (visibility = "visible"). Wann das sein wird bestimme ich über EventHandler (onMouseover, onClick, ...) . Wo das sein wird lege ich dadurch fest, wo ich die Funktion zum 'Sichtbarschalten' aufrufe (z.B. an einem Link, an einer Grafik). Wo genau die Box positioniert werden soll lasse ich über ein Script ermitteln, das die augenblickliche Position des Mauszeigers berücksichtigt. Ich kann dabei einen Offset / einen Versatz bestimmen.

Und nun das Vorteilhafte an diesem Modul: Was in der Box angezeigt werden soll bestimme ich beim Aufruf jedesmal neu, indem ich der Funktion zum Einblenden der Div-Box die Inhalte als Parameter übergebe. So kann ich das Modul innerhalb einer Seite mehrmals, mit immer anderen Inhalten, einsetzen.


   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.

 Box anzeigen

 Box anzeigen






AcrobatReader


Nachteil gegenüber der InfoBox 02: Bei langen Texten plus HTML-Tags für Grafiken wird die Befehlszeile recht lang. Da die Infobox 01 sofort ausgeblendet wird sobald Sie den verweissensitiven Bereich verlassen, macht es erst einmal 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. Wie Sie eine zeitverzögerte Ausblendung einrichten, damit eventuelle Links geklickt werden können, erkläre ich weiter unten.


Möglichkeiten + Einsatzbereiche

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 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
  1. JavaScript im Head-Bereich notieren
  2. CSS-Angaben im Head-Bereich notieren
  3. DIV-Bereich im Body definieren
  4. Funktionsaufruf an einem Objekt (Link, Grafik, ...) eintragen

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



4)  Funktionsaufruf an einem Link oder Objekt

An einem Objekt (Link, Grafik, Div-berich ...) wird eine MouseOver- und MouseOut-Überwachung eingebaut! Bei MouseOver wird die Funktion zur Anzeige, bei MouseOut die Funktion zum Ausblenden aufgerufen.

Für den Einsatz der InfoBox werden die HTML-Tags zunächst wie üblich notiert. Bei einem Verweis wird die URL für das Verweisziel eingetragen.
<a href="datei.htm">Linktext</a>
<img src="infobox-04-demo.gif" width="120" height="100" border="0" alt="">
<div>Text Text Text Text</div>
Dann wrden zusätzliche EventHandler zur Überwachung der Maus-Aktionen (onMouseOver, onMouseOut) mit dem Aufruf der Funktionen notiert.
.. onMouseOver="xxxxx" onMouseOut="xxxxx" ...
<a onMouseOver="xxxxx" onMouseOut="xxxxx" ...
<img  onMouseOver="xxxxx" onMouseOut="xxxxx" ...
<div onMouseOver="xxxxx" onMouseOut="xxxxx" ...
Für XXX werden die Funktionsaufrufe eingetragen
onMouseOver="InfoBoxAnzeigen(event,'Hier steht Text',20,-30);"
onMouseOut="InfoBoxAusblenden();"
Die Anweisung oben resultiert in: Bewegen Sie den Mauszeiger über diesen Text

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

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 wären z.B. 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.
<a
href="http://kgs-wuerm.de">
Webseite der KGS Würm
</a>
Dann werden in das HTML-Tag des Links Attribute für die Eventhandler zur Überwachung der Maus-Aktionen (onMouseOver, onMouseOut) mit dem Aufruf der Funktionen eingetragen.
<a
onMouseOver="InfoBoxAnzeigen(event,'Hier steht der Inhalt der Box',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 (sichtbares).

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.





Das könnte Sie auch interessieren: