Problème de survol de mes boutons ...
Angy
-
Angy -
Angy -
Bonjour,
J'essaye de construire un petit menu qui change un peu : imaginons qu'il y ait 5 boutons... Lorsqu'on survol l'un des boutons, les 4 autres s'assombrissent (pour cela je change leur classe qui contient une image plus sombre). J'ai donc ainsi développé le code javascript ci-dessous. Le problème se trouve à la ligne "TabBtn[i].className="bouton";" Cette ligne n'a aucun effet et je ne comprends pas pourquoi ...
Merci de votre aide :-)
HTML :
<div id="menu">
<div id="btn1" class="bouton">Nom de bouton 1</div>
<div id="btn2" class="bouton">Nom de bouton 2</div>
<div id="btn3" class="bouton">Nom de bouton 3</div>
<div id="btn4" class="bouton">Nom de bouton 4</div>
<div id="btn5" class="bouton">Nom de bouton 5</div>
</div>
JAVASCRIPT :
window.onload = function() {
var oBtn1 = document.getElementById("btn1");
var oBtn2 = document.getElementById("btn2");
var oBtn3 = document.getElementById("btn3");
var oBtn4 = document.getElementById("btn4");
var oBtn5 = document.getElementById("btn5");
var TabBtn = [oBtn1,oBtn2,oBtn3,oBtn4,oBtn5];
for (var i=0;i<=4;i++)
{
TabBtn[i].onmouseover = function ()
{
oBtn1.className="bouton2";
oBtn2.className="bouton2";
oBtn3.className="bouton2";
oBtn4.className="bouton2";
oBtn5.className="bouton2";
TabBtn[i].className="bouton"; <---- aucun effet...
}
TabBtn[i].onmouseout = function ()
{
oBtn1.className="bouton";
oBtn2.className="bouton";
oBtn3.className="bouton";
oBtn4.className="bouton";
oBtn5.className="bouton";
}
}
}
J'essaye de construire un petit menu qui change un peu : imaginons qu'il y ait 5 boutons... Lorsqu'on survol l'un des boutons, les 4 autres s'assombrissent (pour cela je change leur classe qui contient une image plus sombre). J'ai donc ainsi développé le code javascript ci-dessous. Le problème se trouve à la ligne "TabBtn[i].className="bouton";" Cette ligne n'a aucun effet et je ne comprends pas pourquoi ...
Merci de votre aide :-)
HTML :
<div id="menu">
<div id="btn1" class="bouton">Nom de bouton 1</div>
<div id="btn2" class="bouton">Nom de bouton 2</div>
<div id="btn3" class="bouton">Nom de bouton 3</div>
<div id="btn4" class="bouton">Nom de bouton 4</div>
<div id="btn5" class="bouton">Nom de bouton 5</div>
</div>
JAVASCRIPT :
window.onload = function() {
var oBtn1 = document.getElementById("btn1");
var oBtn2 = document.getElementById("btn2");
var oBtn3 = document.getElementById("btn3");
var oBtn4 = document.getElementById("btn4");
var oBtn5 = document.getElementById("btn5");
var TabBtn = [oBtn1,oBtn2,oBtn3,oBtn4,oBtn5];
for (var i=0;i<=4;i++)
{
TabBtn[i].onmouseover = function ()
{
oBtn1.className="bouton2";
oBtn2.className="bouton2";
oBtn3.className="bouton2";
oBtn4.className="bouton2";
oBtn5.className="bouton2";
TabBtn[i].className="bouton"; <---- aucun effet...
}
TabBtn[i].onmouseout = function ()
{
oBtn1.className="bouton";
oBtn2.className="bouton";
oBtn3.className="bouton";
oBtn4.className="bouton";
oBtn5.className="bouton";
}
}
}
A voir également:
- Problème de survol de mes boutons ...
- A quoi servent les boutons de couleur sur une telecommande - Guide
- Comment réinitialiser un téléphone avec les boutons - Guide
- Application pour reconnaître les boutons - Accueil - Outils
- Comment déverrouiller un samsung avec les boutons - Guide
- Excel afficher commentaire survol cellule ✓ - Forum Excel
2 réponses
<div id="menu">
<div id="btn1" name="menu" class="bouton">Nom de bouton 1</div>
<div id="btn2" name="menu" class="bouton">Nom de bouton 2</div>
<div id="btn3" name="menu" class="bouton">Nom de bouton 3</div>
<div id="btn4" name="menu" class="bouton">Nom de bouton 4</div>
<div id="btn5" name="menu" class="bouton">Nom de bouton 5</div>
</div>
<script type="text/javascript">
window.onload = function() {
var boutons = document.getElementsByName('menu');
for (var i = 0; i < boutons.length; i++){
boutons[i].onmouseover = function (){
document.getElementsByName('menu').className = "bouton";
document.getElementById(bouton[i].id).className = "bouton2";
bouton[i].onmouseout = function (){
document.getElementsByName('menu').className = "bouton";
}
}
}
</script>
Sans trop tester ça devrai être dans ce genre la.
Bien que pour le onmonseover on a pas besoin de redefinir le style des autres bouton ?
