Bonjour,
J'ai un souci avec une fonction que j'avoue j'ai piqué sur le web (d'où ma plus grande difficulté à résoudre mon problème).
Celle-ci sert à faire un défilement d'images en fondu enchainé.
Le problème est que cela ne maarche que sur IE, pas sur FireFox ni Google Chrome.
header :
body :
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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95 // mettre un minimum de 4 images !!! var coef = 0.03 ; // avancement de l'opacité var temps = 50 ; // temps entre chaque changement d'opacité var temps_pause = 2500 ; // temps d'attente entre 2 changements d'images var nombre_image = 6 ; // nombre d'images a faire bouger var prefix_image = 'images/'; // chemin + prefix du nom des images var suffix_image = '.gif' ; // suffix + '.extension' du nom des images // pas touche var indice = 2; // les 2 premiere image sont deja charger dans le HTML, on commence a la 3eme var isIE = navigator.userAgent.toLowerCase().indexOf('msie')!=-1 ; var img1 = null; var img2 = null ; var sens = 1; var tabImg; // tab contenant les images function prechargerImg(){ tabImg = new Array(nombre_image); for (i=0; i<=nombre_image -1; i++){ tabImg[i]=new Image(); tabImg[i].src = prefix_image+(i+1)+suffix_image; } } function init() { img1 = document.getElementById("defilement1") ; img2 = document.getElementById("defilement2") ; prechargerImg(); change_opacity(); } function change_opacity() { var opacity1 = 0 ; var opacity2 = 0 ; if (isIE) // for IE { opacity1 = parseFloat(img1.filters.alpha.opacity); opacity2 = parseFloat(img2.filters.alpha.opacity); } else // for mozilla { opacity1 = parseFloat(img1.style.MozOpacity); opacity2 = parseFloat(img2.style.MozOpacity); } if (sens) { if (isIE) // for IE { img1.filters.alpha.opacity = opacity1 + coef * 100; img2.filters.alpha.opacity = opacity2 - coef * 100; } else // for Mozilla { img1.style.MozOpacity = opacity1 + coef; img2.style.MozOpacity = opacity2 - coef; } } else { if (isIE) // for IE { img1.filters.alpha.opacity = opacity1 - coef * 100; img2.filters.alpha.opacity = opacity2 + coef * 100; } else // for Mozilla { img1.style.MozOpacity = opacity1 - coef; img2.style.MozOpacity = opacity2 + coef; } } if (isIE) // for IE { opacity1 = parseFloat(img1.filters.alpha.opacity); opacity2 = parseFloat(img2.filters.alpha.opacity); } else // for mozilla { opacity1 = parseFloat(img1.style.MozOpacity); opacity2 = parseFloat(img2.style.MozOpacity); } // on fait varié le sens d'opacité du bazar if (opacity2 <= 0) { img2.src=tabImg[indice++].src; sens = 0; if (indice == (tabImg.length)) indice=0; window.setTimeout("change_opacity()",temps_pause) ; // attente return 0; } else if (opacity1 <= 0) { img1.src=tabImg[indice++].src; sens = 1; if (indice == (tabImg.length)) indice=0; window.setTimeout("change_opacity()",temps_pause) ; // attente return 0; } window.setTimeout("change_opacity()",temps) ; // recursion toutes les x millisec }
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6 <div id="rond_centrale_back"> <!-- Premiere image id=defilement1 --> <img id="defilement1" src="images/1.gif" style="-moz-opacity:0;filter:alpha(opacity=0); position:absolute" border="0" /> <!-- Deuxieme image id=defilement2 /!\ positionnée RELATIVEMENT par rapport à la 1ère pour qu'elles se superposent /!\ --> <img id="defilement2" src="images/2.gif" style="-moz-opacity:1;filter:alpha(opacity=100); position:absolute" border="0" /> </div>
Partager