/*
Effet de fondu entre les images
===============================
Utilisation :
-----------
Style :
-----
opacity => Safari, Firefox et Chrome
filter => Internet Explorer
*/
var coef = 0.05; // Coefficient d'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 (1 => opacité image 1 augmente et opacité image 2 diminue ; 0 => opacité image 1 diminue et opacité image 2 augmente)
var tabImg; // Tableau 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)?true:false;
// 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 tmpopacity1 = 0;
var tmpopacity2 = 0;
// On récupère l'opacité actuelle des images
if (isIE == true) // Pour Internet Explorer
{
tmpopacity1 = parseFloat(img1.filters.alpha.opacity);
tmpopacity2 = parseFloat(img2.filters.alpha.opacity);
}
else // Pour Safari, Firefox et Chrome
{
tmpopacity1 = parseFloat(img1.style.opacity);
tmpopacity2 = parseFloat(img2.style.opacity);
}
// On change l'opacité des images
if (sens == 1)
{
if (isIE == true) // Pour Internet Explorer
{
var opacity1 = tmpopacity1 + coef * 100;
var opacity2 = tmpopacity2 - coef * 100;
img1.filters.alpha.opacity = opacity1;
img2.filters.alpha.opacity = opacity2;
}
else // Pour Safari, Firefox et Chrome
{
var opacity1 = tmpopacity1 + coef;
var opacity2 = tmpopacity2 - coef;
img1.style.opacity = opacity1;
img2.style.opacity = opacity2;
}
}
else
{
if (isIE == true) // Pour Internet Explorer
{
var opacity1 = tmpopacity1 - coef * 100;
var opacity2 = tmpopacity2 + coef * 100;
img1.filters.alpha.opacity = opacity1;
img2.filters.alpha.opacity = opacity2;
}
else // Pour Safari, Firefox et Chrome
{
var opacity1 = tmpopacity1 - coef;
var opacity2 = tmpopacity2 + coef;
img1.style.opacity = opacity1;
img2.style.opacity = opacity2;
}
}
// On change une image
if (opacity2 <= 0)
{
// Si l'opacité de l'image 2 = 0, on la change
img2.src = tabImg[indice++].src;
sens = 0;
if (indice == (tabImg.length)) indice = 0;
window.setTimeout("change_opacity()",temps_pause); // Attente de 2 secondes
return 0;
}
else if (opacity1 <= 0)
{
// Si l'opacité de l'image 1 = 0, on la change
img1.src = tabImg[indice++].src;
sens = 1;
if (indice == (tabImg.length)) indice = 0;
window.setTimeout("change_opacity()",temps_pause); // Attente de 2 secondes
return 0;
}
// Récursion tous les "temps" de millisecondes
window.setTimeout("change_opacity()",temps);
}