Button mit eignem Bild einfügen html/css/js?

2 Antworten

regex9
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, HTML, CSS
14.08.2020, 23:47

Deinem unteren Kommentar zufolge möchtest du wohl doch nur eine Verlinkung umsetzen:

<a href="yourTargetUrl">
  <img alt="Some image description" src="some/image.jpg">
</a>

Das geht auch mit einem Formular:

<form action="yourTargetUrl">
  <input alt="Some image description" src="some/image.jpg" type="image">
</form>

Den Link kann man mit CSS auch wie einen Button gestalten, wenn denn nötig. Siehe dazu bspw. hier.

Das button-Element kann natürlich auch Bilder enthalten.

<button type="button">
  <img alt="Some image description" src="some/image.jpg">
</button>

Wobei dieser Button noch auf nichts reagiert. Dazu muss an das click-Event, welches er aussenden kann, erst ein JavaScript Handler geknüpft werden.
KorbiOnRails
14.08.2020, 22:32

Füge dem Bild beispielsweise einen Event Listener per JavaScript hinzu.

HTML

<img id="image" src="pfad" alt="Image">

JavaScript

const image = document.querySelector('#image');

image.addEventListener('click', (event) => {
    // Das was bei Klicken geschehen soll
});