logo标签列表

如何使图像可点击？

htmlcssimagenetbeansclickable
18

这里是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;               
           }

这是我做的方式，但它不起作用。 图像无法点击。 该怎么办？

2个回答
30

<!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（仅适用于Node用户）。

因此，在您的情况下，您的代码段将如下所示：

<a href="http://www.google.com">
 <img src="D:/MOHIT/HTML/images.jpg" />
</a>
1
在按照您建议的方式操作后，图像变得可点击了，但它没有按指定尺寸在页面上生成。 - jack reacher
2
你能否在你的问题中添加那些图片代码？这将非常有帮助。谢谢。 - Mukul Jain
1
请查看更新后的答案。我已经添加了代码片段。你只需要将图像包装在span中即可。 - Mukul Jain
0

根据 @mukul-jain 的意见，我正在更新他的答案，并进行了关键澄清，因为问题和答案对于新接触 HTML 的人来说都很重要。

更新：HTML5 中的 img 元素是自闭合的，不需要 /

我必须指出，HTML5 中的 img 元素不需要像五年前的答案中那样有一个闭合的 /。因此，我已经修改了下面的答案以符合这一点：

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

请注意，原始答案中在>之前有/，但是对于img元素来说这不是必需的（请参见下面的参考文献）。除此之外，他的答案是正确的，即如何使图像可点击，即将图像转换为链接。

支持文档:

干杯!

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接