HTML Bild durch Button ersetzen?
Ich möchte ein bild das z.b.: bild 1 heißt durch Bild 2 ersetzen, indem ich auf einen Knopf drücke wie mache ich so etwas
6 Antworten
![](https://images.gutefrage.net/media/user/regex9/1455660989427_nmmslarge__0_13_270_270_615d5a3bc6888f4c1486ce2b4d9d8f60.png?v=1455660989000)
Wie schon von anderen geschrieben, lässt sich dies mit JavaScript gut bewerkstelligen:
<img alt="some image description" id="image" src="image1.jpg">
<button id="imageSwitcher" type="button">Change image</button>
<script>
const image = document.getElementById("image");
document.getElementById("imageSwitcher").addEventListener("click", function() {
image.src = "image2.jpg";
image.setAttribute("alt", "some other image description");
});
</script>
![](https://images.gutefrage.net/media/user/regex9/1455660989427_nmmslarge__0_13_270_270_615d5a3bc6888f4c1486ce2b4d9d8f60.png?v=1455660989000)
Prüfe mit if-else ob die aktuelle Bildquelle (image.src) auf den initialen Bildpfad zeigt. Je nach Auswertung kannst du folgend die Attribute korrekt setzen.
![](https://images.gutefrage.net/media/user/FinnB132/1571046713071_nmmslarge__334_753_326_326_8990e0dc1ae73ecd6473f830fe833551.jpg?v=1571046713000)
<img id="bild1" src="C:/User/Maxmustermann/bild1.png" />
<button onclick="bildAendern()" />
<script>
function bildAendern(){
var bild = document.getElementById('bild1')
bild.src = "C:/User/Maxmustermann/bild2.png"
}
</script>
Hier mal ein Ansatz.
LG
![](https://images.gutefrage.net/media/user/LordGaming/1538913219523_nmmslarge__144_6_2070_2070_d82421089d499c1cbc3d780c236f8cdd.jpg?v=1538913220000)
hat soweit funktionier, und wie kann ich es durch nochmal klicken wieder ändern?
![](https://images.gutefrage.net/media/user/FinnB132/1571046713071_nmmslarge__334_753_326_326_8990e0dc1ae73ecd6473f830fe833551.jpg?v=1571046713000)
Also du hast relativ wenig davon wenn ich dir die ganze Zeit irgendwelches Zeug zusammensuche.
Fang mal hier an:
![](https://images.gutefrage.net/media/default/user/7_nmmslarge.png?v=1438863662000)
Es könnte auch ohne JavaScript gehen - mit einem div, dessen Hintergrundbild per CSS festgelegt wird: https://www.w3schools.com/cssref/pr_background-image.asp
Dann für :active und/oder :visited andere Bilder angeben
![](https://images.gutefrage.net/media/default/user/9_nmmslarge.png?v=1551279448000)
JavaScript
Im button fügst du mit onclick="" eine JavaScript Funktion ein die aufgerufen werden soll.
![](https://images.gutefrage.net/media/default/user/9_nmmslarge.png?v=1551279448000)
Geht mit HTML und CSS alleine. Siehe: https://stackoverflow.com/questions/6813699/how-to-change-an-image-on-click-using-css-alone
und wie kann ich den button auch wieder benutzen um das bild wieder zurück zur eins ändern?