Fatal编程技术网
  • html/
  • Html 如何制作可点击的gif并将其链接到某个地方？

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

html css

Html 如何制作可点击的gif并将其链接到某个地方？,html,css,gif,clickable-image,Html,Css,Gif,Clickable Image,因此，我有一个雄心勃勃的想法，我想做一些具体的事情，我想知道最好的方法来实现它，或者如果它是可能的 我希望这样，当我将鼠标悬停在其中一个选项卡上时，它会播放一个gif动画（如箭头或其他东西），然后将其保留在最后一帧中（因此它不会连续循环，然后可以单击） 我怀疑我的代码是否会有任何帮助，但无论如何我都会把它留在这里（我知道它很混乱，我应该修复它，但我对它有点陌生） 头{ 背景色：白色； } span.mainbar{ 显示：内联块； 左边距：10px； 利润上限：3倍； } span.text{

因此，我有一个雄心勃勃的想法，我想做一些具体的事情，我想知道最好的方法来实现它，或者如果它是可能的

我希望这样，当我将鼠标悬停在其中一个选项卡上时，它会播放一个gif动画（如箭头或其他东西），然后将其保留在最后一帧中（因此它不会连续循环，然后可以单击）

我怀疑我的代码是否会有任何帮助，但无论如何我都会把它留在这里（我知道它很混乱，我应该修复它，但我对它有点陌生）


头{
背景色：白色；
}
span.mainbar{
显示：内联块；
左边距：10px；
利润上限：3倍；
}
span.text{
显示：内联块；
浮动：对；
右边距：25px；
利润上限：27px；
}
跨距杆
{
显示：内联块；
浮动：对；
右边距：25px；
边缘顶部：20px；
}  
span.facebook{
显示：内联块；
浮动：对；
右边距：30px；
边缘顶部：22px；
}
span.instagram{
显示：内联块；
浮动：对；
右边距：22px；
边缘顶部：22px；
}
span.twitter{
显示：内联块；
浮动：对；
右边距：30px；
边缘顶部：16px；
}
项目

要使图像可单击，只需将图像包装在超链接父对象中：

没有javascript/jquery控件，您无法控制动画gif

  • 使用2个图像、一个静态和一个动画，并使用jquery控制动画的开始，如以下解决方案：

  • 像这样使用jquery插件：

我没有想过使用精灵地图。这确实是个好主意，我稍后会尝试。谢谢！太棒了；很高兴能提供帮助！一旦你确认这解决了你的问题，请不要忘记单击投票按钮下方的灰色复选框——这会将其从“未回答的问题”队列中删除，并为双方赢得声誉他向提问者和回答者提问。你可以在提出任何问题15分钟后这样做。当然，你没有义务将我的答案（或其他人的答案）标记为正确，尽管将问题标记为已解决有助于保持事情顺利进行：） 
<!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>