如何使图像可点击？
[英]How do I make an image clickable?
问题描述
这是 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 个解决方案
解决方案1
20 2017-02-05 11:35:17
<!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（仅适用于节点用户），有很多方法可以做到这一点。
所以在你的情况下，你的片段看起来像这样，
<a href="http://www.google.com">
<img src="D:/MOHIT/HTML/images.jpg" />
</a>
解决方案2
0 2022-06-11 10:15:50
与@mukul-jain 一致，我更新了他的回答并做了关键说明，因为问题和答案对于 HTML 的新手都很重要。
更新：HTML5中的img元素自闭，不需要/
我最指出的是 HTML5 img元素不需要像五年前的答案那样结束/ 。 因此，我修改了以下答案以符合这一点：
<a href="http://www.google.com">
<img src="D:/MOHIT/HTML/images.jpg">
</a>
请注意，原始答案在>之前有/ ， img元素不需要它（请参阅下面的参考资料）。 除此之外，他关于如何使图像可点击的答案是正确的，即将图像变成链接。
支持文档：
- 有关参考，请参阅： MDN 文档，图像嵌入元素。
- 特别是请参阅MDN 文档上的“图像链接”。
干杯!
如何仅使元素的图像部分可点击？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.