Javascript et onglets actifs

Fermé
fanimed Messages postés 84 Date d'inscription samedi 16 février 2008 Statut Membre Dernière intervention 3 juillet 2009 - 24 janv. 2009 à 10:38
doctormad Messages postés 430 Date d'inscription mercredi 28 novembre 2007 Statut Membre Dernière intervention 2 avril 2015 - 24 janv. 2009 à 11:25
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 430 Date d'inscription mercredi 28 novembre 2007 Statut Membre Dernière intervention 2 avril 2015 99
24 janv. 2009 à 11:25
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