如何在此純 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>