/*
Effet de fondu entre les images
===============================
Utilisation :
-----------
Style :
-----
opacity et Opacity => Safari
-moz-opacity et MozOpacity => Firefox / Netscape
filter et filters => Internet Explorer
*/
var coef = 0.05; // Avancement de l'opacité
var temps = 50; // Temps entre chaque changement d'opacité
var temps_pause = 2000 ; // Temps d'attente entre 2 changements d'images
var indice = 2; // Les 2 premières images sont déjà chargées dans le HTML, on commence à la 3ème
var img1 = null; // Première image
var img2 = null; // Deuxième image
var sens = 1; // Sens du fondu
var tabImg; // Tab contenant les images
//Déctection du navigateur Internet Explorer
// => True : On est sur Internet Explorer
// => False : On est sur un autre navigateur
var isIE = navigator.userAgent.toLowerCase().indexOf('msie')!=-1;
//Détection du navigateur FireFox
// => True : On est sur FireFox
// => False : On est sur un autre navigateur
var isFF = navigator.userAgent.toLowerCase().indexOf('mozilla')!=-1;
//Détection du navigateur Safari
// => True : On est sur Safari
// => False : On est sur un autre navigateur
var isSF = navigator.userAgent.toLowerCase().indexOf('safari')!=-1;
//Préchargement des images
function prechargerImg()
{
tabImg = new Array(nombre_image);
for (i=0; i<=lstImg.length-1; i++)
{
tabImg[i] = new Image();
tabImg[i].src = prefix_image + lstImg[i] + suffix_image;
}
}
//Initialisation de l'animation
function init()
{
img1 = document.getElementById("defilement1");
img2 = document.getElementById("defilement2");
prechargerImg();
change_opacity();
}
//Changement de l'opacité
function change_opacity()
{
var opacity1 = 0 ;
var opacity2 = 0 ;
if (isIE == true) // Pour Internet Explorer
{
opacity1 = parseFloat(img1.filters.alpha.opacity);
opacity2 = parseFloat(img2.filters.alpha.opacity);
}
else if (isSF == true) // Pour Safari
{
opacity1 = parseFloat(img1.style.Opacity);
opacity2 = parseFloat(img2.style.Opacity);
}
else if (isFF == true) // Pour Firefox
{
opacity1 = parseFloat(img1.style.MozOpacity);
opacity2 = parseFloat(img2.style.MozOpacity);
}
if (sens == 1)
{
if (isIE == true) // Pour Internet Explorer
{
img1.filters.alpha.opacity = opacity1 + coef * 100;
img2.filters.alpha.opacity = opacity2 - coef * 100;
}
else if (isSF == true) //Pour Safari
{
img1.style.Opacity = opacity1 + coef;
img2.style.Opacity = opacity2 - coef;
}
else if (isFF == true) // Pour Firefox
{
img1.style.MozOpacity = opacity1 + coef;
img2.style.MozOpacity = opacity2 - coef;
}
}
else
{
if (isIE == true) // Pour Internet Explorer
{
img1.filters.alpha.opacity = opacity1 - coef * 100;
img2.filters.alpha.opacity = opacity2 + coef * 100;
}
else if (isSF == true)
{
img1.style.Opacity = opacity1 - coef;
img2.style.Opacity = opacity2 + coef;
}
else if (isFF == true) //Pour FireFox
{
img1.style.MozOpacity = opacity1 - coef;
img2.style.MozOpacity = opacity2 + coef;
}
}
if (isIE == true) // Pour Internet Explorer
{
opacity1 = parseFloat(img1.filters.alpha.opacity);
opacity2 = parseFloat(img2.filters.alpha.opacity);
}
else if (isSF == true) //Pour Safari
{
opacity1 = parseFloat(img1.style.Opacity);
opacity2 = parseFloat(img2.style.Opacity);
}
else if (isFF == true) // Pour Firefox
{
opacity1 = parseFloat(img1.style.MozOpacity);
opacity2 = parseFloat(img2.style.MozOpacity);
}
// On fait varier le sens d'opacité
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;
}
// Récursion toutes les x millisecondes
window.setTimeout("change_opacity()",temps) ;
}