如何使圖像可點擊？
[英]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.