To have an image which acts as a javascript trigger there are quite a

Question

Editorial Team

Asked: June 11, 20262026-06-11T15:22:36+00:00 2026-06-11T15:22:36+00:00

To have an image which acts as a javascript trigger there are quite a few options:

(EDIT: using inline css & javascript for simplifying the question)

Image in anchor tag:

<a href="#" onclick="myFunc();"><img src="pic.jpg" /></a>

Img tag with properties:

<img style="cursor:pointer" onclick="myFunc();" />

Anchor tag with properties:

<a href="#" onclick="myFunc();" style="background:url('pic.jpg');"></a>

Possibly others as well. Is there a (convention|best practice|widely accepted|fail safe) way to go on with this?

I want a small image to act as a button to run certain Javascript or AJAX.

BTW, I’ve seen this but it’s not what I’m looking for, he talks about header elements, not links.

You must login to add an answer.

Need An Account,

Editorial Team · Answer 1 · 2026-06-11T15:22:38+00:00

If I were you I’d stick with your first choice with a few changes

<a href="javascript:void(0);" onclick="myFunc();"><img src="pic.jpg" border="0" /></a>

Reasons for this are as follows

href=”#” still allows clickthrough if your myFunc fails
javascript:void(0) doesn’t allow clickthrough
javascript:void(0) is cross-browser
javascript:void(0) still allows basic implied anchor tag behaviour
attribute/properties on the image tag will be recognised by most browsers but some older versions of IE may not like it
if you want to use a background image that’s upto you, but it’ll mean additional CSS to control height/width

Additionally, if you use jQuery or some other library, then I’d recommend doing it via

$(document).on('ready, function() { $('#myAnchorId').on('click', myFunc); });

Instead of doing via HTML props… just in case the user has JavaScript turned off

The Archive Base Latest Questions