How should I use an image to trigger Javascript?

Question

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

@RabNawaz, I thought it was clear. Anyway, I added it to the end of the question. — JNF, Sep 20 '12 at 10:10

Mihai Iorga · Answer 1 · 2012-09-20T10:15:06.193

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>

edited Sep 20 '12 at 10:15

answered Sep 20 '12 at 10:08

Mihai Iorga

39,330
16
106
107

easieer??? just typing onclick="function();" or that bounce of code... and onclick isn't deprecated yet, so it doesn't make anny sence to not use it... – Mathlight Sep 20 '12 at 10:10
2

yes easier, in future if you want to change how that action works you need to edit your html/pages, making javascript outside HTML is easier to manipulate and use. – Mihai Iorga Sep 20 '12 at 10:14
I must admit, that's true ;-) – Mathlight Sep 20 '12 at 10:16

score 2 · Accepted Answer · answered Sep 20 '12 at 10:11

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

HTML props, I guess the proper terminology is HTML attributes - and I'm referring to `` where the `href` is an attribute — Matt J, Sep 24 '12 at 10:39

score 1 · Answer 3 · answered Sep 20 '12 at 10:06

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>

score 1 · Answer 4 · answered Sep 20 '12 at 10:11

1

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. :)

answered Sep 20 '12 at 10:11

Fry_95

241
1
6

score 0 · Answer 5 · answered Sep 20 '12 at 10:10

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

How should I use an image to trigger Javascript?

5 Answers5