Javascript et onglets actifs

fanimed Messages postés 90 Statut Membre -  
doctormad Messages postés 456 Statut Membre -
Bonjour a tous

Je suis entrain decrire un code avec javascript mais qui ne fonctionne pas.

en fait je veux que les onglets de mon menu soit animes a chaque fois que le curseur passe au dessus de longlet. je veux que le background de longlet sur lequel le curseur passe, change ou encore si possible que les ecritures coulissent(de bas vers le haut) ou du haut vers le bas

voici le script javascript:

<script language="javascript">
function noircir()
{
menuwrapper2.style.background= 'url(Liens_menu.gif)';
}
function rougir(menu)
{
if( menuwrapper2.style.background = 'url(Liens_menu.gif)') menuwrapper2.style.background = 'url(bouton_lien2.gif)' ;
else menuwrapper2.style.background= 'url(Liens_menu.gif)';
}
</script>


voici le code html pour faire les onglets:

<div id="menu1"><!--partie contenant le meu-->
<ul id="menuwrapper">
<li id="menuwrapper2"><a onMouseOver="javascript:rougir(getElementById('menuwrapper2'));" onmouseout="noircir()" href="#">Acceuil</a></li>
<li id="menuwrapper2"><a onMouseOver="javascript:rougir(getElementById('menuwrapper2'));" onmouseout="noircir()" href="#" >Presentation</a></li>
<li id="menuwrapper2"><a onMouseOver="javascript:rougir(getElementById('menuwrapper2'));" onmouseout="noircir()" href="#">Objectifs</a></li>
<li id="menuwrapper2"><a onMouseOver="javascript:rougir(getElementById('menuwrapper2'));" onmouseout="noircir()" href="#">Nos services</a></li>
<li id="menuwrapper2"><a onMouseOver="javascript:rougir(getElementById('menuwrappe2r'));" "onmouseout="noircir()" href="#">Nos Projets</a></li>
</ul>
</div>

voici le css lier a cette partie:

#menu1
{
width:890px;
height:70px;
margin-top:5px;
}
#menuwrapper
{
width:900px;
height:70px;
display: inline;
list-style:none;
}
#menuwrapper2
{
width:165px;
height:60px;
list-style-type:none;
float:left;
text-align:center;
background:url(Liens_menu.gif);
background-repeat:no-repeat;
cursor:pointer;
}
#menuwrapper li a
{
text-decoration:none;
text-align:center;
font-size:17px;
font-weight:bold;
color:#FFFFFF;
list-style:none;
}

Aidez moi a trouver une solution..si posible un tutoriel qui maidera a satisfaire mes idees..Merci

1 réponse

doctormad Messages postés 456 Statut Membre 99
 
Salut,

Attention un id doit etre unique !!

Pour débugger du javascript tu peux installer l'add-on web developper toolbar sur firefox.

Par ailleurs tu n'as pas besoin de javascript ici tu peux utiliser des styles css.


HTML :
[code]
<li><a id="lien1" href="#"></a></li>
<li><a id="lien2" href="#"></a></li>
[/code]

CSS :
[code]
#lien1{
background:url(image_base.jpg);
}
#lien1:hover{
background:url(image_hover.jpg);
}
[/code]
0