 InfoBox 02 - Demo 02 (Formatierung)
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.
|
|
Formatierung der Box mit CSS - simple Darstellung
Erklärungen zur InfoBox 02 finden Sie auf der Seite  Info-Box 02
Demo zur Formatierung der InfoBox 02. Die CSS-Anweisungen für die Box sollen so angepasst werden, dass die Box mit einem dünnen Rand, einer Breite von 350 Pixel mit schwarzem Text auf weißem Hintergrund angezeigt wird.
CSS-Anweisungen simple Darstellung
Durch wenige Modifizierungen der CSS-Anweisungen können Sie die Basisversion der InfoBox 02 anpassen. Ich zeige hier eine simple Formatierung.
<style type="text/css">
<!--
#InfoBox2 {
background-color:#FFFFFF;
width:350px;
padding:10px;
margin:0px;
border:1px solid #000000;
font-family:Arial,Helvetica,sans-serif;
font-size:11px;
line-height:130%;
color:#5F5F5F;
}
#InfoBox2 a:link a:visited {
font-size:11px;
font-weight:normal;
text-decoration:none;
color: #0090E0;
}
#InfoBox2 a:hover {
color:#FF007F;
text-decoration:none;
}
-->
</style>
Innerhalb der InfoBox verwende ich die HTML-Tags für Links (a). Um eine angepasste Darstellung zu erreichen, wurde für dieses Format ebenfalls CSS-Anweisungen notiert. Alle anderen Textformatierungen wurden mit Inline-Anweisungen eingetragen.
Textlink für Box 01
InfoBox[1] = '<span style="color:#FF007F">Inhalte für PopUpBox 01</span>
<br><br>
<img hspace="30" align="left" src="ani-elefant.gif"
width="89" height="73" border="0" alt="">
<span style="color:#9999FF;font-size:18px;">Elefanten</span>
<br><br>
Elefanten sind die größten noch lebenden Landtiere.
Bei der Geburt wiegt ein Kalb bis zu 100 Kilogramm.
Die Tragzeit ist mit 20 bis 22 Monaten die längste aller Landsäugetiere.
Der älteste Elefant lebte im Zoo von Taipeh und wurde 86 Jahre alt.
Je nach Art kann ein Elefant im Durchschnitt zwischen zwei
und fünf Tonnen Körpergewicht und eine Größe von bis zu vier Metern erreichen.
<br><br>
<img src="pfeil-klein.gif">
<a target="_blank" href="http://de.wikipedia.org/wiki/Elefanten">
Wikipedia Elefanten</a>
<br><br>';
(Nur zur Demo, Anweisungen werden normalerweise ohne Zeilenunbruch eingetragen)
Hintergrundfarbe
Passen Sie den Wert für die Hintergrundfarbe '#FFFFFF' an, indem Sie einen abweichenden Wert eintragen. '#FFFFFF' entspricht dem Farbwert für Weiß.
#InfoBox2 {
background-color:#FFFFFF;
...
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
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
DOWNLOAD
Beispiel 01
