1

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

Chris.Le
  • 15
  • 1
  • 2
  • 6

2 Answers2

2

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

Obsidian Age
  • 39,491
  • 10
  • 44
  • 66
  • I didn't think to use a sprite map. That's actually a really good idea I'm gonna try it later. Thanks! – Chris.Le Sep 26 '17 at 01:36
  • Awesome; glad to help! Once you've confirmed that this solves your problem, please don't forget to [**mark it as accepted**](https://stackoverflow.com/help/someone-answers) by clicking on the grey check below the vote buttons -- this removes it from the 'Unanswered Questions' queue, and awards reputation to both the question asker and question answerer. You'll be able to do that 15 minutes after asking any question. Of course, in saying that, you are under no obligation to mark my answer (or anyone else's) as correct, though marking a question as resolved helps keep things flowing smoothly :) – Obsidian Age Sep 26 '17 at 01:42
0

You can't control animated gif without javascript/jquery control.

Germano Plebani
  • 3,331
  • 3
  • 26
  • 37