Question

我使用下面的代码创建了一个图像但是我需要添加一个链接到它，在单击图像时在新选项卡中打开。我试过搜索其他帖子，但我找不到“图像悬停”和“链接”的确切组合。我很感激你的帮助。

这是悬停代码

<!DOCTYPE html> 
<html > 
<head> 
<style type="text/css"> 
.pic{ 
      width:16px; 
      height:16px; 
      opacity: 1; 
      filter: alpha(opacity=100); 
      background: url(http://i.picresize.com/images/2014/10/12/QmCgI.png) no-repeat;
} 
.pic:hover 
{ 
      opacity: 0.3; 
      filter: alpha(opacity=30); } 
</style> 
</head> 
<body> 
      <div class="pic">
      </div> 
</body> 
</html>

Answer 1

像this?这样的内容在图片周围添加了一个链接，target="blank"属性强制在新标签页中打开链接

Answer 2

通过CSS类添加悬停。要通过单击图像打开新链接（在新选项卡中），请使用以下命令：

<img src="your image path" onclick="window.open('https://www.google.com')"/>random text

Answer 3

<强>尤里卡!!! 劳累之后，我终于做了一个粗略的（正确的）代码功能。我拿了一个我之前创建的文本链接，添加了我想要'src'的图像，将两个html代码放在编辑器上并开始添加和删除，直到hover和link同步。以下是最终代码，以防其他人发现它有用或使其更好。我是初学者，所以我对此感到非常兴奋。谢谢大家的回答。万岁编码!! ：）

<!DOCTYPE html> 
<html > 
<head> 
<style type="text/css"> 
.pic{ 
      width:15px; 
      height:15px; 
      opacity: 1; 
      filter: alpha(opacity=100); 
      background: url(//i.picresize.com/images/2014/10/12/QmCgI.png) no-repeat;
} 
.pic:hover 
{ 
      opacity: 0.3; 
      filter: alpha(opacity=30); } 
</style> 
</head> 
<body> 
      <div class="pic" 
      </div> 

 <style type="text/css" media="screen" />
</style> 

</head>
<body>

<p><b><a href="myfile.htm"><img src="//i.picresize.com/images/2014/10/12/QmCgI.png"></a></b></p>

</body>
</html>

图像悬停和链接组合

3 个答案: