Posez votre question Signaler

Script enchainer plusieur image en fondu compatibilité IE et Safari [Résolu]

Messages postés
2
Date d'inscription
samedi 21 janvier 2012
Statut
Membre
Dernière intervention
22 janvier 2012
 - - Dernière réponse : jakado
Messages postés
2
Date d'inscription
samedi 21 janvier 2012
Statut
Membre
Dernière intervention
22 janvier 2012
 - 22 janv. 2012 à 00:50
Javascript / DHTML Posez votre question Signaler
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>
Afficher la suite 

2 réponses

Meilleure réponse
Signaler Commenter la réponse de jakado
Messages postés
2
Date d'inscription
samedi 21 janvier 2012
Statut
Membre
Dernière intervention
22 janvier 2012
3
Merci
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);

Dire « Merci » 3

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

Codes Sources 197 internautes nous ont dit merci ce mois-ci

Commenter la réponse de jakado
Signaler Commenter la réponse de @karamel
Messages postés
1717
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
15 octobre 2019
 47
0
Merci
bonjour

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