如何使图像可点击?

Posted

技术标签:

【中文标题】如何使图像可点击?【英文标题】:How do I make an image clickable? 【发布时间】:2017-06-22 10:26:41 【问题描述】:

这里是html

<div id="panelpic1">
    <a href="https://www.google.com/"style="display:block"target="_blank">
    </a>
</div>

CSS:

  #panelpic1
            content: url(file:///D:/MOHIT/HTML/images.jpg);
            float: left;
            width: 250px;
            height: 150px;
            vertical-align: middle;               
           

这是我做的方式,但它不起作用。图片不可点击。怎么办?

【问题讨论】:

【参考方案1】:

<!DOCTYPE html>
<html>
<body>

<span>Open image link in a new tab: 
 <a href="http://www.google.com" target="_blank">
  <img src="D:/MOHIT/HTML/images.jpg" />
 </a>
</span>

</body>
</html>

这不是最好的方法。这是使图像可点击的标准方法之一。

<a href="your landing page url">
 <img src="your image url" />
</a>

现在,此图片将在点击时通过指定 URL 重定向到您。

从上传 S3/dropbox 到使用 FSCollection(仅适用于节点用户)有很多方法。

所以在你的情况下,你的 sn-p 看起来像这样,

<a href="http://www.google.com">
 <img src="D:/MOHIT/HTML/images.jpg" />
</a>

【讨论】:

按照您的建议进行操作后,图像变得可点击,但未在指定尺寸的页面中生成。 您可以在您的问题中添加该图像代码吗?这将非常有帮助。谢谢 请查看更新后的答案。我添加了一个代码 sn-p。您只需将图像包装在 span 中。

以上是关于如何使图像可点击?的主要内容,如果未能解决你的问题,请参考以下文章

如何使图像的一部分成为可点击的链接

使颤动的网络图像小部件可点击

如何使绝对定位的图像区域地图可以用鼠标点击?

在 UITextView 中使图像可点击

使叠加层后面的图像可点击[重复]

如何使用 React JS 在 Material UI 中使整个 Card 组件可点击?