Deaktivieren Sie einen Anker oder Hyperlink, wenn Bild nicht gefunden

Question

Ich habe einen Bild Tag eingeschlossen in einem Anker Elemente wie folgt:

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

Ich finde, dass, wenn das Bild nicht vorhanden ist, kann ich immer noch auf klicken der Link. Ich möchte deaktivieren den Link, wenn das Bild nicht vorhanden ist. Was ist der beste Weg, dies zu tun?

aktualisieren:

Ich habe mplungjan-Lösung unter versucht, aber es hat nicht funktioniert. Ich bin bereit, jquery zu versuchen, wenn Javascript die Arbeit nicht erledigen kann.

Answer 1

Diese Version funktioniert:

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

Sie es hier in Aktion sehen können: http://jsfiddle.net/jfriend00/2jb4G/

Oder eine gemeinsame Funktion, die Sie an mehreren Stellen verwenden können:

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

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

persönlich , Ich denke, es könnte nur sinnvoll sein, es zu verbergen, wenn es nicht zeigt, anstatt Klicks zu blockieren:

Sie können die Haut Version sehen hier: http://jsfiddle.net/jfriend00/KVUUM/

Answer 2

Disable = true nicht für mich arbeiten

Dies taten (mit parentNode!)

Innerhtml und Onclick:

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

---

oder entfernen:

<a href='$image'><img alt='No Image' src='$image' 
onError="var lnk= this.parentNode; lnk.parentNode.removeChild(lnk)"></a> 

---

Oder ersetzen:

<a href='$image'><img alt='No Image' src='$image' 
onError="var lnk= this.parentNode; 
lnk.parentNode.replaceChild(document.createTextNode('No image'), lnk)"></a> 

DEMO

Answer 3

Dies ist ein kleines Stück Code, fand ich, dass

<img src="http://www.someurl.com/image.gif" height="100" width="100" onerror="alert('Image missing')"> 

statt ALERT für Sie nützlich sein können Sie eine jQuery-Funktion aufrufen um den Hyperlink zu entfernen. Lass es mich wissen, wenn du Hilfe mit der Jquery-Funktion brauchst!