[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

Answer 1

[tutedutsch]

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/

Woher ich das weiß: Berufserfahrung – Selbstständig als Webdeveloper (Front- und Backend)

Answer 2

[Schaeler]

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

Comments

[astoorangi]

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

[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-Generatoren

[Schaeler]

@TitusPullo

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

[kinkf]

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

[Schaeler]

@kinkf

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

[kinkf]

@Schaeler

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

[MonkeyKing]

@kinkf

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