如何制作可点击的gif并将其链接到某处?
问题描述:
所以我有一个雄心勃勃的想法,我想专门做一件事,想知道实现它的最佳方式,或者甚至可能。如何制作可点击的gif并将其链接到某处?
我想它,所以当我将鼠标悬停在某个选项卡它起着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>
答
所有你需要做的,使图像点击是为了wr AP中的超链接父的形象:
<a href="http://www.google.com">
<img src="http://placehold.it/100">
</a>
至于只允许后,在动画播放时,它在理论上是可能通过JavaScript的链接点击,但我不会” t建议。唯一的方法是使用timeOut
,并且您可能会遇到时序不同步的状态。
取而代之的是,我建议使用精灵贴图代替GIF。
希望这会有所帮助! :)
答
如果没有javascript/jquery控件,你无法控制动画gif。
设有2图像,一个静态和一个动画和控制与jquery动画开始,这样的解决方案:Stop a gif animation onload, on mouseover start the activation
使用jquery插件是这样的:http://rubentd.com/gifplayer/
我没有不要以为使用精灵地图。这实际上是一个非常好的主意,我会在稍后尝试。谢谢! –
太棒了;乐意效劳!一旦你确认这可以解决你的问题,请不要忘记点击下面的灰色检查来将它标记为已接受**(https://*.com/help/someone-answers)投票按钮 - 这会将其从“未答复的问题”队列中移除,并为问题提问者和问题答疑者授予声誉。询问任何问题后,您可以在15分钟内完成。当然,在说,你没有义务标记我的答案(或任何其他人)是正确的,但标记为已解决的问题有助于保持事情顺利进行:) –