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.

Related: Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?

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.

Related: Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?

• javascript
• html
• css
• anchor
• image

Share Improve this question Follow edited May 23, 2017 at 11:50 CommunityBot 111 silver badge asked Sep 20, 2012 at 10:03 JNFJNF 3,74033 gold badges3434 silver badges6464 bronze badges 1

• @RabNawaz, I thought it was clear. Anyway, I added it to the end of the question. – JNF Commented Sep 20, 2012 at 10:10

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

There is no convention on how to use onclick event.

But you should not use inline javascript. As we are in 2012 and a lot of javascript frameworks make your life easier.

Best for you if you move to a javascript library (eg jQuery):

<img src="pic.jpg" id="myPicture" />
<script type="text/javascript">
    $(document).ready(function(){
        $('#myPicture').on('click', function(){
            alert('image clicked');
        });
    });
</script>

or plain javascript:

<img src="pic.jpg" id="myPicture" />
<script type="text/javascript">
    window.onload = function(){
        document.getElementById('myPicture').onclick = function(){
            alert('image clicked');
        };
    };
</script>

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

If you only going to use the image as an trigger, use the second option...

If you're going to use some more for the same thing, you can use an span to...

<span onclick="myFunc();" >
    <img src="pic.jpg" style="cursor:pointer" />
    if you click the image, or this text, the javascript function will be triggerd....
</span>

Maybe with jQuery ? Your HTML :

<img id="pic" src="pic.jpg" />

With this jQuery :

$('#pic').click(function() {
    // Your stuff here
});

And this CSS :

#pic {
    cursor: pointer;
}

Inline css and js are never the best way. :)

Use a class to identify your trigger object (be it an anchor or an image) and then perform click handling on that object:

Say the class name is "clickTrigger", then your HTML:

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

or

<a href="#" class="clickTrigger"><img src="pic.jpg" /></a>

or

<img style="cursor:pointer" class="clickTrigger" />

Then with javascript/jQuery attach to the click event:

Javascript:

var element = this.getElementsByClassName('clickTrigger')[0];
element.onclick = function (event) {
    // handler
}

jQuery:

$('.clickTrigger').click(function (event) {
    // Handler
});