PopUp-InfoBox 01
    
HOME
BEISPIEL  Quellcode ZURÜCK SITEMAP  

 Info-Box 01

Bei MouseOver wird eine InfoBox eingeblendet, die bei MouseOut wieder ausgeblendet wird. Einsetzbar für Links, Bildinformationen, Querverweise, ...

 05.01.2008, Erklärungen noch einmal überarbeiet

Demo:  MouseOver zur Anzeige

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 einer Seite alles recht überschaubar.

Lassen sie sich von den langen Erklärungen hier nicht abschrecken und kopieren für einen ersten Versuch einfach den Code der Textdatei in ihre Seite. Falls sie dann die Funktion der InfoBox erweitern möchten, lesen sie den betreffenen Abschnitt.


   Möglichkeiten

  1. Verwendung zur Anzeige von Infotexten
  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 und ohne Grafiken innerhalb der Box bleibt diese InfoBox 01 aber recht einfach im Einsatz! MouseOver für mehr Info


   Aufwand

  • Script im Head-Bereich notieren
  • DIV-Bereich im Body definieren
  • Aufruf an einem Objekt (Link, Grafik, ...) eintragen



   Aufruf der Funktion

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. Das Objekt erhält zusätzlich eine ID. Die ID ist für die Positionierung der Box in einigen Browsern notwendig.

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




   3 Beispiele für den Einsatz

1) 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. Zusätzlich erhält der Link erhält die ID 'infobox'.

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


2) 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. Der Link erhält die ID 'infobox'.

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



3) InfoBox an einer Grafik

Erst einmal ein Image-Tag. Das Tag erhält die ID 'infobox'.

<img id="infobox" 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.

<img id="infobox" src="pdf.gif"
onMouseOver="InfoBoxAnzeigen(event,'Symbol PDF-Datei',20,-30);"
onMouseOut="InfoBoxAusblenden();"
href="javascript:void(0)">
width="16" height="16" border="0" alt="">
Das Resultat dieser Notierung ist eine Grafik mit InfoBox:  (MouseOver)


Eine Demo zur Anwendung einer InfoBox (Grafik und aktiver Link):

 Adobe AcrobatReader herunterladen




   Beispiele zur Übergabe der Parameter

Demo 01   Standard
<a id="infobox"
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 id="infobox"
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 id="infobox"
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 id="infobox"
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 Anführungszeichen
2) das Parameter zur Übergabe des Textes steht bereits in Hochkommas 
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:#0D0DFF;'>Hier steht Text</span>'
Dann müssen die Hochkommas maskiert werden:

'<span style=\'font-size:18px;color:#0D0DFF;\'>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. Hochkommas maskieren mit einem Backslash
... und noch ein Beispiel für eine Grafik:

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



   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







NACH OBEN