Simplification de code sur onmouseover/out

**romeo2003** · 03/09/2022, 09h16

Bonjour

Je veux appliquer onmouseover / out à chacun des éléments de <li>. Je ne peux utiliser qu'une seule fois l'id="a1", donc ce code ne fonctionne que pour le premier élément. Mettre l'id dans le <div> comme <div id="a1"> ne fonctionne pas. Merci pour votre aide. Romeo

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div>
        <ul>
            <li> <a id="a1" hef="#">Bienvenue</a> </li>
            <li> <a hef="#">Contact</a> </li>
            <li> <a hef="#">Info</a> </li>
       </ul>
</div>
 
    <script type="text/javascript">
        var a = document.getElementById("a1");
        a.onmouseover = txtover
        a.onmouseout = txtout
 
        function txtover() { a.style.color = "red"; }
        function txtout() { a.style.color = "green"; }
    </script>

**Archimède** · 03/09/2022, 09h51

Salut,
tu utilises

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

getElementsByClassName

plutôt que

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

getElementById

https://www.w3schools.com/jsref/met_...yclassname.asp

**romeo2003** · 03/09/2022, 12h06

Salut
Merci pour ta réponse. j'ai essayé ceci mais ça ne marche pas:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<body style="background-color:snow">
    <div>
        <ul>
            <li> <a class="menu" href="#" > Welkom</a> </li>
            <li> <a class="menu" href="#">Onze school </a> </li>
            <li> <a class="menu" href="#"> Onze talenten</a> </li>
            <li> <a class="menu" href="#"> Info</a> </li>
    </ul>
    </div>
 
    <script type="text/javascript">
        const a1 = document.getElementsByClassName("menu");
        for (i = 0; i < 4; i++) {
            a1[i].onmouseover = txtover1
            a1[i].onmouseout = txtout1
        }
 
        function txtover1() { a1[i].style.color = "red"; }
        function txtout1() { a1[i].style.color = "white"; }
       
    </script>
</body>

**mathieu** · 03/09/2022, 12h17

pour montrer du code sur ce forum, vous pouvez utiliser le bouton "#" juste au dessus pour le mettre en forme.

pour votre souci de javascript, regardez dans la console de développement et vous verrez des erreurs javascript.

**romeo2003** · 03/09/2022, 12h28

Merci pour la préponse. je vois en effet la faute qui ne sait pas lire la property 'style'. Mais je ne vois pas comment la corriger.

**mathieu** · 03/09/2022, 12h32

le message indique surtout que a1[i] n'existe pas dans les 2 fonctions. essayez en mettant this à la place.

je pense que vous pouvez faire ce changement de couleur en css en utilisant ":hover" et sans javascript :
https://developer.mozilla.org/fr/docs/Web/CSS/:hover
n'hésitez pas à ouvrir une nouvelle discussion dans le forum css si vous voulez de l'aide pour essayer cela.

**romeo2003** · 03/09/2022, 19h32

Ce code ne donne aucune faute, mais ne marche toujours pas (rien ne se passe). ??

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
        <ul>
            <li> <a class="a1" href="#"> Bienvenue</a> </li>
            <li> <a class="a1" href="#">Contact </a> </li>
            <li> <a class="a1" href="#"> Info</a> </li>
        </ul>
 
    <script type="text/javascript">
        var a = document.getElementsByClassName("a1");
        a.onmouseover = txtover
        a.onmouseout = txtout
        function txtout() { a.style.color = "white"; }
        function txtover() { a.style.color = "red"; }
    </script>
</body>

**mathieu** · 03/09/2022, 20h10

à partir de votre code de 12 h 06, j'ai juste mis "this" dans les fonctions :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<body style="background-color:snow">
    <div>
        <ul>
            <li> <a class="menu" href="#" > Welkom</a> </li>
            <li> <a class="menu" href="#">Onze school </a> </li>
            <li> <a class="menu" href="#"> Onze talenten</a> </li>
            <li> <a class="menu" href="#"> Info</a> </li>
    </ul>
    </div>
 
    <script type="text/javascript">
        const a1 = document.getElementsByClassName("menu");
        for (i = 0; i < 4; i++) {
            a1[i].onmouseover = txtover1
            a1[i].onmouseout = txtout1
        }
 
        function txtover1() { this.style.color = "red"; }
        function txtout1() { this.style.color = "white"; }
       
    </script>
</body>

**romeo2003** · 03/09/2022, 21h10

Merci. Votre version marche. Ma dernière version ne marche pas car elle ne différencie pas entre les elements <li>, je crois. Tous sont 'a' sans distinction.

**NoSmoking** · 06/09/2022, 17h53

Bonjour,

Envoyé par mathieu

je pense que vous pouvez faire ce changement de couleur en css en utilisant ":hover" et sans javascript :
https://developer.mozilla.org/fr/docs/Web/CSS/:hover

c'est à mon sens la méthode la plus « efficace » en ce qui concerne ton besoin.

Attention également aux effets de bord avec mouseover/out, peut-être préférer mouseenter/leave ou mieux aujourd’hui pointerenter/leave.

Simplification de code sur onmouseover/out

JavaScript

Discussions similaires

Partager

Partager