Как сделать гиперссылку на изображение

Я хотел бы гиперссылку на изображение, но как мне добавить 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>

Источник

3 ответа

Поместите <img> тег внутри <a> пометить и предоставить href,

<a href="/link/to/site">
  <img src="" />
</a>
Источник

Как и другие, упомянутые в комментариях, вы хотите окружить изображение в якоре <a> отметьте и примените атрибут href к тегу привязки, как если бы вы использовали обычную гиперссылку.

Это код непосредственно из ссылки на 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>
Источник

Чтобы сделать гиперссылку на изображение, вы можете использовать HTML-тег a с атрибутом href и обернуть его вокруг тега img для изображения. Вот пример:<a href="https://www.example.com"><img src="image.jpg" alt="Description of the image"></a>

Источник
Другие вопросы по тегам