如何在此纯 HTML/CSS 幻灯片上添加指向每个图像的链接？

Question

我正在尝试使幻灯片中的图像表现得像链接，因此当用户单击图像时，它会将它们带到该 url。

幻灯片是使用 css 动画制作的。 它基于本教程。

正如你所看到的，我已经尝试将它包装在一个标签中，但这不起作用，我认为动画正在影响图像作为链接工作的能力......

我的 HTML

<div class="slideshow">
 <figure> 
  <img src="c5.jpg" width="484" height="330" /> 
 </figure> 
 <figure> 
  <img src="14.jpg" width="484" height="330" /> 
 </figure> 
 <figure> 
  <a href="c3.html"><img src="c3.jpg" width="484" height="330"/></a>
 </figure>
 <figure> 
   <img src="c2.jpg" width="484" height="330" /> 
 </figure> 
 <figure> 
   <a href="c12.html"><img src="12.png" width="484" height="330" /></a>
 </figure> 
</div>

我的一些 CSS：

.slideshow figure:nth-child(1) {
-webkit-animation: goldfade 20s 16s  infinite;
-moz-animation: goldfade 20s 16s  infinite;
-ms-animation: goldfade 20s 16s infinite;
animation: goldfade 20s 16s infinite;
}

.slideshow figure:nth-child(2) {
-webkit-animation: goldfade 20s 12s infinite;
-moz-animation: goldfade 20s 12s infinite;
-ms-animation: goldfade 20s 12s infinite;
animation: goldfade 20s 12s infinite;
}

@-webkit-keyframes "goldfade" {
0% {
 filter: alpha(opacity=100);
 opacity: 1;
}

18% {
filter: alpha(opacity=100);
opacity: 1;
}

20% {
filter: alpha(opacity=0);
opacity: 0;
}

96% {
filter: alpha(opacity=0);
opacity: 0;
}

100% {
filter: alpha(opacity=100);
opacity: 1;
} 
}

Answer 1

用锚标记包装图像标签并提供所需链接的 href 属性。然后您的图像将像一个链接一样。这可能符合您的目的

<a href='....your link...'>
    <img src='imageName.png'>
</a>

Answer 2

如果您尝试打开图像，请将 href 更改为 img 的 src 属性：

<a href="c13.jpg">
    <img src="c13.jpg">
</a>

Answer 3

我正在寻求做同样的事情，但上面的答案似乎都不起作用。 上面给出的示例已经将每个<img>用一个锚点包围起来。 当我尝试用唯一的锚点包装每个图像时，只有最后一个定义的锚点有效。

Answer 4

在所有滑块图像中添加锚标记以提供链接：

<a href='link of page that you want to open'>
    <img src='image.jpg'>
</a>