gibt es a:hover auch für images?

[pleasehelpme]

ich habe 2 bilder.

das erste gebe ich aus.

<img src="bild.png" />

kann man jetzt das zweite für das erste bild einsetzen, wenn man mit der maus rüberfährt?
(<img src="bild2.png" />)

 

[lascaux]

Das funktioniert mit Javascript am besten.

Ich mach das mal auf die einfachste Art damit du es leicht nachvollziehen kannst.



Als erstes der HTML-Teil

<img id="meinBild" onmouseover="bildwechsel()" onmouseout="bildzurueck()" src="bild1.jpg" alt="" />

Dann der Javascript-Teil im Head-Bereich bzw in einer externen Datei

function bildwechsel() {
  document.getElementById('meinBild').src = 'bild2.jpg';
}

function bildzurueck() {
  document.getElementById('meinBild').src = 'bild1.jpg';
}

Mit der ersten Funktion wird dir das Bild gewechselt, sobald du mit der Maus darüber bist. Mit der zweiten Funktion wird wieder das ursprüngliche Bild als Quelle angegeben.



lascaux

 

[pax]

Wenn Du :hover verwenden möchtest, dann benutze statt des <img>-tags einen <div>-tag, dem Du mit css background-images gibst, eins für das normale und eins für das :hover.

Wenn JS nicht unbedingt nötig ist, sollte man darauf verzichten.

 

[lascaux]

Da fällt mir noch eine andere Methode ein, die sogar noch besser geeignet ist

<img src="bild1.jpg" onmouseover="src='bild2.jp'" onmouseout="src='bild1.jpg'" />

lascaux

 

[pax]

Ist vermutlich wirklich die einfachste Variante, aber dazu muss JS im Browser aktiviert sein.

 

[lascaux]

In 99% aller Fälle ist JS aktiviert. Ohne geht es mittlerweile gar nicht mehr


lascaux

 

[Timmer]

Die beste Variante sind CSS-Sprites.

Vorteil: Kein JavaScript benötigt, funktioniert überall und der Webserver wird entlastet bzw. die Seite wird schneller aufgebaut, da nur 1 statt 2 Bildern geladen werden muss. Außerdem ist das 2te Bild sofort geladen und muss nicht erst beim :hover geladen werden.

Wie funktioniert das?

<style>
 #image {display:block;height:100px;width:100px;overflow:hidden;background-image:url('/meinbild.jpg');}
 #image:hover {background-position:0 -100px;}
</style>
<div id="image">
</div>

In dem Beispiel haben wir ein Bild mit der Größe 100x100 Pixel. Das Background-Image beinhaltet 2 Bilder untereinander, ist also 200 Pixel hoch und 100 Pixel breit. Standardmäßig wird das erste Bild angezeigt, da der Rest durch overflow:hidden abgeschnitten wird. Beim :hover wird das Hintergrundbild um 100 Pixel nach oben verschoben, wodurch das 2te Bild nahtlos zum Vorschein kommt.

[UPDATE]

Im übrigen lässt sich das "unendlich" erweitern, so verwenden große Websites wie Yahoo o.ä. nur ein Bild für ihre Iconsets.

 

[pax]

Schöne Möglichkeit, werd ich mir merken.

@lascaux: Das stimmt schon, aber viele nutzen z.B. NoScript u.ä. und wenn ich z.B. auf einer Seite erst Scripte erlauben muss nur um das Menü bedienen zu können, dann habe ich keinen guten ersten eindruck davon.