Bild Wechsel per CSS

Mit CSS gibt es eine praktische Lösung zur Umsetzung eines Bildwechsels. Natürlich wäre ein Bildwechsel auch mit Java Sript möglich, was aber wiederrum den Nachteil hat, dass nicht jeder Java Script akzeptiert.

l-design.at
Mit der Maus darüber fahren und testen

Bei der Standardmethode mit a:hover hat man den Nachteil, dass Bilder immer erst geladen werden sobald man mit der Maus darüber fährt. Dadurch kann es natürlich zu einer kleinen Verzögerung kommen - was sehr unschön aussieht.
Weiters fehlt dem durch a:hover eingeblendeten Bild auch der Alternativtext und somit fehlt dem Bild jegliche Beschreibung.

Mit folgender Methode umgeht man diese "Probleme":

 


// CSS Code
#bildwechsel a {
  background-image: url(l-design-hover.jpg);
  background-repeat: no-repeat;
  display: block;
  width: 246px;
  height: 70px;
}
#bildwechsel img {
  display: block;
  width: 246px;
  height: 70px;
  border: 0;
}
#bildwechsel a:hover img {
  visibility: hidden;
}

//HTML Code
<div id="bildwechsel">
  <a href="#"><img src="/l-design.jpg" alt="l-design.at" /></a>
</div>


Das Hauptbild wird also als background des Tags a definiert und einfach vom Bild des img Tags verdeckt. Dadurch lädt der Browser gleich beide Bilder beim Aufbau der Seite und Verzögerungen sind dadurch nicht möglich. Wichtig ist natürlich, dass das darüber liegende Bild des img Tags keine transparenten Flächen enthält, da ansonsten das Hintergrundbild von Anfang an durchscheint.
{googleAds}
<script type="text/javascript"><!--
google_ad_client = "ca-pub-2717861494506240";
/* Links - content */
google_ad_slot = "6814663901";
google_ad_width = 468;
google_ad_height = 15;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
{/googleAds}

Fährt man nun mit der Maus über das Bild, wird einfach durch visibility:hidden das darüber liegende Bild ausgeblendet und somit das darunter liegende sichtbar.

Weiter empfehlen


Link auf diesen Beitrag setzen:
http://www.l-design.at/webdesign-tutorials/75-bild-wechsel-per-css.html