barrierefreies Webdesign Ingo Turski

Bildwechsel mit CSS mal ganz anders

Häufig werden Bildwechsel über JavaScript realisiert, obwohl das - zumindest bei Links - viel besser über CSS zu realisieren ist. Bei der Standardmethode, dem Link eine Hintergrundgrafik zuzuweisen und diese über den Selektor a:hover auszutauschen stellen sich jedoch zwei Probleme:

1. Die neuen Grafiken müssen beim ersten Überfahren mit der Maus erst geladen werden und der Effekt wird durch die Verzögerung vielleicht gar nicht sichtbar.
2. Es gibt keinen Alternativtext für den Fall, daß die Grafik nicht angezeigt wird, wodurch dem Link eine Beschreibung und jegliche Kennzeichnung fehlt.

Ich will auf die Tricks (wie z.B. Positionsänderung statt Austausch und Fahrner Image Replacement), mit denen diese Probleme nur teilweise (ein nach der FIR-Methode ausgeblendeter Linktext ist in CSS-fähigen Browsern nicht sichtbar!) umschifft werden, nicht näher eingehen, denn es geht viel einfacher:

<style type="text/css">
  #wechsel a {
    background: url(selflogo2005.gif) no-repeat;
    display:block; width:106px; /* Linkbereich begrenzen */
  }
  #wechsel img {
    display:block; width:106px; height:109px; border:0;
  }
  #wechsel a:hover img {
    visibility: hidden;
  }
  #wechsel a:hover { /* Workaround fuer IE 5.5 und 6 */
    border:0;
  }
  * html #wechsel a {
    margin-right:1px;
  }
  * html #wechsel a:hover {
    width:107px; margin-right:0; /* Workaround fuer IE 5.01 */
  }
</style>

<p id="wechsel"> <!-- oder z.B. für Menues <ul id="navigation"><li> -->
  <a href="#wechsel"><img src="selflogo.gif" alt="SELFHTML Logo" /></a>
</p>


Die zunächst sichtbare Grafik wird hier ganz normal als <img> in den Link gesetzt und die erst später sichtbare Grafik als Hintergrundgrafik für <a> eingebunden. Damit diese nicht durchscheint, darf die Vordergrundgrafik natürlich nicht (zumindest nicht an anderen Stellen) transparent sein.
Da die Hintergrundgrafik theoretisch sichtbar sein könnte, wird sie von Browser geladen und die Vordergrundgrafik kann ganz normal mit einem Alternativtext versehen werden - die o. g. Probleme sind auf einfachste Weise gelöst.

Beim Überfahren des Links wird nun kein Austausch der Grafiken vorgenommen, sondern lediglich die Vordergrundgrafik unsichtbar definiert, so daß die Hintergrundgrafik sichtbar wird.
Im Internet Explorer erfordert dies zusätzlich die Änderung einer Linkeigenschaft. Für den IE 5.5 und 6 würde bereits ein Wechsel der Hintergrundfarbe, sogar von white auf #fff, oder die hier verwendete (unsinnige) Angabe a:hover {border:0;} ausreichen. Der IE 5.01 benötigt leider eine theoretisch sichtbare Änderung, wie sie oben zusätzlich notiert ist (Ausgleich evtl. auch über background-position:top 1px).

Aber was ist, wenn die Grafiken unterschiedliche Größen haben, z.B. die zunächst sichtbare (Vordergrund-)Grafik nur halb so breit ist und beim Überfahren des Links komplettiert werden soll?

Auch kein Problem. Wir ändern einfach dynamisch die Breite des Links und sparen damit auch den unschönen Workaround für den IE:

#wechsel a, #wechsel img { width:53px; }
#wechsel a:hover { width:106px; }