Bonjour à tous,
J'espère déjà avoir posté mon message dans le bon forum.
J'ai développer un petit script java pour une page d'accueil de site internet. Le principe est de voir en accueil une image de fond et un logo par-dessus, et lorsque l'on clique sur le logo ou au bout de 4secondes, l'image de fond se lève et le logo disparait par fondu. Ce script marche très bien sous ie7 ou safari, mais sous mozilla, l'image remonte très lentement et de façon très saccadée et ne reste pas homogène. J'ai essayer de réduire la qualité des image en les mettant en .gif ( j'utilise des images .png 1680x1050 pour le fond et 2000x1000 pour le logo ) et en réduisant leur taille mais le problème ne disparait pas.
Merci à ceux qui pourrait m'aider parce que je n'ai trouvé aucun témoignage similaire et commence à desespérer. Ou si vous connaissez une façon de le faire totalement compatible avec mozilla je suis preneur également.
Voici le script :<script type="text/javascript">
var encours=false;
var position = 0.0;
var opacity = 100;
var timer = null;
var object1;
var object2;
function changeOpac( id ) {
object2.style.opacity = (opacity / 100);
object2.style.MozOpacity = (opacity / 100);
object2.style.KhtmlOpacity = (opacity / 100);
object2.style.filter = "alpha(opacity=" + opacity + ")";
}
function initPos() {
var rid = document.getElementById("d21" );
var logo = document.getElementById("d22" )
rid.style.position = "absolute";
rid.style.top = "0";
rid.style.left = "0";
logo.style.position = "absolute";
logo.style.top = "20%";
logo.style.left = "30%";
}
function MovePos( ) {
encours=true;
object1.style.top = position+"ex";
position-=2;
opacity-=1.5;
changeOpac( "d22" );
if ( position <= -200 ){
clearInterval(timer);
}
}
function wait( i , time ){
if (!(encours) ){initPos();}
setTimeout( "MovePosWait( "+i+" )" , time );
}
function MovePosWait( i ){
if ( !(encours)){
object1 = document.getElementById("d21" );
object2 = document.getElementById("d22" );
timer = setInterval( "MovePos( )" , 20 );
}
}
</script>
Le code html :<div id="ecran" >
<img id="d21" onload="wait( 0.0 , 4000 )" alt="" src="images/rideau.png" />
<div id="logoIntro">
<img id="d22" onclick="wait( 0.0 , 1)" alt="" src="images/ete1.png" />
</div>
</div>
et le css :#ecran{
height: 100%;
width: 100%;
}
#ecran img
{
position: absolute;
height: 100%;
width: 100%;
}
#logoIntro img
{
position: absolute;
height: 40%;
width: 40%;
}