Diapo+Transparence d'images

Diapo+Transparence d'images - HTML/CSS - Programmation

Marsh Posté le 01-06-2010 à 20:36:56    

Bonjour,
voilà, j'ai ajouté une zone de diapo sur mon site avec un effet d'opacité du passage d'image vers l'autre..
 
Voici mon code :

Code :
  1. <img alt="Diapo" title="Diapo" width="328" height="175" id="defilement1" src="images/Diapo/1.jpg" class="transpa0"/>
  2. <img alt="Diapo" title="Diapo" width="328" height="175" id="defilement2" src="images/Diapo/2.jpg" class="transpa100"/>


 
et le code javascript + css qui gére le tout :

Code :
  1. var coef = 0.05 ; // avancement de l'opacité
  2. var temps = 50 ; // temps entre chaque changement d'opacité
  3. var temps_pause = 2000 ; // temps d'attente entre 2 changements d'images
  4. var nombre_image = 5 ; // nombre d'images a faire bouger
  5. var prefix_image = 'images/Diapo/'; // chemin + prefix du nom des images
  6. var suffix_image = '.jpg' ; // suffix + '.extension' du nom des images
  8. // pas touche
  9. var indice = 2; // les 2 premiere image sont deja charger dans le HTML, on commence a la 3eme
  10. var isIE = navigator.userAgent.toLowerCase().indexOf('msie')!=-1 ;
  11. var img1 = null;
  12. var img2 = null;
  13. var sens = 1;
  14. var tabImg;  // tab contenant les images
  16. function prechargerImg(){
  17.   tabImg = new Array(nombre_image);
  18.   for (i=0; i<=nombre_image -1; i++){
  19. tabImg[i]=new Image();
  20. tabImg[i].src = prefix_image+(i+1)+suffix_image;
  21.   }
  22. }
  24. function init()
  25. {
  26. img1 = document.getElementById("defilement1" ) ;
  27. img2 = document.getElementById("defilement2" ) ;
  29. prechargerImg();
  30. change_opacity();
  31. }
  33. function change_opacity()
  34. {
  35. var opacity1 = 0 ;
  36. var opacity2 = 0 ;
  37. if (isIE)  // for IE
  38. { opacity1 = parseFloat(img1.filters.alpha.opacity);
  39.  opacity2 = parseFloat(img2.filters.alpha.opacity);
  40. }
  41. else       // for mozilla
  42. { opacity1 = parseFloat(img1.style.MozOpacity);
  43.  opacity2 = parseFloat(img2.style.MozOpacity);
  44. }
  46. if (sens)
  47. { if (isIE)  // for IE
  48.  { img1.filters.alpha.opacity = opacity1 + coef * 100;
  49.   img2.filters.alpha.opacity = opacity2 - coef * 100;
  50.  }
  51.  else // for Mozilla
  52.  { img1.style.MozOpacity = opacity1 + coef;
  53.   img2.style.MozOpacity = opacity2 - coef;
  54.  }
  55. }
  56. else
  57. {
  58.  if (isIE)  // for IE
  59.  { img1.filters.alpha.opacity = opacity1 - coef * 100;
  60.   img2.filters.alpha.opacity = opacity2 + coef * 100;
  61.  }
  62.  else // for Mozilla
  63.  { img1.style.MozOpacity = opacity1 - coef;
  64.   img2.style.MozOpacity = opacity2 + coef;
  65.  }
  66. }
  68. if (isIE)  // for IE
  69. { opacity1 = parseFloat(img1.filters.alpha.opacity);
  70.  opacity2 = parseFloat(img2.filters.alpha.opacity);
  71. }
  72. else       // for mozilla
  73. { opacity1 = parseFloat(img1.style.MozOpacity);
  74.  opacity2 = parseFloat(img2.style.MozOpacity);
  75. }
  77. // on fait varié le sens d'opacité du bazar
  78. if (opacity2  <= 0)
  79. { img2.src=tabImg[indice++].src;
  80.  sens = 0;
  81.  if (indice == (tabImg.length)) indice=0;
  82.  window.setTimeout("change_opacity()",temps_pause) ; // attente
  83.  return 0;
  84. }
  85. else if (opacity1 <= 0)
  86. { img1.src=tabImg[indice++].src;
  87.  sens = 1;
  88.  if (indice == (tabImg.length)) indice=0;
  89.  window.setTimeout("change_opacity()",temps_pause) ; // attente
  90.  return 0;
  91. }
  92. window.setTimeout("change_opacity()",temps) ; // recursion toutes les x millisec
  93. }


Css :

Code :
  1. .transpa0 {filter:Alpha(opacity=0, finishopacity=0, style=2);-moz-opacity:0; -khtml-opacity:0; opacity:0; margin:25px;}
  2. .transpa100 {filter:Alpha(opacity=100, finishopacity=0, style=2);-moz-opacity:1; -khtml-opacity:1; opacity:1; position:absolute; margin:25px;}


