How should I use an image to trigger Javascript?

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