如果找不到图像，请禁用锚点或超链接

Disable an anchor or hyperlink if image not found

本文关键字：超链接 找不到 图像 如果      更新时间：2023-09-26

我有一个图像标签，包含在锚点元素中，如下所示：

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

我发现如果没有图片，我仍然可以点击链接。如果图像不存在，我想禁用链接。最好的方法是什么？

更新：

我在下面尝试了mplungjan的解决方案，但没有成功。如果javascript不能胜任这项工作，我愿意尝试jquery。

此版本有效：

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

你可以在这里看到它的作用：http://jsfiddle.net/jfriend00/2jb4G/

或者，使用一个可以在多个地方使用的通用功能：

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

就我个人而言，我认为如果它不显示而不是阻止点击，那么隐藏它可能是有意义的：

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

您可以在此处看到隐藏版本：http://jsfiddle.net/jfriend00/KVUUM/

Disable=true对我不起作用

这些做了（使用parentNode！）

InnerHTML和onclick:

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

或者删除它：

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

或者替换它：

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

演示

这是我发现的一小段代码，可能对有用

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

您可以调用jquery函数来删除超链接，而不是ALERT。如果您需要Jquery函数的帮助，请告诉我！

相关文章：