Eine – wie ich persönlich finde – schönere Alternative ist hierbei die Verwendung von etwas CSS. Dafür wird keinerlei JavaScript benötigt und der Effekt ist der Gleiche, mit dem Vorteil das es immer funktioniert. Alles was dazu benötigt wird, sind natürlich in erster Linie die Bilder, ein bisschen HTML und etwas CSS.

Methode 1: Der simple Mouseover

Hier wird per HTML ein Element erzeugt, welches das Bild als Hintergrund bekommt. Beim Mouseover, oder hover wie es im CSS heißt, wird dieses nun einfach ausgetauscht.

1
<div class="bildwechsel"></div>

Hier wird ein einzelnes DIV erzeugt und bekommt die Klasse bildwechsel. Diese kann nun per CSS angesprochen werden.

1
2
.bildwechsel {width:304px; height:75px; background:url("img-1.jpg");}
.bildwechsel:hover {background:url("img-2.jpg");}

Wie hier im CSS zu sehen, bekommt das DIV eine Höhe von 75 Pixel und eine Breite von 304 Pixel. Diese Werte sollten nach Möglichkeit mit denen des Bildes übereinstimmen. In der zweiten Zeile ist nun der Hover zu sehen. Hier wird dafür gesorgt, dass das Bild ausgetauscht wird, sobald man mit der Maus über dem DIV ist.

Methode 2: Mouseover mittels CSS-Sprite

CSS-Sprite ist eine Methode in der mehrere Bilder in einem einzelnen Bild sind. Diese werden dann einfach per CSS im jeweiligen Element positioniert. Dies hat den unschlagbaren Vorteil, dass nur ein Bild geladen werden muss, und nicht wie sonst üblich mehrere. Das HTML bleibt in diesem Falle mit dem von Methode 1 identisch, nur das CSS ändert sich hierbei.

1
2
.bildwechsel {width:304px; height:75px; background:url("img-sprite.jpg") top right;}
.bildwechsel:hover {background:url("img-sprite.jpg") bottom right;}

Wie hier nun deutlich zu erkennen ist, wird in beiden Fällen das selbe Bild geladen, jedoch wird dieses in Zeile 1 an eine andere Position gebracht als in Zeile 2. Das Bild hierfür könnte nun wie folgt aussehen.

Beispiel CSS-Sprite Bild

Beispiel CSS-Sprite Bild

Hier sind zwei Bilder in einem Bild „vereint“. Laut dem Beispiel im CSS wird im „Normalzustand“ das Graue angezeigt und beim Mouseover/Hover das Gelbe.

Bildwechsel mit Hyperlinks

Wenn man nun das Bild, welches ja nun schön wechselt auch noch verlinken möchte, so bietet auch hier CSS eine Möglichkeit den Link über das gesamte Bild auszudehnen. Hierfür hilft das display-Attribut. Aber zunächst muss natürlich der HTML-Code etwas erweitert werden.

1
2
3
4
5
<div class="bildwechsel">
    <a href="###link###">
        <span>&nbsp;</span>
    </a>
</div>

Nun wird dieser, genau wie auch in den obrigen Beispielen mittels CSS angepasst. Es spielt hierbei im Übrigen keine Rolle, ob man sich für den Bildwechsel nun für Methode 1 oder Methode 2 entscheidet. Ich nutze hier Methode 2.

1
2
3
4
.bildwechsel {width:304px; height:75px; background:url("img-sprite.jpg") top right;}
.bildwechsel:hover {background:url("img-sprite.jpg") bottom right;}
.bildwechsel a {width:100%; height:100%; display:block; text-decoration:none;}
.bildwechsel a span {display:block; width:100%}

Der Trick ist hierbei die Zeile 3. Hier wird dem a-Tag beigebracht, dass es ein Blockelement ist. Somit lassen sich diesem Element Höhe und Breite mitgeben. Die Angaben von 100% sprechen hoffentlich für sich. Auch der span innerhalb des Ankers wird als Blockelement deklariert und bekommt natürlich die gleiche Breite wie der Anker selbst. Auf die Höhe des span wird hier verzichtet. Dieser ist eigentlich nur für den Fall, dass man noch etwas auf das Bild schreiben möchte. Also einen kleinen Linktext. Diesen kann man natürlich auch per CSS positionieren und an die gewünschte Stelle innerhalb des Bildes bringen.

Ich wünsche viel Spaß

11 Meinungen zu “CSS: Bildwechsel bei Mouseover

  1. Lieber H.-Peter,
    deine Anleitung ist prima und genau das, was ich gesucht habe.
    Aber wie macht man das, wenn man nicht nur ein Bild mit Bildwechsel umsetzen möchte, sondern zb. 10 Bilder? Ich kann dann doch nicht 10 verschiedene CSS-styles anlegen?

    Würde mich über Antwort freuen…

    LG Elfe

  2. Hi,
    ich hab diesen Beitrag gefunden, und ich konnte das Beispiel mit dem „Sprite“ Effekt direkt umsätzen, allerdings hab ich immer noch ein Problem welches ich gehofft hab damit beseitigen zu könne.
    Der Internet Explorer zeigt diesen Effekt einfach nicht an.
    Gibt es nicht eine Cross Browser Lösung für den Hover Effekt in CSS der auf Mozilla/IEx und Chrome Funktioniert.. ?!

    Anyway, danke für den Sprite Beitrag.
    Gruß,
    Tobias

  3. Hallo Hans-Peter,

    die Idee mit dem Sprite find ich sehr nett!

    Es geht übrigens auch etwas kürzer:

    1
    2
    .bildwechsel {background: url(img-sprite.jpg) top right; width: 32px; height: 28px; display:block}
    .bildwechsel:hover  {background: url(img-sprite.jpg) bottom right;}

    und dann:

    1
            <a href="irgendwohin.php" class="bildwechsel"></a>
  4. Hallo Peter,
    ich habe 2 kurze Fragen.
    Ist es möglich, das simple Mouseover mit einer transition zu versehen?
    Und ich habe das Problem, dass ich die grösse in % angeben will. Jedoch wird das Bild dann nicht geladen. Ist das trotzdem irgendwie möglich?

    Lg Savino

Schreibe einen Kommentar

Ihre Email-Adresse wird nicht veröffentlicht. Pflichtfelder sind durch * markiert.

Sie können folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>