Question

I have an image tag enclosed in an anchor element like this:

<a href='$image'><img alt='No Image' src='$image'></a>

I find that if the image is absent, I can still click on the link. I want to disable the link if the image is absent. What is the best way to do this?

Update:

I have tried mplungjan’s solution below but it didn’t work. I am willing to try jquery if javascript can’t do the job.

Answer 1

This version works:

<a href='$image'>
    <img alt='No Image' src='$image' onError="this.parentNode.onclick=function() {return(false);}">
</a>​

You can see it in action here: http://jsfiddle.net/jfriend00/2jb4G/

Or, using a common function that you can use in multiple places:

<script>
function blockParentLink() {
    this.parentNode.onclick = function() {return(false);}
}
</script>

<a href='$image'>
    <img alt='No Image' src='$image' onError="blockParentLink()">
</a>​

Personally, I think it might just make sense to hide it if it doesn’t display rather than block clicks:

<a href='$image'>
    <img alt='No Image' src='$image' onError="this.parentNode.style.display = 'none';">
</a>​

You can see the hide version here: http://jsfiddle.net/jfriend00/KVUUM/