画像をハイパーリンクする方法

-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

プレイス<img><a>タグ内のタグと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

画像をハイパーリンクする方法

答えて

関連する問題