如何超链接图像

Question

我想超链接图像，但如何向图像添加

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>

Answer 1

将

<img>

标签放入

<a>

标签内并提供

href

。

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

Answer 2

正如其他人在评论中提到的，您希望将图像包围在锚点

<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>

Answer 3

要超链接图像，您可以使用带有 href 属性的 HTML a 标签，并将其包裹在图像的 img 标签周围。这是一个例子：

<a href="https://www.example.com"><img src="image.jpg" alt="Description of the image"></a>

Answer 4

有两种方法可以实现这一目标！

方法1：使用锚标记

用锚标签
```
<img>
```
元素包裹
```
<a>
```
标签。
在开始的
```
<a>
```
标签中，添加
```
href
```
属性，后跟要链接到的 URL（用引号引起来）。

这是修改后的代码：

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

方法2：使用CSS（用于背景图像）

如果您要链接的图像使用 CSS 设置为背景图像，您可以在锚标记中使用

background-image

属性。

以下是修改 CSS 的方法：

.laptop {
  /* Existing styles */
  background-image: url('http://mlamannadev.com/Images/Laptop2.png');
  cursor: pointer;  /* Add cursor pointer for hover effect */
}

.laptop a {  /* Wrap the styles within an anchor tag */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;  /* Set width and height to cover the entire element */
  height: 100%;
  opacity: 0;  /* Make the element invisible initially */
}

.laptop:hover a {  /* Change opacity on hover to show link functionality */
  opacity: 0.7;  /* Adjust opacity as desired */
}

补充说明：

请记住将“your_desired_link”替换为您要链接到的实际 URL。
您可以向
```
title
```
标签添加
```
<a>
```
属性，以提供将鼠标悬停在图像上时显示的描述性文本。

我希望这有帮助！

如何超链接图像

问题描述投票：0回答：4

4个回答

最新问题

如何超链接图像

问题描述 投票：0回答：4

4个回答

最新问题

问题描述投票：0回答：4