 InfoBox 02 - Demo 04 (Grafikanzeige)
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.
|
|
Grafiken mit der InfoBox 02 anzeigen
Erklärungen zur InfoBox 02 finden Sie auf der Seite  Info-Box 02
Demo zur Anzeige von Grafiken mit der InfoBox 02. Die CSS-Anweisungen für die Box wurden so angepasst, dass die Box mit einem dünnen Rand und einer Breite von 500 Pixel angezeigt wird. So eignet sich die Box zur DHTML-Anzeige von Grafiken oder Fotos. Hier wird also kein PopUp-Window benötigt um die Großansicht für eine Fotoshow anzuzeigen.
1 Demo - Hinweis auf eine Browserfunktion
2 Demo - Anzeige einer Großansicht
|
Praxisorientiertes Beispiel für Ihre Seite. Während Sie eine Vorschau Ihrer Grafiken im Kleinformat anzeigen, wird bei MousOver die Großansicht eingeblendet.
Vorteil dieser Technik: Es wird kein PopUp-Window geöffnet. Die Anzeige einer Großansicht ist also auch bei einem aktiven PopUp-Blocker möglich.
Bei der InfoBox 02 müssen allerdings sämtliche Image-Tags der Großansichten in einem Array im Head-Bereich der Seite abgelegt werden. Eine Auslagerung in eine externe JS-datei ist natürlich möglich.
|
 Demo 02 Info-Box HTML-Datei 
Demo 02 ZIP-Datei herunterladen 
|
CSS-Anweisungen
Durch wenige Modifizierungen der CSS-Anweisungen können Sie die Basisversion der InfoBox 02 Demo 04 anpassen: Breite, Randformatierung
<style type="text/css">
<!--
/* Styles für die InfoBox2 */
#InfoBox2 {
position:absolute;
visibility:visible;
left:-1000px;
top:-2000px;
z-index:+2;
background:url(bg01-info.gif) #ECF5FE bottom right no-repeat;
width:500px;
padding:0px 0px 0px 0px;
margin:0px;
border:5px solid #3F3F3F;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:11px;
line-height:130%;
color:#5F5F5F;
}
-->
</style>
Die vollständigen Image-Tags der Grafiken für die Anzeige innerhalb der Info-Box werden in einem Array abgelegt. Die Array-Elemente sind durchnummeriert.
InfoBox2Inhalt = new Array();
InfoBox2Inhalt[0] = 'nicht benutzt';
InfoBox2Inhalt[1] = '<img src="grafik1.jpg" width="500" height="338" border="0" alt="">';
InfoBox2Inhalt[2] = '<img src="grafik2.jpg" width="500" height="375" border="0" alt="">';
InfoBox2Inhalt[3] = '<img src="grafik2.jpg" width="500" height="375" border="0" alt="">';
Die Nummer des Array-Elements wird der Funktion 'Box2Anzeigen()' zur Anzeige der Infobox als Parameter übergeben. Link mit den beiden Eventhändlern (onMouseOver / onMouseOut) und den eingetragenen Funktionsaufrufen Box2Anzeigen() + Box2Ausblenden().
Bei MauseOver rufe die Funktion Box2Anzeigen(x) auf (mit Parameterübergabe).
Bei MauseOut rufe die Funktion Box2Ausblenden() auf.
Link im Body-Bereich:
<a href="javascript:void(0)"
onMouseOver="Box2Anzeigen(2)"
onMouseOut="Box2Ausblenden()">
hier steht die Vorschaugrafik
</a>
Positionierung
Hier wird die InfoBox relativ zur Position des Mauszeigers eingeblendet. Eine Versatz wurde eintragen um den Abstand zu bestimmen. Zwei Werte (je einen für die X- und Y-Position) wurden notiert.
// Versatz für X / Y Position eintragen
var Xpos = 50;
var Ypos = -150;
Mit diesen Werten erreiche ich einen Versatz von 150 Pixeln oberhalb und 50 Pixel nach rechts.
Für eine Anzeige links vom Mauszeiger müsste der Eintrag (Bei einer Boxbreite von 500 Pixel) in etwa so aussehen:
// Versatz für X / Y Position eintragen
var Xpos = -550;
var Ypos = -150;
InfoBox 01 - PopUp bei MouseOver
InfoBox 02 - Basisversion und Erklärungen
InfoBox 02 - Demo 01 - Formatierung der Box
InfoBox 02 - Demo 03 - PopUp über einer Image-Map (verweissensitive Grafik)
InfoBox 02 - Demo 03 - PopUp über Image-Map
| 
Home • Verweise • DHTML • Info-Box 02
