如何在图像代码中放置超链接？答案

【问题标题】：How to Place a Hyperlink within a Image Code?如何在图像代码中放置超链接？
【发布时间】：2017-12-06 04:20:07
【问题描述】：

我正在尝试使用 Instagram 图标作为超链接，以便当您单击它时，它会直接转到我的 Instagram 页面。我在 Firefox 上对其进行了测试，当我单击该图标时，它不会进入我的 Instagram，它只会留下一个空白页面。

<strong><u>Social Media<u></strong><br>
    <a div class="socialmedia" href="socialmedia">
        <img src="images/instagramlogo.png" alt="Instagram"  
        style="width:30px;height:30px; padding-top: 7px;">
    </a></p>

我有一个，这样我就可以在图标上做一个行高代码，这样它就不会太靠近“社交媒体”文本。

【问题讨论】：

a href link on img的可能重复

标签： css html image hyperlink

【解决方案1】：

您正在尝试将a 与div 混合使用。

试试这个：

<div class="socialmedia">
<a href="socialmedia">
<img src="images/instagramlogo.png" alt="Instagram"  
    style="width:30px;height:30px; padding-top: 7px;">
</a>
</div>

【讨论】：

*注意，我假设您的 href 只是真实链接的占位符，而不是错误。

【解决方案2】：

这里有一些问题。正如其他人所指出的，您将a 和div 混合在一起。你的标签，没有所有的类和属性，基本上可以是

<a><img></a>

它没有链接到任何东西的原因是href - 您需要将其设置为您页面的网址。所以如果你的 Instagram 页面是 instagram.com/SomeUserName，你会这样做：

<a href="http://instagram.com/SomeUserName" class="socialmedia">
  <img src="images/instagramlogo.png" alt="Instagram"  
    style="width:30px; height:30px; padding-top: 7px;">
</a>

【讨论】：

在我看来，“社交媒体”链接只是一个占位符，无法准确显示他链接的内容。
可能，但没有理由假设，考虑到问题是“为什么这个链接不起作用？”。我还没有测试过，但我很确定即使 a 标签上的 div 属性不正确，如果它有一个有效的 url，它仍然可以工作。
它不起作用的原因是他正在混合他的元素。
@jack 我用你的代码替换了我的代码，并输入了实际的 URL。它仍然没有进入 Instagram 页面，我只是像以前一样得到一个空白页面。

【解决方案3】：

你需要做的就是用一个锚标签包裹 img 标签。 :)

<a href="javascript:void(0);"><img 
 src="img.jpg" alt="image"/></a>

【讨论】：

【解决方案4】：

您必须从元素内部删除该 div。一个链接是这样的。

<strong><u>Social Media<u></strong><br>
  <div div class="socialmedia">
    <a  href="socialmedia">
        <img src="images/instagramlogo.png" alt="Instagram"  
        style="width:30px; height:30px; padding-top:7px;">
    </a>
  </div>

【讨论】：

社交媒体
style="width:30px;height:30px; padding-top: 7px;">