Which is the _proper_ html element to use for calling action when clicking on an image?

I have a webapplication where (as in many other ones out there) you click on an image to do something, for instance, mark an entry, send a mail, flag something...

Short, clicking on the 开发者_JAVA技巧image is supposed to call an action (via javascript, but that's not the point).

I was wondering, what is the "right" way to do this?

• <a>-tag? Hmm... actually it is not a link...
• <button>? Because obviously a button is the semantic element for calling an action...
• <div>?

Any hints?

Short Answer

Use an <img> - not a button or an anchor or an input - as the rest suggest that the element is interactive, even without JavaScript.

Long Answer

clicking on the image is supposed to call an action (via javascript, but that's not the point).

I disagree; that is the point :)

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

As such the proper way is to insert it with JavaScript; while an HTML document should be semantically correct, a DOM structure doesn't really need to be semantically correct, so which element you use becomes irrelevant.

The 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>

These are all wrong because a user who doesn't have JavaScript sees these items and can't use them.

Of all of these, I'd say the <img> is the lesser evil, as it doesn't suggest an interactive element. The greatest evil is using the <a> as an anchor should be a hyperlink to another document, and you should never, ever use the javascript: protocol.

You'll still have the same problem when you add the JavaScript event handlers externally:

/* 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>

As, again, you still have the (non-functioning) hyperlink available to those users who don't have JavaScript.

Instead

Instead, insert the whole damn thing using DOM scripting! I'm going to use an <img> with an 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);
}

You could add an onclick event for the image:

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

or add it via jquery:

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

I don't think you should use an anchor tag here. Anchoring is for navigating not doing things. Not to mention if you use the beforeunload events, they will get fired if you use an anchor.

While the div works it doesn't add anything semantically to the page. You are not defining a distinct chunk of the page you need to make an image clickable.

I don't use a button control enough to talk about that as an option.

Do not quite understand what you want to achieve. But have you tried image input?

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

It will do an operation similar to form submit.