wie kann ich mit einem button bilder einfügen Html?
Ich bin verzweifelt auf der such im Internet sowas als Anleitung zu finden , doch finde nichts , danke an jeden der mir versucht zu helfen
Also ich will mit einen dropdown button an einer stelle xy ein bild einfügen und jeder button von den drop down menü soll ein bild einfügen an der gleichen stelle xy , dabei soll aber bei neuer button auswahl das alte bild verschwinden.
1 Antwort
Für die Dropdown-Auswahl kannst du ein select-Element nehmen. Dessen Wertänderungen und das Setzen der Bildquelle kann JavaScript übernehmen.
<!doctype html>
<title>Example</title>
<body>
<select id="image-selection">
<option data-description="Alternative text for image 1 ..." value="path/to/image1.jpg">Image 1</option>
<option data-description="Alternative text for image 2 ..." value="path/to/image2.jpg">Image 2</option>
<!-- etc. -->
</select>
<img alt="Alternative text for image 1 ..." height="300" id="image" src="path/to/image1.jpg" width="200">
<script>
const image = document.getElementById("image");
const selectField = document.getElementById("image-selection");
selectField.addEventListener("change", () => {
image.src = selectField.value;
image.alt = selectField.options[selectField.selectedIndex].dataset.description;
});
</script>
</body>
Jedes option-Element beinhaltet die relevanten Bildinformationen. Im obigen Snippet würde ich davon ausgehen, dass alle Bilder gleich groß sind. Der Bildpfad selbst kann im value-Attribut untergebracht werden, andere Werte in verschiedenen data-Attributen.
Mit JavaScript werden anschließend Referenzen für Auswahlfeld und Bildelement ermittelt und ein Event Handler definiert, der bei Änderung des Auswahlfeldes ausgeführt werden soll. In diesem Fall werden einfach nur die Attributwerte des Bildelements neu gesetzt.
An den aktuellen Wert des Auswahlfeldes kommt man leicht über das value-Property. Weitere Attribute auf dem option-Element hingegen bekommt man nur, indem das ausgewählte option-Element herausgesucht wird. Das Objekt im dataset-Attribut liefert dann den Wert des data-Attributs.
Weitere Informationen zu den genutzten Elementen kannst du auf MDN nachschlagen.