Frage von kinkf, 66

[HTML/CSS] Bild wechselt, wenn man mit der Maus darüberfährt?

Hi!

Angenommen ich habe 2 Bilder.

Wenn ich auf meiner Website über ein Bild fahre, soll an der selben Stelle ein anderes Bild erscheinen. (Die Bilder sind gleich groß) Ich denke hierbei an einen Hover-Effekt, weiss aber nicht wie ich das machen soll.

Vielen Dank und LG -Florian

Antwort
von tutedutsch, 22

Das habe ich auf meiner Website auch gemacht: http://tutedutsch.jimdo.com/ (Unten in der Fußleiste bei den Social Media Seiten).

Ich kann den Code hier irgendwie nicht reinkopieren, daher hier ein Link zu einer Anleitung (HTML):

http://www.jimdo-tutorials.de/tutorials/bilder/mouseover-bildwechsel/

Antwort
von Schaeler, 50

HTML:

<div class="Bild[nenns wie du willst]">
</div>

CSS:

.Bild[oder wie du es genannt hast]{
  background-image:url(pfad/url);
  height:[Deine Höhe]px;
  width:[Deine Breite]px;
}

.Bild[oder wie du es genannt hast]:hover{
  background-image:url(pfad/url zum 2. bild);
}

wenn du nen animierten übergang willst füg das beim oberen CSS Eintrag hinzu:

  transition:2s; [zeit die der Übergang dauern soll in Sekunden]

Hoffe ich konnte helfen, bei fragen einfach Antworten

Kommentar von kinkf ,

Bei mir scheint es nicht zu funktionieren...Die Bilder erscheinen nicht

Kommentar von Schaeler ,

http://codepen.io/anon/pen/grJVOG vllt. siehst du da was du falsch gemacht hast

Kommentar von kinkf ,

Was mache ich denn, wenn ich ein Bild auf meinem Rechner habe? Bzw. was muss ich vor die Datei schreiben? (Anstelle von "url")

Kommentar von MonkeyKing ,

du schreibst immer "url", aber eben den relativen Pfad zur Bilddatei.

Kommentar von astoorangi ,

Dann gibst du ./bild.jpg oder bild.jpg oder img/bild.jpg...

Kommentar von TitusPullo ,

Die Lösung hat einen Nachteil, man sieht für kurze Zeit garkein Bild da das 2. Bild erstmal laden muss. Um das zu verhindern muss man auf Sprite Grafiken setzen und per background-position beim hovern verschieben.


https://wiki.selfhtml.org/wiki/CSS/Anwendung\_und\_Praxis/Sprites#Sprite-Generat...

Kommentar von Schaeler ,

aber das hat der Besucher nur beim ersten Besuch auch der Seite, danach werden die Bilder ja von der Festplatte geladen. 

Keine passende Antwort gefunden?

Fragen Sie die Community

Weitere Fragen mit Antworten