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
jakado Messages postés 2 Date d'inscription samedi 21 janvier 2012 Statut Membre Dernière intervention 22 janvier 2012 - 21 janv. 2012 à 17:31
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
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
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
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);
3
Réponse 2 / 2
@karamel Messages postés 1811 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 4 septembre 2022 145
21 janv. 2012 à 17:55
bonjour

aurait tu une page teste voir d'ou vient le probleme car a premiere vue ca me semble compatible avec chrome et safari
0