Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1518 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Diapo+Transparence d'images

 
 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Diapo+Transparence d'images

n°1998117
recep
Posté le 01-06-2010 à 20:36:56  profilanswer
 

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)

mood
Publicité
Posté le 01-06-2010 à 20:36:56  profilanswer
 

n°1998186
SICKofitAL​L
Razoreater
Posté le 02-06-2010 à 00:20:06  profilanswer
 

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

---------------
"And at the end it is only YOU, ME AND THE VIOLENCE !"
n°1998202
recep
Posté le 02-06-2010 à 01:48:17  profilanswer
 

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

n°1998325
SICKofitAL​L
Razoreater
Posté le 02-06-2010 à 13:07:44  profilanswer
 

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.


---------------
"And at the end it is only YOU, ME AND THE VIOLENCE !"
n°1998341
recep
Posté le 02-06-2010 à 13:49:54  profilanswer
 

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

n°1998349
SICKofitAL​L
Razoreater
Posté le 02-06-2010 à 14:07:18  profilanswer
 

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

---------------
"And at the end it is only YOU, ME AND THE VIOLENCE !"
n°1998371
recep
Posté le 02-06-2010 à 14:33:28  profilanswer
 

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
n°1998410
SICKofitAL​L
Razoreater
Posté le 02-06-2010 à 15:32:22  profilanswer
 

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

---------------
"And at the end it is only YOU, ME AND THE VIOLENCE !"
n°1998414
SICKofitAL​L
Razoreater
Posté le 02-06-2010 à 15:36:05  profilanswer
 

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


---------------
"And at the end it is only YOU, ME AND THE VIOLENCE !"
n°1998432
recep
Posté le 02-06-2010 à 16:06:42  profilanswer
 

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

mood
Publicité
Posté le 02-06-2010 à 16:06:42  profilanswer
 

n°2118903
jsyak
Posté le 01-01-2012 à 08:58:29  profilanswer
 

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    


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Diapo+Transparence d'images

 

Sujets relatifs
Stocker images et .zip dans une BD via PHPSelection d'images dans document word
Recherche Javascript défilement imagesImages en fonction d'un numéro
images de fond trois colonnes de même hauteurModule de news en diapo d'images
[RESOLU] [JS] Echanger deux imagesScript java zoom d'images
Squelettisation sur des images 2D 
Plus de sujets relatifs à : Diapo+Transparence d'images

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.079 secondes

Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR