 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 Links, Bildinformationen, Querverweise, ...
 05.01.2008, Erklärungen noch einmal überarbeiet
Wenn es Probleme gibt:
Sollte die Infobox im FireFox 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!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
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
- Verwendung zur Anzeige von Infotexten
- 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 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:
- Statt Anführungszeichen Hochkommas verwenden
- 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
|
HOME
BEISPIEL 
ZURÜCK