Question

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

Answer 1

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);
}