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

Answer 1

[regex9]

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>

Demo

Comments

[LordGaming]

und wie kann ich den button auch wieder benutzen um das bild wieder zurück zur eins ändern?

[regex9]

@LordGaming

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.

Answer 2

[FinnB132]

	<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

Woher ich das weiß: Studium / Ausbildung – Gelernter Fachinformatiker, Freiberufl. Softwareentwickler

Comments

[LordGaming]

hat soweit funktionier, und wie kann ich es durch nochmal klicken wieder ändern?

[FinnB132]

@LordGaming

Also du hast relativ wenig davon wenn ich dir die ganze Zeit irgendwelches Zeug zusammensuche.

Fang mal hier an:

https://www.w3schools.com/js/

Answer 3

[PWolff]

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

Woher ich das weiß: Berufserfahrung – Software-Entwickler

Answer 4

[whgoffline]

JavaScript

Im button fügst du mit onclick="" eine JavaScript Funktion ein die aufgerufen werden soll.

Woher ich das weiß: Studium / Ausbildung – Informatikstudent

Answer 5

[threadi]

Geht mit HTML und CSS alleine. Siehe: https://stackoverflow.com/questions/6813699/how-to-change-an-image-on-click-using-css-alone

Woher ich das weiß: Berufserfahrung