18041 sujets

Questions générales et questions de débutants

Problème mouseover avec changement de css

Bonjour à tous

Alors voici mon petit problème,
j'ai récemment crée un deuxième thème pour mon site (2 feuille de style différentes)
Sur ce site il y a une barre de navigation avec plusieurs liens sous forme d'images qui changent lorsque la souris passe dessus que j'ai crée avec un script java et mon soucis c'est que je ne vois pas comment changer les images du script en fonction du css choisis pour changer le thème

je vous montre le script:
<SCRIPT LANGUAGE="JavaScript">

loadImage6 = new Image();
loadImage6.src = "images/accueilg.png";
staticImage6 = new Image();
staticImage6.src = "images/accueil.png";

loadImage1 = new Image();
loadImage1.src = "images/forumg.png";
staticImage1 = new Image();
staticImage1.src = "images/forum.png";

loadImage2 = new Image();
loadImage2.src = "images/archivesg.png";
staticImage2 = new Image();
staticImage2.src = "images/archives.png";

loadImage3 = new Image();
loadImage3.src = "images/roosterg.png";
staticImage3 = new Image();
staticImage3.src = "images/rooster.png";

loadImage4 = new Image();
loadImage4.src = "images/charte1g.png";
staticImage4 = new Image();
staticImage4.src = "images/charte1.png";

loadImage5 = new Image();
loadImage5.src = "images/videosg.png";
staticImage5 = new Image();
staticImage5.src = "images/videos.png";


</script>


et voila le code des liens de la barre de navigation :

<li><a href="index.php" title="Accueil"  onmouseover="image6.src=loadImage6.src;" onmouseout="image6.src=staticImage6.src;">
<img name="image6" src="images/accueil.png" style="vertical-align:top;" border=0></a></li>      
        <li><a href="http://insiders.xooit.com/index.php" title="Forum" onmouseover="image1.src=loadImage1.src;" onmouseout="image1.src=staticImage1.src;">
<img name="image1" src="images/forum.png" style="vertical-align:top;" border=0></a></li>
        <li>
<a href="Archives.php" title="Archive des News" onmouseover="image2.src=loadImage2.src;" onmouseout="image2.src=staticImage2.src;">
<img name="image2" src="images/archives.png" style="vertical-align:top;" border=0></a></li>
        <li><a href="roster.php" title="Composition de la guilde" onmouseover="image3.src=loadImage3.src;" onmouseout="image3.src=staticImage3.src;">
<img name="image3" src="images/rooster.png" style="vertical-align:top;" border=0></a></li>
        <li>
<a href="charte.php" title="Charte" onmouseover="image4.src=loadImage4.src;" onmouseout="image4.src=staticImage4.src;">
<img name="image4" src="images/charte1.png" style="vertical-align:top;" border=0></a></li>
        <li id="NoBg"><a href="index.php" title="Videos de la guilde" onmouseover="image5.src=loadImage5.src;" onmouseout="image5.src=staticImage5.src;">
<img name="image5" src="images/videos.png" style="vertical-align:top;" border=0></a></li>
salut...

Bon déjà on voit pas le site en question...

Ensuite... pourquoi utiliser du javascript pour des fonctions que gère très bien le css ??

les pseudos classes ?? a:hover ??? par exemple ??

Surtout si tu gère le reste avec un css...

Ca te simplifierai grandement la vie...

++
en fait oui j'ai vu qu'avec les a:hover dans le css c'était plus simple^^ mais là je rencontre un autre problème je comprend pas pourquoi mais là lorsque je veux les mettre dans ma barre de navigation ils se mettent les uns en dessous des autres pour le css j'ai fait un code comme ça:
 a.accueil {display:block;background-position:top;background-image:url("images/accueil.png" );height:24px;width:116px;background-repeat:no-repeat;}
 a.accueil:hover {background-image:url("images/accueilg.png" )}


et pour le html ça:
<a class="accueil" href="index.php"></a>


le seul moyen que j'ai trouvé pour les mettre les uns a la suite des autres à l'horizontale c'est avec un tableau mais je trouve pas ça très top
nan mais c'est bon en fait je l'ai fait en css comme ça aucun probleme pour le changement de thème
Sujet clos
Aller à