Animation gif au passage de souris
Résolu
JCBL
Messages postés
7
Statut
Membre
-
spip93 Messages postés 60 Statut Membre -
spip93 Messages postés 60 Statut Membre -
Bonjour,
j ai une petite requete qui a du etre un jour aborder mais je n ia pas trouve sur le forum bien qu ayant chercher.
Je possede un Gif animé (réalise a partir d image J) dans une page xhtml que je voudrais activer uniquement quand la souris passe dessus.
J ai trouve des solutions en css ou 1 image statique est decalé ou des applets java qui change l image..
moi je cherche une solution html ou css qui me permet de faire cela (si c est possble cela va de soit)
merci pour votre reponse
JC
j ai une petite requete qui a du etre un jour aborder mais je n ia pas trouve sur le forum bien qu ayant chercher.
Je possede un Gif animé (réalise a partir d image J) dans une page xhtml que je voudrais activer uniquement quand la souris passe dessus.
J ai trouve des solutions en css ou 1 image statique est decalé ou des applets java qui change l image..
moi je cherche une solution html ou css qui me permet de faire cela (si c est possble cela va de soit)
merci pour votre reponse
JC
Configuration: Windows XP Firefox 3.0.1
A voir également:
- Souris gif animé
- Comment activer le pavé tactile sans souris - Guide
- Souris informatique - Guide
- Gif animé en ligne - Guide
- Gif mp4 - Guide
- Pointeur souris - Guide
4 réponses
Juste pour information, il est aussi possible de le faire en CSS :
(J'utilise une balise lien, car IE6 ne comprend pas la proprété :hover sur autre chose que les liens.)
<style>
.hovergif {
background: url(images/image_statique.gif) no-repeat;
height: Xpx;
width: Ypx;
}
.hovergif:hover {
background: url(images/image_animee.gif) no-repeat;
}
</style>
(...)
<a class="hovergif"></a>
(J'utilise une balise lien, car IE6 ne comprend pas la proprété :hover sur autre chose que les liens.)
Une image animée, l'autre non animée et après il suffit de faire ...
Oui, d'accord, mais où mettre ce code? entre quelles balises?...
De plus, je vois que ça date de 2008... ces codes sont-ils toujours d'actualité?
Oui, d'accord, mais où mettre ce code? entre quelles balises?...
De plus, je vois que ça date de 2008... ces codes sont-ils toujours d'actualité?
Tu doit metre la partie
et le code, tu le met ou tu veut
de Xil, entre les balises <head></head>
<style>
.hovergif {
background: url(images/image_statique.gif) no-repeat;
height: Xpx;
width: Ypx;
}
.hovergif:hover {
background: url(images/image_animee.gif) no-repeat;
}
</style>
et le code, tu le met ou tu veut
Zorloni Maxime
<a class="havergif"></a>
Cependant, j'ai un petit soucis : l'animation ne se lance pas immédiatement. La première fois, il faut que la souris reste un moment sur mon bouton (2-3 sec) pour qu'elle se lance. Ensuite, elle se lance immédiatement.
Savez-vous pourquoi ?
Je pense que c'est lié au poids de l'image GIF (il faut le temps au navigateur pour la charger), cependant, elle n'est pas si lourde (340 Ko)
En tout cas merci encore
P.S : Perso, si je peux me permettre d'être tatillon, entre la dernière guillemet (") et la balise (>) , j'ai mis des balises title="" et alt=""