2017-09-26 19 views
1

J'ai donc une idée ambitieuse sur quelque chose que je veux faire spécifiquement et je veux savoir comment le réaliser ou si c'est possible.Comment faire gif cliquable et faire un lien vers quelque part?

Je veux quand je passe la souris sur un des onglets, il joue une animation GIF (comme une flèche ou quelque chose) une fois laisse alors dans ce dernier cadre (il ne boucle pas en continu est alors cliquable.

Je doute mon code sera une aide du tout, mais je laisse ici de toute façon (je sais qu'il est en désordre et que je devrais le réparer mais je suis sorta nouveau à ce sujet.)

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

Répondre

1

Tout ce que vous devez faire pour rendre une image cliquable est de ap l'image dans un parent de lien hypertexte:

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

Comme pour ne permet que le lien soit cliquable après que l'animation a joué, il serait théoriquement possible par JavaScript, mais je n » Je recommande cela. La seule façon de le faire serait avec un timeOut, et vous pourriez rencontrer un état où le timing est désynchronisé. Au lieu de cela, je recommanderais d'utiliser une carte d'image-objet à la place d'un fichier .GIF.

Espérons que cela aide! :)

+0

Je n Ne pense pas à utiliser une carte de sprite. C'est en fait une très bonne idée que je vais essayer plus tard. Merci! –

+0

Génial; heureux de vous aider! Une fois que vous avez confirmé que cela résout votre problème, s'il vous plaît ne pas oublier de [** marquer comme accepté **] (https://stackoverflow.com/help/someone-answers) en cliquant sur le chèque gris ci-dessous le boutons de vote - cela le supprime de la file d'attente 'Questions non répondues' et attribue la réputation à l'auteur de la question et au questionneur. Vous pourrez le faire 15 minutes après avoir posé n'importe quelle question. Bien sûr, en disant cela, vous n'êtes pas obligé de marquer ma réponse (ou celle de quelqu'un d'autre) comme correcte, bien que le fait de marquer une question comme résolue aide à garder les choses fluides. –