如何使图像可点击？

Question

Here is the html:这是 html：

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

CSS: CSS：

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

This is the way I did it, but it is not working.这是我做的方式，但它不工作。 The image is not clickable.图片不可点击。 What to do?该怎么办？

Answer 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>

This is not the best approach.这不是最好的方法。 Here is one of the standard approaches to make image clickable.这是使图像可点击的标准方法之一。

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

Now, this image will redirect to you on specified URL on click.现在，此图像将在单击时重定向到指定的 URL。

There are many ways to do it from uploading it S3/dropbox to using FSCollection (that's for node users only).从上传 S3/dropbox 到使用 FSCollection（仅适用于节点用户），有很多方法可以做到这一点。

So in your case, your snippet will look like this,所以在你的情况下，你的片段看起来像这样，

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

Answer 2

In agreement with @mukul-jain, I am updating his answer with a key clarification, as both the question and the answer are important for people new to HTML.与@mukul-jain 一致，我更新了他的回答并做了关键说明，因为问题和答案对于 HTML 的新手都很重要。

Update: `img` element in HTML5 is self-closing and does not need `/`更新：HTML5中的`img`元素自闭，不需要`/`

I most point out that HTML5 img element does not need a closing / as in the answer from five years ago.我最指出的是 HTML5 img元素不需要像五年前的答案那样结束/ 。 Thus, I have revised the answer below to comply with this:因此，我修改了以下答案以符合这一点：

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

Notice the original answer has / in before > , which is not needed for img elements (see references below).请注意，原始答案在>之前有/ ， img元素不需要它（请参阅下面的参考资料）。 Other than this, his answer is correct on how to make an image clickable, that is, to turn an image into a link.除此之外，他关于如何使图像可点击的答案是正确的，即将图像变成链接。

Supporting Documentation:支持文档：

For reference, please see: MDN docs, The Image Embed Element .有关参考，请参阅： MDN 文档，图像嵌入元素。
Especially see, 'image link' on MDN docs .特别是请参阅MDN 文档上的“图像链接”。

Cheers!干杯!

如何使图像可点击？

问题描述

2 个解决方案

解决方案1
20 2017-02-05 11:35:17

解决方案2
0 2022-06-11 10:15:50

Update: `img` element in HTML5 is self-closing and does not need `/`更新：HTML5中的`img`元素自闭，不需要`/`

Supporting Documentation:支持文档：

如何使图像可点击？

问题描述

2 个解决方案

解决方案1 20 2017-02-05 11:35:17

解决方案2 0 2022-06-11 10:15:50

Update: img element in HTML5 is self-closing and does not need /更新：HTML5中的img元素自闭，不需要/

Supporting Documentation:支持文档：

解决方案1
20 2017-02-05 11:35:17

解决方案2
0 2022-06-11 10:15:50

Update: `img` element in HTML5 is self-closing and does not need `/`更新：HTML5中的`img`元素自闭，不需要`/`