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.

[sachav]

Avez vous essaye avec document.getElementById('diapimage').style.MozOpacity ?

[hellspawn_ludo]

Oui, j'ai essayé puisque la gestion de l'opacité est stockée dans la fonction

Code :

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

1
2
3
4
5
6
7
8
9
 
 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 + ")";
        }

Si je ne mets pas mon diaporama en boucle, ça fonctionne. Mais justement je dois le faire se rejouer d'où le

Code :

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

if (num>1) {num=-1;}

Sauriez-vous comment je pourrais faire pour lire le contenu background-image de mon div ? Genre :

Code :

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

document.write(document.getElementById(boite_diapo).style.backgroundImage)

Je ne sais pas comment faire.

Merci.

[hellspawn_ludo]

Et bien, j'ai trouvé. Apparemment, FF n'apprécie pas le fait d'avoir une img dans le div.

Il faut donc modifier la balise qui dérange en la remplaçant par une div :

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
 
        // Déclaration et initialisation des variables 
 
        var tab_img = new Array;    //tableau contenant les images
        var num=0;                  //numéro de l'image jouée
 
        //Images stockées dans le tableau       
	tab_img[0] = 'Image1.jpg'
        tab_img[1] = 'Image2.jpg'
        tab_img[2] = 'Image3.jpg'
        tab_img[3] = 'Image4.jpg'
 
 
        //Ajout d'un compte à rebours afin de jouer le diaporama
        var timer_diapo=setInterval("diaporama('boite_diapo','img_diapo',500)",4000);
 
        /* Explication des paramètres 
 
        'boite_diapo' : identifiant de la boite du diaporama. NE PAS MODIFIER
        'img_diapo'   : identifiant de l'image contenu dans la boite diaporama. NE PAS MODIFIER.
        500           : temps (en milliseconde) de l'effet fondu entre 2 images. 1 seconde = 1000 millisecondes.
        7000          : interval de temps entre 2 images. 1 seconde = 1000 millisecondes.
        
        */
 
        //Fonction qui permet de jouer le diaporama
        function diaporama(divid, imageid, millisec) 
        { 
            var speed = Math.round(millisec / 100); 
            var timer = 0; 
 
            document.getElementById(divid).style.backgroundImage = "url(" + tab_img[num] + ")"; 
 
            changeOpac(0, imageid); 
 
            if (num>(tab_img.length-2))
            {num = -1;}
 
		document.getElementById(imageid).style.backgroundImage = "url(" + tab_img[num+1] + ")"; 
 
           for(i = 0; i <= 100; i++)
           { 
                setTimeout("changeOpac(" + i + ",'" + imageid+ "')",(timer * speed)); 
                timer++; 
           } 
 
 
          num++;
 
        }
 
 
 
        //Fonction qui attribue l'opacité à l'objet "image_diapo"
        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 + ")";
        }

CSS

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
 
        /* BOITE DU DIAPORAMA */
        #boite_diapo {      position:absolute;
                            width:333px;
                            height:250px;
                            top:50px;
                            left:33px;
                            background-color:none;
                            background-image:url(Image1.jpg);} /* IL FAUT IMPERATIVEMENT QUE LE NOM DE L'IMAGE SOIT IDENTIQUE A CELUI DANS LE SCRIPT : tab_img[0]
                            
        /* image dans la boite du diaporama */                            
        #img_diapo  {       width:333px;
                            height:250px;
                            filter: alpha(opacity=0);   /* fondu pour internet explorer */
                            -moz-opacity:0;             /* fondu pour mozilla, phoenix, firebird, firefox*/
                            opacity:0;                  /* fondu pour mozilla firefox */
                            -khtml-opacity:0.5;         /* fondu pour konqueror et safari */
                            background-color:none;}

HTML

Code :

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

1
2
3
4
5
 
 
 <div id="boite_diapo">
        <div id="img_diapo"></div>
    </div>

Merci pour ton aide sachav.

[xavman33]

Ludo,

Ton code me plait bien cependant j'ai les images qui se superposent à cause des 2 <div id="boite_diapo"><div id="img_diapo">

J'arrive pas à les regrouper en 1 seule ?

[le_chomeur]

et quelque chose dans ce genre :

http://entreamis69.free.fr/demo/