How to make clickable gif and make it link to somewhere?

So I have an ambitious idea on something I want to do specifically and want to know the best way to carry it out or if it's even possible.

I want it so when I hover over one of the tabs it plays a gif animation (like some arrow or something) once then leaves it in that last frame (so it doesn't continuously loop then is clickable.

I doubt my code will be any help at all but I'll leave it here anyway (I know it's messy and that I should fix it but I'm sorta new to this.)

<!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

Solution

All you need to do to make an image clickable is to wrap the image in a hyperlink parent:

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

As for only allowing the link to be clickable after the animation has played, it would theoretically be possible through JavaScript, but I wouldn't recommend that. The only way to do it would be with a timeOut, and you would possibly encounter a state where the timing gets out of sync.

Instead of this, I would recommend using a sprite map instead of a GIF.

Hope this helps! :)