Websiteentwicklung: CSS: Praxis

Aus Wikibooks

In diesem Kapitel möchten wir einige praxisbezogene Lösungswege aufzeigen, bei denen man sich gerne die Zähne ausbeisst.

[Bearbeiten] Rollover mit Hintergrundbild

Angenommen, Sie möchten einem Element ein anderes Hintergrundbild zuordnen, sobald der Mauscursor darüber fährt. Das könnte man beispielsweise so lösen:

HTML:

<a class="sample" href="#">Sample</a>

CSS:

.sample, .sample:link, .sample:visited {
  background-image:     url(image1.gif);
  color:                white;
}
.sample:hover {
  background-image:     url(image2.gif);
  color:                yellow;
}

Soweit ist dies noch ganz einfach: Zwei separate Bilder definieren, eines für den Standard und eines für den Hover-Effekt.

Nun werden Sie aber zwei Probleme feststellen:

1. Das Hover-Bild wird erst geladen, wenn man mit dem Mauscursor erstmals darüber fährt. Folglich kann es nicht schnell genug angezeigt werden.
2. Das Hover-Bild wird danach im Browser-Cache gehalten und stets wiederverwendet, selbst wenn Sie ein neues Bild auf dem Server abgestellt haben. Insbesondere bei IE hilft selbst ein Reload nicht. Der IE wird erst das neue Bild nehmen, wenn es sich nicht mehr in seinem Browser-Cache befindet.

Diese beiden Probleme lösen Sie nur, indem Sie für die Standard- und die Hover-Anzeige das gleiche Bild aber mit unterschiedlichem Ausschnitt verwenden.

.sample, .sample:link, .sample:visited {
  background-image:     url(image.gif);
  background-position:  0% 0%;
}
.sample:hover {
  background-image:     url(image.gif);
  background-position:  0% 50%;
}

Hier wird beim Hover-Effekt das Bild ab der unteren Hälfte angezeigt. Es gilt jedoch zu beachten, dass die Höhe des Elements nicht 50% der Bildhöhe übersteigt.

[Bearbeiten] Box ein- und ausblenden

Nehmen wir an, Sie möchten Textkasten durch Klick auf dessen Titelleiste ein- bzw. ausblenden. Hier kommen Sie nicht um etwas Javascript herum:

Im Head-Bereich der HTML-Datei:

<script type="text/javascript">
  function boxDisplay(view) {
    if(view == "open") {
      document.getElementById("boxView").style.display = "block";
      document.getElementById("boxHide").style.display = "none";
    } else {
      document.getElementById("boxHide").style.display = "block";
      document.getElementById("boxView").style.display = "none";
    }
  }
</script>

Die Funktion boxDisplay macht ein Element mit der ID boxView sichtbar, wenn ihm der Wert "open" übergeben wird. Bekommt es einen anderen Wert, wird stattdessen das Element mit der ID boxHide sichtbar.

Im Body-Bereich der HTML-Datei:

<div id="boxView">
  <h3>Testbox <a href="#" onClick="boxDisplay('close')">[-]</a></h3>
  <p>Lorem ipsum....</p>
</div>
<div id="boxHide">
  <h3>Testbox <a href="#" onClick="boxDisplay('open')">[+]</a></h3>
</div>

Wir haben also zwei Boxen. Jene mit der ID boxView besteht aus einer Titelzeile und einem Content. Jene mit der ID boxHide besteht nur aus einer Titelzeile. Klickt man auf das [-] bei der Box boxView wird im genannten Script die Funktion boxDisplay mit dem Wert "close" ausgeführt.

In der CSS-Datei:

#boxView {
  display:  block;
}
#boxHide {
  display:  none;
}

Hier werden die Initialwerte gesetzt. Da bei der Box boxHide display auf none steht, wird die Box nicht angezeigt.