 Info-Box 02 - beispiel 02 (mit Image-Map)
Für die Info-Box 02 habe ich separate Beispielseiten ohne weitere Erklärungen erstellt. Im Wesentlichen handelt es sich um Varianten durch benutzerseitige Anpassungen. Erklärungen auf der Seite  Info-Box 02
Dieses Beispiel zur Info-Box 02 zeigt die Verwendung in Verbindung mit einer Image-Map. Über Teilbereichen einer verweissensitiven Grafik soll die Box mit passendem Informationen angezeigt werden.
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">
Ziel der Anpassungen im Beispiel 02
Die Info-Boxen sollen nicht über einem Textverweis, sondern über einen Hot-Spot, dem Teilbereich einer Grafik angezeigt werden. Inhaltstexte sollen mit CSS-Anweisungen formatiert und Grafiken sollen eingebunden werden.
Die Informationen sollen aber über einer verweissensitiven Grafik angezeigt werden!
Beispiel Info-Box für verweissensitive Flächen, Image-Maps
Die InfoBox kann nicht nur bei Text- und Bildverweisen eingesetzt werden, sie eignet sich auch für die Verwendung über verweissensitiven Grafiken.
Alternativ zum Textlink (Text kann angeklickt werden) oder Imagelink (gesamtes Bild kann angklickt werden) bietet sich die Möglichkeit bestimmte Bereiche (hot spots) einer Grafik als Verweisfläche zu deklarieren. Diese verweissensitive Grafik nennt man 'Image-Map'.
|
Links sehen sie eine 150 x 150 Pixel große Grafik. Die drei farbigen Bereiche innerhalb der Grafik wurden als Image-Map-Bereiche deklariert.
Info zu Image-Maps
Soll die Info-Box über der Verweisfläche eines Image-Map-Bereichs erscheinen, ist auch das möglich. Den üblichen HTML-Code müssen sie folgendermaßen modifizieren:
|
Beispiel für den violetten rechteckigen Bereich: Statt der üblichen Notierung ...
<area shape="rect" coords="12,12,85,53" href="datei.htm" alt="Rechteck">
müssen nun zusätzlich die beiden auslösenden Eventhandler mit den Funktionsaufrufen eingetragen werden:
<area shape="rect" coords="12,12,85,53" href="datei.htm"
onMouseOver="popLayer(8)" onMouseOut="hideLayer()" alt="Rechteck">;
Soll beim Anklicken nicht wirklich eine andere HTML-Datei geöffnet werden, sondern die Info-Box nur als Erklärung angezeigt werden, kann man einen Psydo-Link verwenden.
<area shape="rect" coords="12,12,85,53" href="javascript:void(0)"
onMouseOver="popLayer(8)" onMouseOut="hideLayer()" alt="Rechteck">;
Breite der Info-Box
Die Breite der Box habe ich in der DIV-Definition festgelegt
<!-- Anfang DIV-Definition -->
<div id="object1" style="width:350px; position:absolute; ...
Positionierung der Info-Box
Grundsätzlich ist die Positionierung unmittelbar am Link. Meine Erweiterung dieses Beispiels eröffnet ihnen die Möglichkeit eine fixe X-Y-Position zu definieren.
Sie haben hier also die Wahl: Die Position der Info-Box entweder gleich neben dem Link oder immer an der gleichen, festgelegten Position anzeigen zu lassen. Dazu werden im JavaScript die beiden entsprechenden Zeilen für die Positionierung aktiviert / deaktiviert.
A Position an einem festgelegten Punkt
Die X-Y Koordinaten bestimmen den Punkt für die linke obere Ecke der Box.
// Position bei 300 von links, bei 20 von oben
x = 300;
y = 20;
// oder Plazierung neben Mauszeiger
// x = (isNav) ? e.pageX : event.clientX + document.body.scrollLeft;
// y = (isNav) ? e.pageY : event.clientY + document.body.scrollTop;
B Position neben Mauszeiger
// Position bei 300 von links, bei 20 von oben
// x = 300;
// y = 20;
// oder Plazierung neben Mauszeiger
x = (isNav) ? e.pageX : event.clientX + document.body.scrollLeft;
y = (isNav) ? e.pageY : event.clientY + document.body.scrollTop;
Durch 2 vorangestellte Slashes [ // ] wird bei JavaScript eine Zeile zu einem Kommentar. Die Anweisungen in der Zeile werden nicht ausgeführt.
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
|
WWW.WEB-TOOLBOX.NET
QuellCode
ZURÜCK 
Info Rechteck anzeigen