Déclenchement de la lecture d'un gif animé

Version imprimable

27/08/2008, 16h30
Carpariath

Déclenchement de la lecture d'un gif animé

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!
27/08/2008, 16h45
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
27/08/2008, 17h15
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)
27/08/2008, 17h24
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.
28/08/2008, 08h51
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:

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
28/08/2008, 09h34
Halleck
Citation:
Envoyé par 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:

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...
28/08/2008, 16h11
mdr_cedrick

Citation:

Envoyé par Halleck

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 :?
28/08/2008, 16h39
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:

<img id="bouton1" src="image_statique.gif" onmouseover="this.src='image_qui_bouge.gif';" onmouseout="this.src='image_statique.gif';" />
28/08/2008, 17h17
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...
29/08/2008, 09h56
laurentibus

Citation:

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

8O8O8O8O .... t as 2 événements.... c'est franchement pas énorme ... pour arriver au top comme tu dirais ;)
29/08/2008, 10h38
Halleck

Citation:

Envoyé par 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:

<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 ...
29/08/2008, 15h16
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...
29/08/2008, 15h46
Halleck

Citation:

Envoyé par 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...

D'où la solution de laurentibus d'avoir un gif statique, ne contenant que la première image de l'animation
29/08/2008, 16h06
Bovino

Citation:

Envoyé par Orgied

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:

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

devrait le faire, mais c'est toujours du javascript !
29/08/2008, 17h02
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!
29/08/2008, 18h02
Bovino

Citation:

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