title: How to make clickable gif and make it link to somewhere?
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>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.) </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en-US"&gt;
  &lt;html&gt;
  &lt;style&gt;
  
  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;   
  }
  
  
  &lt;/style&gt;
  &lt;head&gt;
  &lt;title&gt; The Project &lt;/title&gt;
  &lt;link rel="shortcut icon" href="images/favicon.ico"/&gt;
  
  &lt;span class="mainbar"&gt;
  &lt;a href="Homepage.html"&gt;
  &lt;img src="images/Temp Text Logo.png" alt="Main Logo" style=";border:0;"&gt;
  &lt;/a&gt;
  &lt;/span&gt;
  
  &lt;Span class="twitter"&gt;
  &lt;a href="https://www.twitter.com"target="_blank"&gt;
  &lt;img src="images/twitter.png" alt="twitter page" 
  style="width:50px;height50px:;border:0;"&gt;
  &lt;/a&gt;
  &lt;/span&gt;
  
  &lt;Span class="instagram"&gt;
  &lt;a href="https://www.instagram.com"target="_blank"&gt;
  &lt;img src="images/instagram.png" alt="instagram page" style=";border:0;"&gt;
  &lt;/a&gt;
  &lt;/span&gt;
  
  &lt;Span class="facebook"&gt;
  &lt;a href="https://www.facebook.com"target="_blank"&gt;
  &lt;img src="images/facebook.png" alt="facebook page" style=";border:0;"&gt;
  &lt;/a&gt;
  &lt;/span&gt;
  
  &lt;span class="bar"&gt;
  &lt;img src="images/bar.png" alt="bar" style=";border:0;"&gt;
  &lt;/a&gt;
  &lt;/span&gt;
  
  &lt;span class="text"&gt;
  &lt;a href="about.html"&gt;
  &lt;img src="images/about.png" alt="about" style=";border:0;"&gt;
  &lt;/a&gt;
  &lt;/span&gt;
  
  &lt;span class="text"&gt;
  &lt;a href="shop.html"&gt;
  &lt;img src="images/shop.png" alt="shop" style=";border:0;"&gt;
  &lt;/a&gt;
  &lt;/span&gt;
  
  &lt;span class="text"&gt;
  &lt;a href="Homepage.html"&gt;
  &lt;img src="images/home.png" alt="Home" style=";border:0;"&gt;
  &lt;/a&gt;
  &lt;/span&gt;
  
  &lt;/head&gt;
  
  
  
  &lt;body&gt;
  &lt;hr&gt;
  &lt;/hr&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/DqotJ.png" rel="nofollow noreferrer">Tab example pic</a></p>