Random hover la fonction JS ne fonctionne pas

Hello,

Je réalise un site où sur la homepage, il m'est demandé d'intégrer 3 pictos aléatoirement. Grâce une fonction php array ça marche.

Ensuite, il faut intégrer un hover aléatoire sur ces pictos, là j'ai utilisé la fonction ramdomPick de JS. Le hover aléatoire fonctionne avec le fonction getElementByID mais lorsque je souhaite passer cette fonction à getElementByClassName (pour appliquer le hover aux 3 pictos de la homepage). Le hover ne marche plus.

Auriez-vous une idée ? Je débute JS, mais n'arrive pas à trouver la solution qui doit être simple pourtant.

Mon

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// Random Rollhover1
        function randomPick(arr) {
          var selected = arr[Math.floor(Math.random()*arr.length)]
          return selected;
        }
        images =
        [
        "asset/PICTURES/ICONS/picto1.png",
        "asset/PICTURES/ICONS/picto2.png",
        "asset/PICTURES/ICONS/picto3.png",
        "asset/PICTURES/ICONS/picto4.png",
        "asset/PICTURES/ICONS/picto5.png",
        ]
        function randomHover () {
 
          var myImage = document.getElementByClassName('hover');
          var selImage = randomPick(images);
 
          myImage.src = selImage;
        }
 
        function resetState() {
 
          var myImage = document.getElementByClassName('hover');
          myImage.src = "image_aleatoire1.php";
        }

MON

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="one_third first" style="width: 30.288344%; margin-left: 1%;">
 
         <img class="home_icons hover" src="image_aleatoire1.php" onmouseover="randomHover();" onmouseout="resetState();">
 
       </div>
 
       <div class="one_third" style="width: 30.288344%;">
 
         <img class="home_icons hover" src="image_aleatoire2.php" onmouseover="randomHover();" onmouseout="resetState();">
 
       </div>
 
       <div class="one_third" style="width: 30.288344%;">
 
         <img class="home_icons hover" src="image_aleatoire3.php" onmouseover="randomHover();" onmouseout="resetState();">
 
       </div>