Which _proper_ html element is used to trigger an action when the image is clicked?

Question

I have a web application where (like in many others) you click on an image to do something, for example, mark a post, send an email, mark something ...

A short click on the image should trigger an action (via javascript, but this is not the point).

I was wondering what is the “right” way to do this?

• <a> -tag? Hmm ... not really a link ...
• <button> ? Since, obviously, a button is a semantic element for invoking an action ...
• <div> ?

Any clues?

Answer 1

Short answer

Use an <img> - not a button, nor a binding, nor an input, as the others assume that this element is interactive, even without JavaScript.

Long answer

clicking on the image should trigger an action (via javascript, but that's not the point).

I disagree; this is the point :)

Since clicking activates JS-only features, your image should only be available in the JS environment.

So the correct way is to paste it using JavaScript; while the HTML document must be semantically correct, the DOM structure does not have to be semantically correct, so which element you use becomes irrelevant.

Wrong way

 <div> Click on the image to do something: <a href="javascript:wtv()" style="background-image:url(...)">&nbsp;</a> </div> <div> Click on the image to do something: <input type="image" onclick="wtv()" src="..." /> </div> <div> Click on the image to do something: <img onclick="wtv()" src="..." /> </div> <div> Click on the image to do something: <button onclick="wtv()"><img onclick="wtv()" src="..." /></button> </div> 

This is all wrong because a user who does not have JavaScript sees these elements and cannot use them.

Of all these, I would say that <img> is a lesser evil, since it does not offer an interactive element. <a> uses the most evil, since the anchor must be a hyperlink to another document, and you should never use the javascript: protocol.

You will still have the same problem if you add JavaScript event handlers from outside:

 /* external .js file */ document.getElementById("myButton").onclick = wtv; <!-- HTML document --> <div id="myButtonParent"> Click on the image to do something: <a id="myButton" href="#" style="background-image:url(...)">&nbsp;</a> </div> 

Like, again, you still have a (non-working) hyperlink available to those users who don't have JavaScript.

Instead

Instead, insert the whole damn thing using DOM scripting! I am going to use <img> with the onclick event:

 /* external .js file */ window.onload = function() { var img = document.createElement("img"); img.src = "..."; img.onclick = wtv; img.style.cursor = "pointer"; // so the mouse turns into a finger, // like on a hyperlink // Note: instead assign a class attribute and put this in an external CSS file... document.getElementById("myButtonParent").appendChild(img); } 

Answer 2

You can add onclick event for image:

 <img id='image1' onclick="javascript:DoSomething()"... 

or add it via jquery:

 $("#image1").click( function() { DoSomething(); }); 

I do not think you should use the anchor tag here. Anchoring is designed to navigate without doing anything. Not to mention, if you use beforeunload events, they will be fired if you use an anchor.

While the div is working, it does not add anything semantically to the page. You do not define the individual fragment of the page that you need to make the image clickable.

I do not use the control buttons enough to talk about this as an option.

Answer 3

I don’t quite understand what you want to achieve. But have you tried image input?

 <input type="image" src="image source"> 

It will perform an operation similar to the submit form.