Discussion :

[Carpariath]

Bonjour à tous!
Pour simplifier le probleme j'aimerais activer la lecture (ou relecture) d'un gif animé qui ne tourne pas en boucle au passage de la souris sur celui-ci.
Ca n'est pas le hover qui me pose problème mais bien le gif animé!
En effet, les navigateurs (tous?) chargent le gif en cache, et ne le lisent qu'une fois. Ainsi, au passage du curseur de la souris, seule la dernière image du gif animé s'affiche.
J'aimerais bien savoir comment, sans JS si possible, s'il y avait un moyen de procéder à cette relecture du gif!

[mdr_cedrick]

A ma connaissance dans un logiciel de création de gif animé il est possible de paramétrer si l'on veut une seule boucle ou à l'infini
c'est peut-être de ce côté qu'il faudrait regarder

[Carpariath]

Non je ne veux pas de boucle, seulement une lecture (cf plus haut), mais une lecture qui se déclencherait à nouveau lors d'un certain évènement (passage de la souris sur le div)

[Halleck]

Pas à ma connaissance, et ça parait encore moins possible sans JS. Pourquoi pas en flash (et pourquoi pas de js ? C'est lu de loin par une très très très large majorité de navigateurs, comme le flash) ?

Il est en effet possible de définir la lecture du gif (unique / boucle), mais pas plus.

[mdr_cedrick]

je n'ai pas testé mais il est peut-être possible de faire quelque chose dans ce genre :
tu mets une image fixe en background de ton lien
et en css tu fais quelque chose dans ce genre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
a
{
   background-image:.... /*ton image fixe*/
}
a:hover
{
   background-image:.... /*ton gif animé*/
}

je ne garantie pas que ça fonctionne mais c'est à essayer

[Halleck]

je n'ai pas testé mais il est peut-être possible de faire quelque chose dans ce genre :
tu mets une image fixe en background de ton lien
et en css tu fais quelque chose dans ce genre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
a
{
   background-image:.... /*ton image fixe*/
}
a:hover
{
   background-image:.... /*ton gif animé*/
}

je ne garantie pas que ça fonctionne mais c'est à essayer

Justement, c'est ce que Carpariath dit dans son premier message : le gif est chargé dans la page et en cache. Quand on fait un hover l'image n'est pas rechargée, donc seule la dernière image du gif apparait...

[mdr_cedrick]

Justement, c'est ce que Carpariath dit dans son premier message : le gif est chargé dans la page et en cache. Quand on fait un hover l'image n'est pas rechargée, donc seule la dernière image du gif apparait...

ok ! je n'avais pas compris cela de cette manière

[laurentibus]

il te faut 2 image , une statique représentant le début du gif et l autre qui est le gif entier .... de cette facon la :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<img id="bouton1" src="image_statique.gif" onmouseover="this.src='image_qui_bouge.gif';"  onmouseout="this.src='image_statique.gif';" />

[Carpariath]

Oui c'est une solution, mais je prefererais eviter le JS. Au pire je renoncerai à le faire, en mettant un gif en boucle, même si c pas top...

[laurentibus]

mais je prefererais eviter le JS.Au pire je renoncerai à le faire, en mettant un gif en boucle, même si c pas top...

.... t as 2 événements.... c'est franchement pas énorme ... pour arriver au top comme tu dirais

[Halleck]

il te faut 2 image , une statique représentant le début du gif et l autre qui est le gif entier .... de cette facon la :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<img id="bouton1" src="image_statique.gif" onmouseover="this.src='image_qui_bouge.gif';"  onmouseout="this.src='image_statique.gif';" />

pas besoin de JS pour ça. Je ne sais plus qui a présenté il y a pas longtemps sur le forum une solution pour ça : suffit d'avoir deux images, un conteneur. Sur le survol de l'image, elle passe en display:none pour afficher l'autre image (le gif animé). Quand c'est plus survolé, le gif animé repasse en affichage initial (display:none) et le gif fixe de même (display:block).

Donc tu peux faire ça sans Javascript, en pur CSS.

Par contre, je persiste à dire que c'est un peu idiot car c'est se prendre la tête pour rien que de
- ne pas vouloir de JS
- ne pas vouloir de Flash ...

[Orgied]

Salut,

je ne suis pas sur que ca fonctionnera. Meme si le gif est en display: none; il sera dans le cache donc déjà lancé. Mais je me trompe peut être, je n'ai jamais essayé.

Mais effectivement, Flash est, à la base, prévu pour ce type de besoins...

[Halleck]

Salut,

je ne suis pas sur que ca fonctionnera. Meme si le gif est en display: none; il sera dans le cache donc déjà lancé. Mais je me trompe peut être, je n'ai jamais essayé.

Mais effectivement, Flash est, à la base, prévu pour ce type de besoins...

D'où la solution de laurentibus d'avoir un gif statique, ne contenant que la première image de l'animation

[Bovino]

je ne suis pas sur que ca fonctionnera. Meme si le gif est en display: none; il sera dans le cache donc déjà lancé. Mais je me trompe peut être, je n'ai jamais essayé.

Non, ça ne marchera pas... en revanche :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

onmouseover="this.src='image_qui_bouge.gif?'+Math.random();"

devrait le faire, mais c'est toujours du javascript !

[Carpariath]

En effet, le display : none ne marche pas... d'autres idées?
Non? Bon... va falloir que je me mette au JS alors
Pour répondre à toute cette "levée de boucliers" lorsque je dis préférer éviter le JS et le flash, c'est tout simplement parce qu'il peut arriver qu'ils ne soient pas activés chez le client, comme vous le savez.
J'entends déjà vos protestations... "oui mais chez 95% des navigateurs c'est ok" etc... n'empêche : on doit prévoir une version du site "au cas ou ca ne marchait pas". En gros : 2 fois plus de boulot pour quelques fioritures.
Me concernant, le jeu n'en vaut pas la chandelle... a moins de ne faire un site que en JS/Flash, de bout en bout, ou le client est forcé d'activer le JS. Pour ma part, j'ai mis l'accent sur la compatibilité et la simplicité, donc je préfère éviter ces solutions (qui sont, je le reconnais, très adaptées et très simples à mettre en œuvre pour ce type d'utilisation!)
Donc je pense (a moins qu'il y ait d'autres idées?) que je vais opter pour cette solution : si JS est activé, l'animation non bouclée s'affiche, sinon j'affiche l'animation en boucle.
Merci en tous cas pour votre aide!

[Bovino]

on doit prévoir une version du site "au cas ou ca ne marchait pas".

Tu as entièrement raison, ceci dit, les personnes qui désactivent javascript sont sensées savoir qu'elles auront moins de fonctionnalités sur un site et dans ton cas, avoir javascript désactivé ne gênera en rien la navigation...