Discussion :

[hellspawn_ludo]

Bonjour,

J'ai trouvé et ai adapté une fonction sur internet qui permet de jouer des images façon diaporama. Au moment du changement des images, il y a un effet de fondu.

Sous IE7, aucun problème de fonctionnement mais je ne peux pas en dire autant avec FF. En effet, après avoir joué la 1ère série des 3 images, mon indice (nommé : num) est réinitialisé afin de rejouer les photos mais au moment des transitions, il y a une sorte de saut d'image.

Voici mon code

SCRIPT

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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
 
 
TabImg = new Array;
 
// Nom des images jouées
TabImg[0] = 'Images/02aft.jpg'
TabImg[1] = 'Images/03aft.jpg'
TabImg[2] = 'Images/04aft.jpg'
 
num = 0;
 
function diaporama(divid, imageid, millisec) 
{ 
  var speed = Math.round(millisec / 100); 
  var timer = 0; 
 
  document.getElementById(divid).style.backgroundImage = "url(" + TabImg[num] + ")"; 
 
  changeOpac(0, imageid); 
 
  if (num>1) 
    {num=-1;}
 
  document.getElementById(imageid).src = TabImg[num+1]; 
 
  for(i = 0; i <= 100; i++) 
  { 
     setTimeout("changeOpac(" + i + ",'" + imageid + "')",(timer * speed)); 
     timer++; 
  } 
 
  num++;
 
}
 
 
  function changeOpac(opacity, id) 
    {
      var object = document.getElementById(id).style;
      object.opacity = (opacity / 100);
      object.MozOpacity = (opacity / 100);
      object.KhtmlOpacity = (opacity / 100);
      object.filter = "alpha(opacity=" + opacity + ")";
    }
 
  //Pour rejouer le diaporama en boucle
  var timer=setInterval("diaporama('id_div','id_img',500)",4000);

et mon code HTML

Code :

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

1
2
3
4
5
6
7
 
 
<div  id="id_div" style="background-image: url('Images/02aft.jpg');background-repeat: no-repeat; width: 800px; height: 600px;">
 
    <img id="id_img" src="" style="width: 800px; height: 600px;background-repeat: no-repeat; border: 0 none; filter: alpha(opacity=0); -moz-opacity: 0; opacity: 0;"  />
 
</div>

Quelqu'un pourrait-il m'expliquer pourquoi à partir de la 2ème série, il y a un saut d'image avec FF alors que sous IE il n'y a rien ?

Merci beaucoup.

[hellspawn_ludo]

Personne n'a idée du pourquoi que ça ne fonctionne pas sur Firefox ?

Merci.

[sachav]

Un diaporama tout simple :

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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
 
<script language="javascript">
var imagesTodisplay = new Array();
imagesTodisplay[0] = "monimage1.jpg"; // TOUJOURS COMMENCER PAR imagesTodisplay[0]
imagesTodisplay[1] = "monimage2.jpg";
imagesTodisplay[2] = "monimage3.jpg";
imagesTodisplay[3] = "monimage4.jpg";
// ET AINSI DE SUITE
imageWidth = 500;
imageHeight = 500;
changeSpeed = 50; // CHANGE SPEED : MIN = 10, MAX = 300
imageStay = 5;    // IMAGE STAYS AT 100% DURING x SECONDS
diaporama = new Object();
counter = 0;
diaporama.initialize = function() {
document.write("<img src='"+imagesTodisplay[0]+"' id='diapimage' style='width: "+imageWidth+"px; height: "+imageHeight+"px; filter: alpha(opacity=0); opacity: 0' />");
diaporama.addOpacity();
}
diaporama.addOpacity = function() {
document.getElementById('diapimage').filters.alpha.opacity+=changeSpeed/10;
 
if(document.getElementById('diapimage').filters.alpha.opacity==100) {
setTimeout("diaporama.decreaseOpacity()",imageStay*1000);
} else {
setTimeout("diaporama.addOpacity()",50);
}
}
diaporama.decreaseOpacity = function() {
document.getElementById('diapimage').filters.alpha.opacity-=changeSpeed/10;
 
if(document.getElementById('diapimage').filters.alpha.opacity==0) {
counter++;
diaporama.changeImage();
} else {
setTimeout("diaporama.decreaseOpacity()",50);
}
}
diaporama.changeImage = function() {
if(counter==imagesTodisplay.length) {
counter = 0;
document.getElementById('diapimage').src = imagesTodisplay[counter];
} else {
document.getElementById('diapimage').src = imagesTodisplay[counter];
}
diaporama.addOpacity()
}
diaporama.initialize();
</script>

[hellspawn_ludo]

Merci à toi sachav pour ta réponse.

J'avais vu que tu l'avais posté aussi sur un autre post.

Je teste ton code dès que je rentre du boulot. Toutefois, ça fonctionne aussi bien en IE7 qu'en FF ?

A tout hasard, tu ne saurais pas pourquoi mon code ne fonctionne pas ?

[sachav]

Essayez un alert() sur le object.opacity, pour voir si vous obtenez bien une valeur du genre 0.4...

[hellspawn_ludo]

Sachav,

J'ai essayé votre code et il fonctionne impeccablement sur IE7 mais ne fonctionne pas du tout sur Firefox.
J'ai même modifié les .filters.alpha.opacity en .opacity mais rien n'a faire. La page reste blanche.

Pour info, j'ai regardé mon code avec alert("valeur opacité : " + object.opacity) et j'obtiens bien des valeurs décimales.

C'est tout de même incroyable de voir que ça fonctionne sur un navigateur mais pas sur l'autre. Au moins, si ça avait planté sur les 2, j'aurai sû que mon code était à revoir mais là, plus je le regarde et plus je me dis qu'il est bon.
D'autant plus que c'est au moment ou le diaporama est joué pour la 2ème fois que ça déconne. La 1ère série est nickel à l'affichage.

Auriez-vous une autre idée ?

Merci de votre aide.