Discussion :

[Antipod]

Bonjour,
J'ai conçu une petite animation en gif animé à partir de photos. Je ne veux pas qu'il tourne une boucle, mais j'aimerais que l'on puisse le relancer en cliquant dessus.
Précisions :
-mon gif pèse presque 500ko et idéalement il ne faudrait pas avoir à le recharger
-je n'ai pas de quoi produire du flash, je suppose que serait intéressant pour mon cas ?

Qui a une solution html ou js ?
Ou bien que me suggérez-vous, notamment en terme de poids ?

Vous pouvez voir le gif provisoire (aspect et couleurs ok pour moi):
http://www.aventure-pulsion.nc/img/demofrite.gif

Merci d'avance

[Eusebius]

En Javascript tu devrais arriver à faire quelque chose dans le genre :
Quand tu cliques sur l'image gif animée, tu la changes pour une image statique. Quand tu re-cliques, tu remets le gif animé.
Ca répondrait à ton problème ?

[Antipod]

Effectivement, je pourrais me débrouiller avec ça, et ça me permettrait d'ajouter un message en début et fin de séquence (on fait la promo du "kayak à emporter")
Alors... où je peux trouver la séquence javascript ?

Merci d'avance,
Je serai absent une journée, pas d'inquiétude si je reste muet !

Sinon pour mon info, quelle solution serait idéale ? Flash, autre ? parceque 460ko...

[Antipod]

Bien, je vais devoir me débrouiller... C'est vrai qu'un script qui change une image sur clic, c'est sûrement pas compliqué à trouver...
Merci tout de même de l'aiguilage.

[Auteur]

Bien, je vais devoir me débrouiller... C'est vrai qu'un script qui change une image sur clic, c'est sûrement pas compliqué à trouver...
Merci tout de même de l'aiguilage.

tu peux t'inspirer des roll-over :
JS (au bug près)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
var anim=false;
function animImg(obj)
{
  if (anim==false)
  {
     obj.src="imageAnimee.gif"
     anim=true;
  }
  else
  {
     obj.src="imageStatique.jpg";
     anim=false;
  }
}

HTML :

Code :

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

1
2
 
<img id="img1" src="imageStatique.jpg" onclick="animImg(this)">

seul impératif que les deux images aient les même dimensions.

[Antipod]

Impécable!
Je vais maintenant essayer de faire précharger mon gif animé, qui est un peu lourd, le visiteur gagnera quelques précieuses secondes...

Merci Auteur !