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