Info-Box 01 - Variante C  (Box-Formatierung - Hintergrundgrafik)

Bei MouseOver wird eine InfoBox eingeblendet, die bei MouseOut wieder ausgeblendet wird. Einsetzbar für Hinweise, Erklärungen, Bildinformationen, Querverweise, ...

Hier handelt es sich lediglich um eine Erweiterung des Beispiels InfoBox 01. Ich zeige an mehreren Varianten, wie Sie die angezeigte Box formatieren und so Ihrem Seitenlayout anpassen können. Ich verwende unterschiedliche CSS-Anweisungen oder (zweifarbige) Hintergrundgrafiken.    Demo Variante C

1  Variante C, Formatierung für die Box Variante mit Hintergrundgrafik. Der Boxinhalt wird vor einer Hintergrundgrafik von 250 Pixel Breite angezeigt. Eine Anpassung durch den Einsatz einen anderen Hintergrundgrafik und Textformatierungen sollte kein Problem sein.

Grafik Ausschnitt:

Box anzeigen  Box anzeigen

Der Pfeil an der Box soll zum Mauszeiger weisen. Ein entsprechender Offset für die Positionierung (relativ zum Mauszeiger) muss eingetragen werden Werte für den Offset deshalb: -10,5 -10 Pixel für Position rechts 5 Pixel für Position oben

<style type="text/css">
<!--

#InfoBox {
visibility: hidden;
position: absolute;
top: 10px;
left: 10px;
z-index: 1;

/* diese Angaben können Sie anpassen */
width: 250px;
background: url(bg-infobox-04.gif);
border-bottom: 1px solid #000000;
}


/* weitere Box in der Info-Box für padding */
#BoxInnen {
padding: 30px 15px 15px 15px;
}


/* Formatierung Texte in der Info-Box */

#BoxInhalte {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 11px;
color: #3F3F3F;
line-height: 130%;
}

#BoxInhalte b{
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 11px;
color: #0070C0;
line-height: 130%;
}

#BoxInhalte h1 {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 13px;
font-weight:bold;
color: #000000;
text-transform: none;
line-height: 100.01%;
margin-top: 6px;
margin-bottom: 20px;
}

-->
</style>