如何超链接图像答案

【问题标题】：How to hyperlink an image如何超链接图像
【发布时间】：2017-09-15 23:54:11
【问题描述】：

我想为图片添加超链接，但如何在图片中添加href 标签？

<div class="laptop">
    <img class='report' src="http://testtest/Report1.png"/>

当报告显示时，您可以单击它并转到该站点。

h1{
    font-family: Arial Rounded MT Bold;
    font-size: 33px;
    color: #0F4194;
    float: left;
    margin: 50px 0px 15px 700px;
    
}

.laptop{
  width:1024px;
  height:661px;
  float: center;
  margin-right: -150px;
  background: url('http://mlamannadev.com/Images/Laptop2.png');
  background-repeat: no-repeat;
  background-position: top left;
  background-size: contain;
  width: 1024px;
  z-index:4;
}

.report{
  position:absolute;
  animation:round 16s infinite;
  opacity:0;
  z-index:-1;
  margin-left: auto;
  margin-right: auto;
  display: block;
  
}
@keyframes round{   
  25%{opacity:1;}
  40%{opacity:0;}
} 

img:nth-child(4){animation-delay:0s;}
img:nth-child(3){animation-delay:4s;}
img:nth-child(2){animation-delay:8s;}
img:nth-child(1){animation-delay:12s;}

<!DOCTYPE html>
<html>
<head>
   <link href="style.css" rel="stylesheet" type="text/css">
</head>
    <body>
        <h1><center>Service Driven, Customer-Centric Solutions,
            <br>
            Empowered by Innovation.</center></h1>
        
<div class="laptop">
    
    <img class='report' src="http://mlamannadev.com/Images/Report1.png"/>
    
    <img class='report' src="http://mlamannadev.com/Images/Report2.png"/>
    
    <img class='report' src="http://mlamannadev.com/Images/Report3.png"/>

    <img class='report' src="http://mlamannadev.com/Images/Report2.png"/>
    
  </div>
    </body>
</html>

【问题讨论】：

把img标签放在一个锚标签里面，把href放在锚上。 <a href="#"><img src="..." /></a>
将图片放入链接中，查看w3schools.com/tags/tryit.asp?filename=tryhtml_link_image
欢迎来到 StackOverflow，mlamanna！将来，如果您提供您已经尝试过的代码示例以及您得到的结果，您将获得最好的结果。
刚刚添加的代码
这已经被建议了。试试这个：<a href="http://your/site.com"><img class='report' src="http://mlamannadev.com/Images/Report1.png"/></a>

标签： html image class href

【解决方案1】：

正如其他人在 cmets 中提到的，您希望将图像包围在锚点 <a> 标记中，并将 href 属性应用于锚点标记，就像使用普通超链接一样。

这是直接来自 Carlton 提到的 W3 学校链接的代码。

<p>
    An image as a link: 
    <a href="https://www.w3schools.com">
        <img border="0" alt="W3Schools" src="logo_w3s.gif" width="100" height="100">
    </a>
</p>

【讨论】：

我前一阵子想通了，但忘了发帖：codepen.io/mclamanna/pen/ZKearq

【解决方案2】：

将<img> 标签放在<a> 标签内并提供href。

<a href="/link/to/site">
  <img src="" />
</a>

【讨论】：