如何超鏈接圖像

-4

我想超鏈接圖像，但我如何添加一個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>

來源

2017-04-19 mlamanna

將img標籤放入錨標籤中，並將href放置在錨上。 ''把 – csmckelvey

圖像的鏈接裏面，看看https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_link_image – Carlton

歡迎StackOverflow上，mlamanna！將來，如果您提供了一個已經嘗試過的代碼樣本，以及您獲得了什麼結果，您將獲得最佳結果。 – DWRoelands

廣場的<a>標籤內的<img>標籤，並提供href。

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

來源

2017-04-19 16:25:35 nikamanish

正如在評論中提到別人要圍繞圖像中的錨<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>

來源

2017-04-19 16:25:41 abourne

我想通了前一段時間，但忘了崗位：https://codepen.io/mclamanna/pen/ZKearq – mlamanna

如何超鏈接圖像

回答

相關問題