CSS Garden

 

• Startseite
• Kontakt
• Impressum

• Nederlandse Coupons
• Flirt per SMS
• Gratis Lotto spielen
• Win Guide
• Intelligenter Linktausch
• Mit Links Geld verdienen
• Online Poker spielen
• Valid XHTML 1.0

Picture Box

Eine etwas andere Möglichkeit zum Anzeigen von Bilder. Dies ist ein einfaches Beispiel, wie die Eigenschaften 'display:none' und 'display:block' eingesetzt werden können.

Bei 'hover' kann natürlich auch anstelle von einem Bild - wie in diesem Beispiel - Text angezeigt werden.

CSS-Teil

.button
{
background-color: #99CCFF;
width:100px;
margin-bottom: 2px;
}

.button a
{
color:#000066;
border:1px solid black;
display: block;
text-decoration:none;
padding:5px;
}

.button a:hover
{
width:365px;
}

.button a span {display:none;}

.button a:hover span
{
background:#ffffff;
border: 0 none;
display:block;
padding:10px;
}

.button img
{
border: 0 none;
}

HTML-Code

<div class="button">
<a href="#">Sardinien<span><img src="sardinien.jpg"/></span></a>
</div>
<div class="button">
<a href="#">Elba<span><img src="elba.jpg"/></span></a>
</div>
<div class="button">
<a href="#">Korsika<span><img src="korsika.jpg"/></span></a>
</div>

Original Code-Konzept von http://css.fractatulum.net/

 

Zurück