11548 sujets

JavaScript, DOM et API Web HTML5

Rollover Animation de plusieurs Jpg

Bonjour,

J'ai beau chercher sur le net, je ne trouve pas ce que je veux.

Je dispose de plusieurs images en JPG

http://mon_site/images/image_0.jpg
http://mon_site/images/image_1.jpg
http://mon_site/images/image_2.jpg
http://mon_site/images/image_3.jpg
etc...

1. Ce que j'arrive à réaliser :

Lorsque je survole ma souris sur l'image_0, l'image_1 s'affiche à la place. Lorsque ma souris quitte l'image, l'image_0 s'affiche comme au début.


2. Ce que je souhaite réaliser :

Qu'à la place de l'image_1 seul s'affichent successivement à la suite, l'image_2 puis l'image_3 etc...

Bref faire une sorte d'animation GIF ou Flash mais avec du JPEG. Je sais que c'est possible (enfin j'espère). Mais comment ?


Je suis allé voir le code source par exemple de Dailymotion et je me suis rendu compte qu'ils le faisaient avec une seule image Jpg contenant déjà l'ensemble des images les unes en dessous des autres. Ce n'est pas ce que je souhaite, car je suis obligé de le réaliser en utilisant plusieurs images jpg différentes et pas l'ensemble contenu dans un seul jpg.

Une difficulté supplémentaire s'impose à moi. Je ne peux pas précharger les images en en-tête avant.

Enfin une autre difficulté (mais bon déjà si j'arrivais à le réaliser sans ces 2 difficultés en plus ça serait bien), mes liens images sont sous formes php comme cela :

Au lieu de :
src="http://mon_site/images/image_0.jpg"
src"http://mon_site/images/image_1.jpg"
etc...

j'ai :
src="<?php echo $v['thumbs'][0]; ?>"
src="<?php echo $v['thumbs'][1]; ?>"
etc...


Pour le 1. "ce que j'arrive à faire" voici mon code (sans PHP et code superflu) :

<a  onmouseover="change_0('thumb','http://mon_site/images/image_1.jpg');"  onmouseout="change_0('thumb','http://mon_site/images/image_0.jpg');" href="" title=""  >

<img  src="http://mon_site/images/image_0.jpg"  alt="" name="thumb" /></a>


<script language="Javascript">  
    function change_0(nom,fichier) { 
       if (document.images) document.images[nom].src=fichier
    } 
</script>



Et en complet avec PHP

<a  onmouseover="change_0('thumb<?php echo $v['id']; ?>','<?php echo $v['thumbs'][1]; ?>');"  onmouseout="change_0('thumb<?php echo $v['id']; ?>','<?php echo $v['thumbs'][0]; ?>');" class="dhtml_link img_live2" href="<?php echo $config['display']['home']; ?>" title="<?php echo str_replace('"', ' ', $v['title']); ?>"  onclick="document.getElementById('dhtml_img').src='<?php echo $v['thumbs'][0]; ?>';return false;">

<img class="img_live2" src="<?php echo $v['thumbs'][0]; ?>"  alt="<?php echo str_replace('"', ' ', $v['title']); ?>" name="thumb<?php echo $v['id']; ?>" /></a>


<script language="Javascript">  
    function change_0(nom,fichier) { 
       if (document.images) document.images[nom].src=fichier
    } 
</script>



PS : j'ai cherché une fonction jquery, mais je ne trouve pas la bonne. J'ai aussi essayé d'intégrer cette fonction javascript : http://florent.ourth.fr/lib/library-javascript-jpg-animation/ mais j'arrive pas à l'inclure dans le onmouseover
Modifié par Damien49 (13 Apr 2012 - 16:38)
Modérateur
Bonjour, le problème est le préchargement.

Une seule image est la bonne solution, Tu peux chercher à faire des preload en javascript, mais cela posera plein de problèmes que tu devras gérer.

Si tu ne crées pas les images toi-même, mais qu'elles viennent d'image uploadées par des utilisateurs par exemple, tu peux les coller via php et enregistrer le résultat bien au chaud.
Bon en fait je vais poser ma question différemment.

Est-ce que je peux intégrer cette fonction : 

var animQty = 0;
var anims = new Array();
var inc = 0;

function newAnim () {

  animNb = anims.length;
  anims[animNb] = new Array();
  for(var iImg = 0; iImg < arguments.length; iImg++) {
    anims[animNb][iImg] = new Image();
    anims[animNb][iImg].src = arguments[iImg];
  }
  document.write('<img name="anim'+ animNb +'" src="'+ arguments[0] +'" alt="anim'+ animNb +'" />');
}

function animates () {
  inc++;
  for(var iAnim = 0; iAnim < anims.length; iAnim++) {
    document["anim"+ iAnim].src = anims[iAnim][inc%anims[iAnim].length].src;
  }
}

setInterval(' animates();', 120);

/** example **/
// <script>
//   newAnim("path_images1.jpg", "path_images2.jpg", "path_images3.jpg", ...);
// </script>


disponible ici : http://florent.ourth.fr/lib/library-javascript-jpg-animation/

dans un onmouseover.

Avec ceci donc :

<a  onmouseover="change_0('thumb','http://mon_site/images/image_1.jpg');"  onmouseout="change_0('thumb','http://mon_site/images/image_0.jpg');" href="" title=""  >



<img  src="http://mon_site/images/image_0.jpg"  alt="" name="thumb" /></a>




<script language="Javascript">  

    function change_0(nom,fichier) { 

       if (document.images) document.images nom .src=fichier

    } 

</script>



En combinant les 2 ça donnerait l'effet désiré je crois. Mais je n'y arrive pas.
Modifié par Damien49 (13 Apr 2012 - 17:06)
Bon j'ai fini par trouver une solution intermédiaire grâce à du PHP. J'oublie le onmouseover et je passe par un bouton en dessous l'image qui active l'animation jpg en javascript.

Pas d'autres solutions compte tenu de mes 2 conditions (pas de préchargement en en-tête et lien image en PHP contenu dans une boucle foreach).

Et ça marche. Smiley ravi
Sujet clos
Aller à