Sous ie8 avec affichage de compatibilité activé cela fonctionne trés bien, mais pas avec les autres navigateurs.
Je cherche depuis un moment, mais sans succès. est-ce que cela a quelque chose a avoir avec getElementById ? (ligne 26-27)

Reply

Marsh Posté le 01-06-2010 à 20:36:56   

Reply

Marsh Posté le 02-06-2010 à 00:20:06    

Je ne pas certain que img1.style.MozOpacity soit dispo encore. T'as essayé avec img1.style.opacity plutot (qui est standard) ?

Message cité 1 fois

---------------
We deserve everything that's coming...
Reply

Marsh Posté le 02-06-2010 à 01:48:17    

SICKofitALL a écrit :

Je ne pas certain que img1.style.MozOpacity soit dispo encore. T'as essayé avec img1.style.opacity plutot (qui est standard) ?


cela ne change rien... on verra cela demain... bonne nuit

Reply

Marsh Posté le 02-06-2010 à 13:07:44    

tu as une erreur ou qqch dans la console ?
Sinon ton parseFloat renvoit NaN pour la propriété en question, essayes en initialisant l'opacity pour les images avant de les manipuler.


---------------
We deserve everything that's coming...
Reply

Marsh Posté le 02-06-2010 à 13:49:54    

non je n'ai pas de message d'erreur. j'ai juste la première image et rien d'autre, pas de diapo d'images avec effet de transparence de passage de l'une vers l'autre...

Reply

Marsh Posté le 02-06-2010 à 14:07:18    

tu as regardé du coté du parseFloat ?
En reprennant ton code et en lui assignant la valeur de 1 ou 0 (ou 100 ou 0) selon l'images si le parseFloat revoit NaN (par défaut, image.style.opacity est vide, il faut utiliser soit un style "inline" (attribut 'style') soit récupérer le "Computed Style" de l'element.
Au passage, ton code est executé comment ? Via le onload ?
Et tu debug avec quoi ?

Message cité 1 fois
Message édité par SICKofitALL le 02-06-2010 à 14:07:35

---------------
We deserve everything that's coming...
Reply

Marsh Posté le 02-06-2010 à 14:33:28    

SICKofitALL a écrit :

tu as regardé du coté du parseFloat ?
En reprennant ton code et en lui assignant la valeur de 1 ou 0 (ou 100 ou 0) selon l'images si le parseFloat revoit NaN (par défaut, image.style.opacity est vide, il faut utiliser soit un style "inline" (attribut 'style') soit récupérer le "Computed Style" de l'element.
Au passage, ton code est executé comment ? Via le onload ?
Et tu debug avec quoi ?


Non pas regardé à parseFloat... et je n'ai pas bien saisi quand tu dis initialiser l'opacity pour les images???
 
- le code est executé via <body onload="init();">
 
- qu'est-ce que tu veux dire par debug ?
 
(au passage, juste pour te dire que je suis un débutant pour la création de site :sweat: )

Message cité 1 fois
Reply

Marsh Posté le 02-06-2010 à 15:32:22    

recep a écrit :


Non pas regardé à parseFloat... et je n'ai pas bien saisi quand tu dis initialiser l'opacity pour les images???
 
- le code est executé via <body onload="init();">
 
- qu'est-ce que tu veux dire par debug ?
 
(au passage, juste pour te dire que je suis un débutant pour la création de site :sweat: )


 
J'ai repris ton code et modifié un peu pour que ca fonctionne sous autre chose que IE.
Ce code n'est pas à 100% fonctionnel (et potentiellement buggé sur autre chose que FF :D) mais je pense que ca devrait te donner une idée de la méthodologie (note au passage que les images et leurs chemins associés ne sont forcément plus les mêmes que chez toi, cf les balises IMG en bas du code et le tableau _maliste) :

