Question

我尝试在幻灯片中制作图片的行为类似于链接，因此当用户点击图片时，它会将他们带到该网址。

幻灯片演示使用css动画制作。它基于此tutorial。

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

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

我正在寻求做同样的事情，但上面的回答似乎都没有效果。上面给出的示例已经将每个expect(response.body).to eq "{\"password_confirmation\":[\"doesn't match Password\",\"doesn't match Password\"],\"password\":[\"Password must contain 1 Uppercase alphabet 1 lowercase alphabet 1 digit and minimum 8 charecters\"]}"用锚包围。当我尝试使用唯一锚点包装每个图像时，只有定义的最后一个锚点有效。

Answer 4

在所有slide_images中添加锚标记以提供链接：

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

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

4 个答案: