compatibilite de script de fondu
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 :
Code:
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
} |
body :
Code:
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> |