Partage
  • Partager sur Facebook
  • Partager sur Twitter

Menu en js : incompatibilité IE

Armazerus
    4 octobre 2008 à 11:44:21

    Bonjour, j'ai un petit souci de compatibilité avec IE sur mon site, j'ai fais un menu en javascript, le principe est simple, lorsque je passe sur un lien, plusieurs images se déplacent. Sous firefox, aucun probleme mais sur IE ça foire total, il n'y a rien qui bouge :( .
    Vous pouvez aller voir mon menu ici : mon site
    Je vous met mon code html et le code javascript (que j'ai mis dans un fichier java.js).

    <div id="menu">

<script type="text/javascript">
var page;
</script>
   		<div class="element_menu">
   			<dl>
   				<dt id="lien1" onMouseOver="javascript:selection(1, page)" onMouseOut="javascript:selection(0, page)"><a href="index.php?page=biographie"><img src="images/biographie.png"></a></dt>
   				<dt id="lien2" onMouseOver="javascript:selection(2, page)" onMouseOut="javascript:selection(0, page)"><a href="index.php?page=membres"><img src="images/membres.png"></a></dt>
   				<dt id="lien3" onMouseOver="javascript:selection(3, page)" onMouseOut="javascript:selection(0, page)"><a href="index.php?page=concerts"><img src="images/concerts.png"></a></dt>
   				<dt id="lien4" onMouseOver="javascript:selection(4, page)" onMouseOut="javascript:selection(0, page)"><a href="index.php?page=media"><img src="images/media.png"></a></dt>
   				<dt id="lien5" onMouseOver="javascript:selection(5, page)" onMouseOut="javascript:selection(0, page)"><a href="index.php?page=contact"><img src="images/contact.png"></a></dt>
   			</dl>
   		</div>
   	   
   	</div>



    function selection(choix, page_actuelle){
if( choix == 1 )
{
document.getElementById("menu").style.backgroundPosition = "30px -258px";
document.getElementById("lien1").style.paddingLeft = "78px";
document.getElementById("lien1").style.backgroundPosition = "50px 5px";

document.getElementById("lien2").style.paddingLeft = "28px";
document.getElementById("lien3").style.paddingLeft = "28px";
document.getElementById("lien4").style.paddingLeft = "28px";
document.getElementById("lien5").style.paddingLeft = "28px";
document.getElementById("lien2").style.backgroundPosition = "0px 5px";
document.getElementById("lien3").style.backgroundPosition = "0px 5px";
document.getElementById("lien4").style.backgroundPosition = "0px 5px";
document.getElementById("lien5").style.backgroundPosition = "0px 5px";



}
else if( choix == 2 )
{
document.getElementById("menu").style.backgroundPosition = "30px -208px";
document.getElementById("lien2").style.paddingLeft = "78px";
document.getElementById("lien2").style.backgroundPosition = "50px 5px";

document.getElementById("lien1").style.paddingLeft = "28px";
document.getElementById("lien3").style.paddingLeft = "28px";
document.getElementById("lien4").style.paddingLeft = "28px";
document.getElementById("lien5").style.paddingLeft = "28px";
document.getElementById("lien1").style.backgroundPosition = "0px 5px";
document.getElementById("lien3").style.backgroundPosition = "0px 5px";
document.getElementById("lien4").style.backgroundPosition = "0px 5px";
document.getElementById("lien5").style.backgroundPosition = "0px 5px";



}
else if( choix == 3 )
{
document.getElementById("menu").style.backgroundPosition = "30px -158px";
document.getElementById("lien3").style.paddingLeft = "78px";
document.getElementById("lien3").style.backgroundPosition = "50px 5px";

document.getElementById("lien1").style.paddingLeft = "28px";
document.getElementById("lien2").style.paddingLeft = "28px";
document.getElementById("lien4").style.paddingLeft = "28px";
document.getElementById("lien5").style.paddingLeft = "28px";
document.getElementById("lien1").style.backgroundPosition = "0px 5px";
document.getElementById("lien2").style.backgroundPosition = "0px 5px";
document.getElementById("lien4").style.backgroundPosition = "0px 5px";
document.getElementById("lien5").style.backgroundPosition = "0px 5px";


}
else if( choix == 4 )
{
document.getElementById("menu").style.backgroundPosition = "30px -108px";
document.getElementById("lien4").style.paddingLeft = "78px";
document.getElementById("lien4").style.backgroundPosition = "50px 5px";

document.getElementById("lien1").style.paddingLeft = "28px";
document.getElementById("lien2").style.paddingLeft = "28px";
document.getElementById("lien3").style.paddingLeft = "28px";
document.getElementById("lien5").style.paddingLeft = "28px";
document.getElementById("lien1").style.backgroundPosition = "0px 5px";
document.getElementById("lien2").style.backgroundPosition = "0px 5px";
document.getElementById("lien3").style.backgroundPosition = "0px 5px";
document.getElementById("lien5").style.backgroundPosition = "0px 5px";




}
else if( choix == 5 )
{
document.getElementById("menu").style.backgroundPosition = "30px -58px";
document.getElementById("lien5").style.paddingLeft = "78px";
document.getElementById("lien5").style.backgroundPosition = "50px 5px";

document.getElementById("lien1").style.paddingLeft = "28px";
document.getElementById("lien2").style.paddingLeft = "28px";
document.getElementById("lien3").style.paddingLeft = "28px";
document.getElementById("lien4").style.paddingLeft = "28px";
document.getElementById("lien1").style.backgroundPosition = "0px 5px";
document.getElementById("lien2").style.backgroundPosition = "0px 5px";
document.getElementById("lien3").style.backgroundPosition = "0px 5px";
document.getElementById("lien4").style.backgroundPosition = "0px 5px";



}
else
{

document.getElementById("menu").style.backgroundPosition = "30px 0px";
document.getElementById("lien1").style.paddingLeft = "28px";
document.getElementById("lien2").style.paddingLeft = "28px";
document.getElementById("lien3").style.paddingLeft = "28px";
document.getElementById("lien4").style.paddingLeft = "28px";
document.getElementById("lien5").style.paddingLeft = "28px";
document.getElementById("lien1").style.backgroundPosition = "0px 5px";
document.getElementById("lien2").style.backgroundPosition = "0px 5px";
document.getElementById("lien3").style.backgroundPosition = "0px 5px";
document.getElementById("lien4").style.backgroundPosition = "0px 5px";
document.getElementById("lien5").style.backgroundPosition = "0px 5px";


if( page_actuelle == 1 )
{
document.getElementById("menu").style.backgroundPosition = "30px -258px";
document.getElementById("lien1").style.paddingLeft = "78px";
document.getElementById("lien1").style.backgroundPosition = "50px 5px";
}
else if( page_actuelle == 2 )
{
document.getElementById("menu").style.backgroundPosition = "30px -208px";
document.getElementById("lien2").style.paddingLeft = "78px";
document.getElementById("lien2").style.backgroundPosition = "50px 5px";

}
else if( page_actuelle == 3 )
{
document.getElementById("menu").style.backgroundPosition = "30px -158px";
document.getElementById("lien3").style.paddingLeft = "78px";
document.getElementById("lien3").style.backgroundPosition = "50px 5px";
}
else if( page_actuelle == 4 )
{
document.getElementById("menu").style.backgroundPosition = "30px -108px";
document.getElementById("lien4").style.paddingLeft = "78px";
document.getElementById("lien4").style.backgroundPosition = "50px 5px";
}
else if( page_actuelle == 5 )
{
document.getElementById("menu").style.backgroundPosition = "30px -58px";
document.getElementById("lien5").style.paddingLeft = "78px";
document.getElementById("lien5").style.backgroundPosition = "50px 5px";
}
else
{

document.getElementById("menu").style.backgroundPosition = "30px 0px";
document.getElementById("lien1").style.paddingLeft = "28px";
document.getElementById("lien2").style.paddingLeft = "28px";
document.getElementById("lien3").style.paddingLeft = "28px";
document.getElementById("lien4").style.paddingLeft = "28px";
document.getElementById("lien5").style.paddingLeft = "28px";
document.getElementById("lien1").style.backgroundPosition = "0px 5px";
document.getElementById("lien2").style.backgroundPosition = "0px 5px";
document.getElementById("lien3").style.backgroundPosition = "0px 5px";
document.getElementById("lien4").style.backgroundPosition = "0px 5px";
document.getElementById("lien5").style.backgroundPosition = "0px 5px";
}

}
}


    Voila, si il y a quelqu'un qui peut me sauver siouplait ^^

    Merci

    Arma
    • Partager sur Facebook
    • Partager sur Twitter
    Anonyme
      4 octobre 2008 à 17:45:52

      je pense que le "javascript:" est inutile dans ton cas.

      même chose, il me semble qu'il faut écrire "onmouseover" et pas "onMouseOver" (idem pour out)

      du coup si tu as un doctype xhtml , IE peut faire son con
      • Partager sur Facebook
      • Partager sur Twitter
      Sylvain-a
      • Javascript
        8 octobre 2008 à 6:42:03

        OUais, j'ai la même impression que seb, tu dois pouvoir faire ça en css nop?
        • Partager sur Facebook
        • Partager sur Twitter

        Menu en js : incompatibilité IE

        × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
        × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
        • Editeur ●
        • Markdown