Question

所以我对我想要做的事情抱有一个雄心勃勃的想法，想知道实现它的最佳方式，或者甚至可能。

我想要它，所以当我将鼠标悬停在其中一个标签上时，它会播放一个gif动画（如某些箭头或某物），然后将其留在最后一帧（因此它不会连续循环，然后可点击。

我怀疑我的代码会有任何帮助，但无论如何我都会留在这里（我知道它很乱，我应该修复它，但我对此不熟悉。）

<!DOCTYPE html>
<html lang="en-US">
<html>
<style>

head {
background-color: white;
}

span.mainbar {
display: inline-block;
margin-left:10px;
margin-top:3px; 
}

span.text {
display: inline-block;
float:right;
margin-right:25px;
margin-top: 27px;   
}

span.bar
{
display: inline-block;
float:right;
margin-right:25px;
margin-top: 20px;   
}  

span.facebook {
display: inline-block;
float:right;
margin-right:30px;
margin-top: 22px;   
}

span.instagram{
display: inline-block;
float:right;
margin-right:22px;
margin-top: 22px;   
}

span.twitter{
display: inline-block;
float:right;
margin-right:30px;
margin-top: 16px;   
}


</style>
<head>
<title> The Project </title>
<link rel="shortcut icon" href="images/favicon.ico"/>

<span class="mainbar">
<a href="Homepage.html">
<img src="images/Temp Text Logo.png" alt="Main Logo" style=";border:0;">
</a>
</span>

<Span class="twitter">
<a href="https://www.twitter.com"target="_blank">
<img src="images/twitter.png" alt="twitter page" 
style="width:50px;height50px:;border:0;">
</a>
</span>

<Span class="instagram">
<a href="https://www.instagram.com"target="_blank">
<img src="images/instagram.png" alt="instagram page" style=";border:0;">
</a>
</span>

<Span class="facebook">
<a href="https://www.facebook.com"target="_blank">
<img src="images/facebook.png" alt="facebook page" style=";border:0;">
</a>
</span>

<span class="bar">
<img src="images/bar.png" alt="bar" style=";border:0;">
</a>
</span>

<span class="text">
<a href="about.html">
<img src="images/about.png" alt="about" style=";border:0;">
</a>
</span>

<span class="text">
<a href="shop.html">
<img src="images/shop.png" alt="shop" style=";border:0;">
</a>
</span>

<span class="text">
<a href="Homepage.html">
<img src="images/home.png" alt="Home" style=";border:0;">
</a>
</span>

</head>



<body>
<hr>
</hr>
</body>

</html>

Tab example pic

Answer 1

要使图像可点击，您需要做的就是将图像包装在超链接父级中：

＆＃13;

<a href="http://www.google.com">
  <img src="http://placehold.it/100">
</a>

＆＃13;

至于只允许链接在动画播放后可点击，理论上它可以可能通过JavaScript，但我不建议这样做。唯一的方法是使用timeOut，您可能会遇到时间不同步的状态。

除此之外，我建议使用精灵地图而不是GIF。

希望这有帮助！：）

Answer 2

您无法在没有javascript / jquery控件的情况下控制动画gif。

使用2个图像，一个静态和一个动画，并使用jquery控制动画的开始，如此解决方案：Stop a gif animation onload, on mouseover start the activation
使用这样的jquery插件：http://rubentd.com/gifplayer/

如何制作可点击的gif并将其链接到某个地方？

2 个答案: