Archiv für den Monat: August 2009

Bildbeschreibung über Bild anzeigen

Mit einem einfachen Aufbau kann ein netter Mouse-Over Effekt erzeugt werden. Dabei werden zwei Elemente definiert, die dann die gleiche Grösse erhalten und das zweite Element vorerst nicht sichtbar ist.

Der HTML-Code:

<div class="switch">
  <div class="nomouse"><img src="head.jpg" alt="Head"/></div>
  <div class="mouse">It's a head.</div>
</div>

Das CSS:

div.switch div
{
  display: block;
  float: left;
}
div.switch
{
  position: relative;
}
div.switch div
{
  width: 150px;
  height: 120px;
}
div.switch div.mouse
{
  width: 130px;
  height: 100px;
  display: none;
  position: absolute;
  text-align: center;
  padding: 10px;
  background-image: url(halfwhite.gif);
}

Und das alles entscheidende Style Sheet:

div.switch:hover div.mouse
{
  display: block;
}

Dadurch wird der Block mit dem Text sichtbar gemacht. Zur besseren Sichtbarkeit wird ein halbtransparentes/halbweisses Hintergrundbild verwendet.

Die Dateien können hier heruntergeladen werden:
HTML File switchingblock.html
Grafik head.jpg
Grafik halfwhite.gif