 Info-Box 02 - Demo 03 (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.
|
|
InfoBox 02 - PopUp über einer Image-Map
 Erklärungen zur InfoBox 02
Grundlagen zu Image-Maps
Bisher wurde das PopUp der InfoBox 02 über Textverweisen oder Grafiken eingesetzt. Dieses Beispiel zur Info-Box 02 zeigt die Verwendung in Verbindung mit einer Image-Map. Die PopUp-Box soll über 'Hot-Spots' einer verweissensitiven Grafik angezeigt werden. Screenshot:
Ziel der Anpassungen im Demo 03
Die Info-Boxen sollen nicht über einem Textverweis, sondern über einen Hot-Spot einer Grafik (Image-Map) angezeigt werden. Die Texte innerhalb der Box sollen mit CSS-Anweisungen formatiert 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 Grafiklink (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. Statt des üblichen HTML-Codes für einen Link (a) sind ja bereits Notierungen für die Hot-Spots eingetragen.
|
Beispiel für den violetten rechteckigen Bereich:
In den Verweisen für die Hot-Spots der Map werden nun im href-Attribut (statt der URL) Gatterzeichen (#) eingetragen.
<area shape="rect" coords="12,12,85,53" href="#" alt="Rechteck">
Nun fehlen nur noch die Notierungen für die beiden auslösenden Eventhandler mit den Funktionsaufrufen
onMouseOver="BoxAnzeigen(x)"
onMouseOut="BoxAusblenden()"
<area shape="rect" coords="12,12,85,53" href="#"
onMouseOver="BoxAnzeigen(x)" onMouseOut="BoxAusblenden()" alt="Rechteck">;
Nun sollte beim 'Überfahren' des Rechtecks die PopUp-Box erscheinen. Beim Verlassen des Hot-Spots sollte die Box wieder ausgeblendet werden.
Auch wenn eine Datei nicht aufgerufen werden soll muss das 'href' notiert sein, damit die Map funktioniert. An Stelle des Dateinamens wird dann normalerweise ein '#' eingetragen. Weil das beim Klicken in manchen Browsern zu Sprüngen innerhalb der Seite führen kann, setze ich stattdessen 'javascript:void(0)' ein.
<area shape="rect" coords="12,12,85,53" href="javascript:void(0)"
onMouseOver="BoxAnzeigen(x)" onMouseOut="BoxAusblenden()" alt="Rechteck">;
Breite der Info-Box
Die Breite der Box ist neben den anderen Foprmatierungsanweisungen im CSS-Block festgelegt
#InfoBox2 {
background-color:#FFFFFF;
width:320px;
padding:10px;
margin:0px;
border:1px solid #000000;
font-family:Arial,Helvetica,sans-serif;
font-size:11px;
line-height:130%;
color:#5F5F5F;
}
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 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 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.
InfoBox 01 - PopUp bei MouseOver
InfoBox 02 - Basisversion und Erklärungen
InfoBox 02 - Demo 01 - Formatierung der Box
InfoBox 02 - Demo 02 - Formatierung der Box
|
Home • Verweise • DHTML • Info-Box 02
Beispiel 01
DOWNLOAD
Info Rechteck anzeigen
