1. Accueil
  2. Forum Codes-Sources
  3. Javascript / DHTML
Sujet Précédent Sujet Suivant

Script enchainer plusieur image en fondu compatibilité IE et Safari

[Résolu]
Signaler
Messages postés
2
Date d'inscription
samedi 21 janvier 2012
Statut
Membre
Dernière intervention
22 janvier 2012
 -
Messages postés
2
Date d'inscription
samedi 21 janvier 2012
Statut
Membre
Dernière intervention
22 janvier 2012
 -
Bonjour

j'ai le code qui suit (que j'ai trouvé sur un blog) qui marche très bien sur IE et Firefox mais pas sur Safari et Chrome

je serai content si quelqu'un a une idée comment corriger ce code pour qu'il soit compatible avec tous les navigateurs

Merci

<html>
<head>

<style>

.transpa0 {
opacity:0;
filter: Alpha (opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
position:absolute;
left:0;
top:0;
height:100%;
width:100%
}

.transpa100 {
opacity: 1;
filter: Alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
position:absolute;
left:0;
top:0;
height:100%;
width:100%
}


</style>

<script>
var temps = 30,
temps_pause = 3000,
temps_pause_txt = 1000,
nombre_image = 5,
prefix_image = 'photos/',
suffix_image = '.jpg',
indice = 2,
isIE = navigator.userAgent.toLowerCase ().indexOf ('msie') != -1,
coef = (isIE ? 10 : 0.1),
coef_txt = (isIE ? 5 : 0.05),
img1 = null,
img2 = null,
sens = 1,
opacityInit = (isIE ? 100 : 1),
tabImg = [],
_maliste = ['photos/1.jpg', 'photos/2.jpg', 'photos/3.jpg', 'photos/4.jpg', 'photos/5.jpg']; // array perso pour que je puisse tester chez moi


// -----------------------------------------------------------------------------------------
function prechargerImg ()
{
for (var i = 0, img; i < nombre_image; i++)
{
img = new Image ();
img.src = _maliste[i];
img.className = "transpa0";
tabImg.push (img);
}

img1 = document.getElementById ("imgback1" );
img2 = document.getElementById ("imgback2" );
indice = 1;
};


// -----------------------------------------------------------------------------------------
function init()
{
prechargerImg ();
change_opacity ();
};

// -----------------------------------------------------------------------------------------
function change_opacity ()
{
var sImg1 = (isIE ? img1.filters.alpha : img1.style),
sImg2 = (isIE ? img2.filters.alpha : img2.style),
opacity1 = (isNaN (parseFloat (sImg1.opacity)) ? opacityInit : parseFloat (sImg1.opacity)),
opacity2 = (isNaN (parseFloat (sImg2.opacity)) ? 0 : parseFloat (sImg2.opacity)),
c = coef * sens,
o1 = opacity1 - c,
o2 = opacity2 + c;

sImg1.opacity = o1;
sImg2.opacity = o2;

if (o2 >= opacityInit || o2 <= 0)
{
indice++;
indice %= nombre_image;
if (sens > 0)
{
img1.src = tabImg[indice].src;
}
else
{
img2.src = tabImg[indice].src;
}
sens = -sens;

setTimeout (change_opacity, temps_pause);
return;
}
setTimeout (change_opacity, temps);
};

window.onload = function ()
{
setTimeout (init, temps_pause);
};
</script>

</head>









</html>

2 réponses

Réponse 1 / 2
Messages postés
2
Date d'inscription
samedi 21 janvier 2012
Statut
Membre
Dernière intervention
22 janvier 2012
j'ai trouve la solution

il suffit de faire un round a o2 car il n'arive jamais a zero

ajouter la fonction

function roundNumber(num, dec)
{
var result = Math.round(num*Math.pow(10,dec))/Math.pow(10,dec);
return result;
}

et

o2 = roundNumber(opacity2 + c, 1);
Réponse 2 / 2
Messages postés
1796
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
17 septembre 2021
 134
bonjour

aurait tu une page teste voir d'ou vient le probleme car a premiere vue ca me semble compatible avec chrome et safari
Répondre Posez votre question