Javascript et onglets actifs
fanimed
Messages postés
84
Date d'inscription
Statut
Membre
Dernière intervention
-
doctormad Messages postés 430 Date d'inscription Statut Membre Dernière intervention -
doctormad Messages postés 430 Date d'inscription Statut Membre Dernière intervention -
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
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
A voir également:
- Javascript et onglets actifs
- Restaurer les onglets chrome - Guide
- Telecharger javascript - Télécharger - Langages
- Différence actif et en ligne messenger ✓ - Forum Facebook Messenger
- Imprimer tous les onglets pdf - Forum Bureautique
- Ouvrir plusieurs onglets en même temps - Guide
1 réponse
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]
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]