per CSS oder javascript automatisch Code an div anhängen

[Gunnar Bittersmann]

@@Marvin Esse

	var image = document.createElement("img");
	image.src = "info.gif";
	image.id = "pic";
	image.onclick = "test();";
	r.appendChild(image);

Zwei Probleme habe ich aber noch dabei:

Plus eins, was du noch gar nicht erkannt hast.

Ein img-Element (ohne map) ist nicht (von Haus aus) interaktiv bedienbar. Wenn du dem einen click-Eventhandler zuweist, vergisst du, dass Nutzer deine Seiten auch anders nutzen als mit Mäusen. Navigation mit der Tastatur beispielsweise. Man könnte das img-Element so nachrüsten, dass es auch mit der Tastatur anwählbar ist und auch dass Screenreader-Nutzern dessen Funktion mitgeteilt wird – das wäre aber aufwendig.

Sinnvoller ist es, die im Browser bereits vorhandenen Möglichkeiten zu nutzen und die von HTML dafür vorgesehenen Elemente zu nutzen:

• Wenn das Bild eine Aktion auf der Seite auslösen soll, dann gehört es in ein button-Element. Diesem kannst du dann einen click-Eventhandler zuweisen.

• Wenn das Bild ein Link zu einer anderen Ressource (bzw. einer anderen Stelle im aktuellen Dokument) sein soll, dann gehört es in ein a-Element. Das Linkziel steht im href-Attribut, JavaScript ist nicht erforderlich.

image.onclick ist nicht zielführend.

LLAP 🖖

PS: `image.onclick`{: .language-js.block.bad style="display: inline"} – Kann ich darauf stolz sein, wie ich den Bugs im Forum-Stylesheet ein Schnippchen schlage?