Code :
  1. <html>
  2. <head>
  3. <style>
  4.  .transpa0 {
  5.   opacity:0;
  6.   filter: Alpha (opacity=0);
  7.   -moz-opacity: 0;
  8.   -khtml-opacity: 0;
  9.   position: relative;
  10.   left: -256px;
  11.  }
  12.  .transpa100 {
  13.   opacity: 1;
  14.   filter: Alpha(opacity=100);
  15.   -moz-opacity: 1;
  16.   -khtml-opacity: 1;
  17.  }
  18. </style>
  19. <script>
  20.  var temps = 50,
  21.   temps_pause = 2000,
  22.   nombre_image = 4,
  23.   prefix_image = '',
  24.   suffix_image = '.jpg',
  25.   indice = 2,
  26.   isIE = navigator.userAgent.toLowerCase ().indexOf ('msie') != -1,
  27.   coef = (isIE ? 5 : 0.05),
  28.   img1 = null,
  29.   img2 = null,
  30.   sens = 1,
  31.   opacityInit = (isIE ? 100 : 1),
  32.   tabImg = [],
  33.   _maliste = ['hoff.jpg', 'ga.jpg', 'boisBlanc.png', 'marbre.png']; // array perso pour que je puisse tester chez moi
  36.  // -----------------------------------------------------------------------------------------
  37.  function prechargerImg ()
  38.   {
  39.    for (var i = 0, img; i < nombre_image; i++)
  40.    {
  41.     img = new Image ();
  42.     img.src = _maliste[i];
  43.     img.className = "transpa0";
  44.     tabImg.push (img);
  45.    }
  47.    img1 = document.getElementById ("defilement1" );
  48.    img2 = document.getElementById ("defilement2" );
  49.    indice = 1;
  50.   };
  53.  // -----------------------------------------------------------------------------------------
  54.  function init()
  55.   {
  56.    prechargerImg ();
  57.    change_opacity ();
  58.   };
  60.  // -----------------------------------------------------------------------------------------
  61.  function change_opacity ()
  62.   {
  63.    var sImg1 = (isIE ? img1.filters.alpha : img1.style),
  64.     sImg2 = (isIE ? img2.filters.alpha : img2.style),
  65.     opacity1 = (isNaN (parseFloat (sImg1.opacity)) ? opacityInit : parseFloat (sImg1.opacity)),
  66.     opacity2 = (isNaN (parseFloat (sImg2.opacity)) ? 0 : parseFloat (sImg2.opacity)),
  67.     c = coef * sens,
  68.     o1 = opacity1 - c,
  69.     o2 = opacity2 + c;
  71.    sImg1.opacity = o1;
  72.    sImg2.opacity = o2;
  74.    if (o2 >= opacityInit || o2 <= 0)
  75.    {
  76.     indice++;
  77.     indice %= nombre_image;
  78.     if (sens > 0)
  79.     {
  80.      img1.src = tabImg[indice].src;
  81.     }
  82.     else
  83.     {
  84.      img2.src = tabImg[indice].src;
  85.     }
  86.     sens = -sens;
  88.     setTimeout (change_opacity, temps_pause);
  89.     return;
  90.    }
  91.    setTimeout (change_opacity, temps);
  92.   };
  94.  window.onload = function ()
  95.   {
  96.    setTimeout (init, temps_pause);
  97.   };
  98. </script>
  99. </head>
  100. <body>
  101. <img alt="Diapo" title="Diapo" width="256" height="256" id="defilement1" src="hoff.jpg" class="transpa100" />
  102. <img alt="Diapo" title="Diapo" width="256" height="256" id="defilement2" src="ga.jpg" class="transpa0" />
  103. </body>
  104. </html>


 
Pour la partie debug, cherche l'extension Firebug pour Firefox. Pour les développer web (surtout en ce qui concerne le javascript) c'est assez pratique, voir indispensable ;)
 
[:_edit]
j'ai mis à jour (ce code ainsi que la version online : http://www.site-escape.com/taf/hfr/hfr5.html ), ca fonctionne sous IE aussi à présent :)

Message cité 1 fois
Message édité par SICKofitALL le 02-06-2010 à 15:42:22

---------------
We deserve everything that's coming...
Reply

Marsh Posté le 02-06-2010 à 15:36:05    

J'ai uploadé la chose avec mes images à moi : http://www.site-escape.com/taf/hfr/hfr5.html
 
Au passage le préchargement des images ne vaut pas grand chose en l'état, car il n'attend pas avant de lancer le script qu'elles soient vraiment chargées (ou déclarées comme tel). En fait pour l'instant ca se content de les mettre au fur et à mesure en cache, donc potentiellement il faut faire qq F5 (rafraichir) avant que le script soit "visible".


---------------
We deserve everything that's coming...
Reply

Marsh Posté le 02-06-2010 à 16:06:42    

ok, je vais jetter un coup d'oeil à tout cela, un grand merci !

Reply

Marsh Posté le 02-06-2010 à 16:06:42   

Reply

Marsh Posté le 01-01-2012 à 08:58:29    

SICKofitALL a écrit :


 
J'ai repris ton code et modifié un peu pour que ca fonctionne sous autre chose que IE.
Ce code n'est pas à 100% fonctionnel (et potentiellement buggé sur autre chose que FF :D) mais je pense que ca devrait te donner une idée de la méthodologie (note au passage que les images et leurs chemins associés ne sont forcément plus les mêmes que chez toi, cf les balises IMG en bas du code et le tableau _maliste) :
[:_edit]
j'ai mis à jour (ce code ainsi que la version online : http://www.site-escape.com/taf/hfr/hfr5.html ), ca fonctionne sous IE aussi à présent :)


 
tres bon code !!! ca marche. :)  
 
si je veux maintenant afficher sur chacune des 4 photos, pendant le "temps_pause" une autre photo (plus petite) superposer sur la photo de fond. cette petite photo dois apparaitre et disparaitre en fondu. chacune des 4 photo initiale a sa petite photo specifique.
j'ai esaye plusieur chose sur le code mais cela ne donne pas le resultat voulu.
 
merci pout ton aide    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed