Exercice : mise en place galerie photo avec effet

**Espagnol_Mtl** · 19/12/2019, 02h46

Allo, j'ai besoin d'aide pour un devoir ..ça fait des heures que j'essaie en j'avance pas.
En bref il faut que le programme affiche l'image sélectionné dans une élément li (contenu dans un autre dossier) et associé a un objet tableau (voir fichier ci joint)
je suis rendu a l'etape 2 alors me manque d'afficher les images quand la souris survole la liste et afficher et cacher la liste.
Merci d'abord!!

************************************
Voila le fichier html
************************************

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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html lang="fr">
 
<head>
   <title>Tp2</title>
    <meta charset="utf-8">
    <!--<title>TP2 programmation JavaScript, Consultation d'une arborescence thématique illustrée</title>-->
 
    <link href="css/style.css" rel="stylesheet">
    <script src="js/main.js"></script>
 
 
</head>
 
<body>
 
    <main>
        <section id="liste">
            <ul>
                <li>Personnages de la saga Star Wars
                    <ul>
                        <li>Episode IV
                            <ul>
                                <li>
                                    Princesse Leia
                                </li>
                                <li>
                                    Luke Skywalker
                                </li>
                                <li>
                                    Hans Solo
                                </li>
                                <li>
                                    Dark Vader
                                </li>
                            </ul>
                        </li>
                        <li>Autre
                            <ul>
                                <li>
                                    Obi-wan Kenobi
                                </li>
                                <li>
                                    C3P0
                                </li>
                                <li>
                                    Stormtrooper
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>                
                <li>Vaisseaux de la saga Star Wars
                    <ul>
                        <li>The Empire strike back
 
                            <ul>
                                <li>
                                    Etolie de la mort
                                </li>
                                <li>
                                    Caza Tie
                                </li>
                            </ul>
                        </li>
                        <li>Le retour de Jedi
                            <ul>
                                <li>
                                    Vaisseaux 2
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
 
        </section>
 
        <div id="affichage"></div>
 
 
        <div id="container"></div>
 
        <!--<img src="Star_Wars/No_image_available.png">*/-->
 
    </main>
    <!-- paragraphe pour afficher des messages de mise au point -->
    <p id="trace"></p>
 
</body>
 
</html>

**************************************************
voila le fichier js
***************************************************

Code :

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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
window.addEventListener("load",documentLoaded);
 
function documentLoaded() {
 
	// objet "tableau de correspondance" entre les libellés des LI et leur fichier image
	// vous pouvez choisir un autre thème avec d'autres images
	// =================================================================================
	var images = {
		"Personnages de Star Wars"	:	{"niveau" : 1, "fichier": "logo_star_wars.jpg"},
        "Episode IV"				        :	{"niveau" : 2, "fichier": "EpisodeIV.jpg"},
		"Princesse Leia"			        :	{"niveau" : 3, "fichier": "Leia.jpg"},
		"Luke Skywalker"			:	{"niveau" : 3, "fichier": "Luke.jpg"},
		"Hans Solo"			     	:	{"niveau" : 3, "fichier": "Han_Solo.jpg"},
		"Dark Vader"				:	{"niveau" : 3, "fichier": "Dark_Vader.jpg"},
		"Autre"                                      :   {"niveau" : 2, "fichier": "No_image_available.png"}, 
		"Obi_wan Kenobi"		        :	{"niveau" : 3, "fichier": "Obi_wan.jpg"},
		"C3PO"					:	{"niveau" : 3, "fichier": "C3P0.jpg"},
		"Stormtrooper"				:	{"niveau" : 3, "fichier": "Stormtrooper.jpg"},
		"Vaisseaux de Star Wars"	        :	{"niveau" : 1, "fichier": "Vaisseaux_1.jpg"},
        "The Empire strike back"	                :	{"niveau" : 2, "fichier": "El_imperio.jpg"},
		"Etolie_de_la_mort"			:	{"niveau" : 3, "fichier": "Etolie_de_la_mort.jpg"},
		"Caza_Tie"					:	{"niveau" : 3, "fichier": "Caza_Tie.jpg"},
        "Le_Retour_de_Jedi"			:	{"niveau" : 2, "fichier": "Le_Retour_de_Jedi.jpg"},
		"Vaisseaux 1"		        :	{"niveau" : 3, "fichier": "Vaisseaux_1.jpg"},
	};
 
	var noImageFichier = "No_image_available.png";   // fichier image par défaut
			/* =====================================
	   insérez ici le code JavaScript du TP2
 
         	   ===================================== */
 
    var mesLi = document.getElementsByTagName('li');
    for (i = 0; i < mesLi.length; i++){
 
        var eLi = mesLi[i];
        var text = eLi.firstChild.nodeValue;
        eLi.removeChild(eLi.firstChild);
        var eSpan = document.createElement("span");
        eSpan.innerHTML = text; 
        eLi.insertBefore(eSpan,eLi.firstChild);
 
    }
 
	var monSpan = document.getElementById("liste");
 
 
	monSpan.addEventListener("mouseover",function(event){	
 
		if (event.target.nodeName == "SPAN"){
 
 
			event.target.style.color = "red";
 
		}
 
	});
 
	monSpan.addEventListener("mouseout",function(event){	
 
		event.target.style.color = "black";
 
 
	});
 
	var monDiv = document.createElement("div");
	document.body.appendChild(monDiv);
	var monImage = document.createElement("img");
	monImage.id = "monImage";
	//monDiv.appendChild= ("images\imgs :" + imgs["p3"]); 
 
 
	for (prop in images){
	//monDiv.appendChild= ("\images :" + imgs["p3"]); 
		//console.log(monDiv.appendChild);
 
	}
 
	 // affiche dans la console successivement p1, p2 et p3 console.log(oTest[prop]); // affiche dans la console successivement val1, val2 et 3 }
 
 
 
	// vous pouvez utiliser cette fonction de trace
	// pour la mise au point de votre programmation JavaScript
	// =======================================================*/
 
	function trace(evt, msg) {
		msg =   evt.type + " "
			  + evt.target.nodeName + " "
			  + evt.target.parentNode.nodeName + " "
			  + evt.target.firstChild.nodeName  + " "
			  + evt.target.firstChild.nodeValue + " : "
			  + msg;
		document.getElementById("trace").innerHTML += msg + "<br>";
	}	
}

********************************************

Voila les consignes
582-P22-MA – Programmation d'animation pour le web 1
Groupe : 17612
1/6
Travail pratique 2 : Interactivité d'une liste d'images (pondération 25%)
1- Créer une liste à niveaux multiples :
À l'aide des éléments HTML <ul> et <li> concevez la liste à niveaux multiples ci-dessous (le contenu peut bien entendu être différent), dans la section d’id "liste" du fichier index.html ci-joint :
2- Insérer dynamiquement un dans chaque <li> :
Attention, les éléments HTML <li> sont de type "display: block". Si un évènement est capturé directement sur l'élément <li>, cet évènement est déclenché peu importe la position de la souris à l'intérieur de ce bloc, même au-delà du texte de l'élément.
Pour limiter le déclenchement de l'évènement uniquement à la zone de texte, il faut enrober le noeud texte de chacun des éléments <li> par un élément qui est de type "display: inline".
Par conséquent, vous devez parcourir dynamiquement les éléments <li> de la liste pour insérer ces éléments qui contiendront les textes des <li>, de sorte que les évènements de la souris seront capturés sur les éléments et non sur les <li>.
582-P22-MA – Programmation d'animation pour le web 1
Groupe : 17612
2/6
1 et 2 (bis)- Générer dynamiquement la liste à niveaux multiples :
Vous pouvez choisir de traiter les points 1 et 2 en générant dynamiquement la liste à niveaux multiples (et les qui enrobent les textes) à partir, par exemple, de l'objet JavaScript suivant (cet objet sera également utilisé au point 4) :
Chaque propriété de cet objet "images" est le libellé d'un item de la liste. La valeur d'une propriété est elle-même un objet dont la propriété "niveau" indique le niveau de l'item dans la liste.
Les items sont ordonnés de sorte que la liste de niveau N d'un item "I" est incluse dans la liste la plus proche de niveau N-1 qui précède cet item "I".
3- Survol de la souris d'un élément de la liste :
Au survol d'un élément de la liste, en ciblant l'élément qu'il contient, utilisez l'API classList pour mettre le texte en gras avec une couleur différente. Lorsque la souris en sort, utilisez également l'API classList pour qu'il retrouve son affichage normal.
4- Afficher l'image associée à un item de la liste, au survol de la souris :
Utilisez par exemple l'objet "images" du point "1 et 2 (bis)" pour afficher le fichier image associé à chaque propriété de cet objet "images". Aucune image n'est affichée lorsque la souris ne survole aucun lien.
Si le nom du fichier est vide, comme par exemple pour la propriété "Autre", affichez le fichier "No_image_available.png" qui se trouve dans le dossier "images" avec les autres fichiers images.
Les images peuvent avoir des dimensions et des proportions différentes, faites en sorte de les centrer verticalement et horizontalement dans une zone fixe d'affichage, par exemple une zone div d'id "affichage" de 500px sur 500px. L'image prendra toute la largeur ou toute la longueur de la zone pour sa dimension la plus grande si elle est supérieure à 500px. Ces cadrages peuvent être obtenus en CSS.
582-P22-MA – Programmation d'animation pour le web 1
Groupe : 17612
3/6
Image de 353px / 529px centrée horizontalement et recadrée sur toute la hauteur de 500px
Image de 332px / 438px centrée horizontalement et verticalement dans la div de 500px / 500 px
582-P22-MA – Programmation d'animation pour le web 1
Groupe : 17612
4/6
Image "No_image_available.png" lorsqu'il n'y a pas de fichier image associé
582-P22-MA – Programmation d'animation pour le web 1
Groupe : 17612
5/6
5- Masquer ou afficher la sous-liste correspondante, au clic sur un item :
Vous devez faire en sorte que lorsqu'un item de la liste est cliqué, la sous-liste correspondante est affichée ou cachée. Pour ce faire, vous devez récupérer la sous-liste <ul> adjacente à l'élément <li> et lui attribuer ou lui enlever la classe ".cache { display: none; }".
Vous pouvez également faire précéder chaque item qui possède une sous-liste, d'un signe qui indique qu'une sous-liste peut s'ouvrir ou au contraire se refermer. Par exemple le signe  (triangle vers le haut, codes "&utrif; et \u25B4) indique d'une sous-liste peut se refermer et le signe  (triangle vers le bas, codes &dtrif; et \u25BE) indique qu'une sous-liste peut s'ouvrir. Vous pouvez choisir d'autres symboles dans la page des entités de caractères: https://dev.w3.org/html5/html-author/charref. Cet ajout de symboles n'est pas noté.
Exemples :
Lors d'un premier clic sur "Peintres du 20ième siècle" nous cachons la sous-liste correspondante, et lorsque nous cliquons une deuxième fois, la sous-liste réapparaît :
582-P22-MA – Programmation d'animation pour le web 1
Groupe : 17612
6/6
Barème de notation : total 25 pts
Point 1 (Créer une liste à niveaux multiples) 5 pts
Point 2 (Insérer dynamiquement un dans chaque <li>) 5 pts
Point 3 (Survol de la souris d'un élément de la liste) 5 pts
Point 4 (Afficher l'image associée à un item de la liste, au survol de la souris) 5 pts
Point 5 (Masquer ou afficher la sous-liste correspondante, au clic sur un item) 5 pts
Si vous choisissez de traiter les points 1 et 2 comme en "1 et 2 (bis)", cette génération dynamique de la liste à niveaux multiples sera évaluée sur 10 pts.
Consignes :
Utilisez la méthode addEventListener() pour gérer les évènements et exploitez l'objet Event. Ne créez des gestionnaires d'évènements que pour l'élément <section> d'id "liste".
Remise :

**javatwister** · 20/12/2019, 12h27

Bonjour,

Tu as donc une correspondance parfaite entre les span créés et le nombre d'entrées dans ton tableau d'images: le contenu textuel de chaque span correspond au nom de propriété de l'élément du tableau en rapport;
Y a plus qu'à...

Pour le cache / décache, prends en compte uniquement la propriété niveau (si c'est 1 ou 2, on peut cacher / décacher les noeuds enfants, en vérifiant si le premier enfant, par exemple, a la classe .cache ou pas).

**javatwister** · 21/12/2019, 15h14

bon allez c'est bientôt noël...

http://javatwist.imingo.net/imagier.htm

J'ai pas tout fait parce que le cahier des charges me gonflait un peu et que je suis de la vieiiiillle école; mais au moins t'as le principe;

Code javascript :

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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
window.addEventListener("load",documentLoaded);
 
function documentLoaded() {
 
	// objet "tableau de correspondance" entre les libellés des LI et leur fichier image
	// vous pouvez choisir un autre thème avec d'autres images
	// =================================================================================
	const images = {
		"Personnages de la saga Star Wars"	:	{"niveau" : 1, "fichier": "sm01.gif"},
        "Episode IV"				        	:	{"niveau" : 2, "fichier": "sm17.gif"},
		"Princesse Leia"			        		:	{"niveau" : 3, "fichier": "sm03.gif"},
		"Luke Skywalker"							:	{"niveau" : 3, "fichier": "sm44.gif"},
		"Hans Solo"			     					:	{"niveau" : 3, "fichier": "sm55.gif"},
		"Dark Vader"								:	{"niveau" : 3, "fichier": "sm06.gif"},
		"Autre"                                 :   {"niveau" : 2, "fichier": "sm60.gif"},
		"Obi wan Kenobi"		        			:	{"niveau" : 3, "fichier": "sm08.gif"},
		"C3P0"										:	{"niveau" : 3, "fichier": "sm09.gif"},
		"Stormtrooper"								:	{"niveau" : 3, "fichier": "sm50.gif"},
		"Vaisseaux de la saga Star Wars"    :	{"niveau" : 1, "fichier": "sm52.gif"},
        "The Empire strike back"	            :	{"niveau" : 2, "fichier": "sm59.gif"},
		"Etolie de la mort"							:	{"niveau" : 3, "fichier": "sm13.gif"},
		"Caza Tie"									:	{"niveau" : 3, "fichier": "sm14.gif"},
        "Le Retour du Jedi"						:	{"niveau" : 2, "fichier": "sm15.gif"},
		"Vaisseaux 1"		       					 :	{"niveau" : 3, "fichier": "sm16.gif"},
	};
 
 	const monSpan = document.getElementById("liste");
	const aff=document.getElementById("affichage") 
 
	monSpan.querySelectorAll('li').forEach(function(v){
		let eSpan = document.createElement("span");
                eSpan.appendChild(v.firstChild)
                v.insertBefore(eSpan,v.firstChild);
        })
 
	monSpan.addEventListener("mouseover",function(e){	
		const ev=e.target;
		const t=ev.textContent
 
		if (ev.nodeName == "SPAN"){
			const im=document.createElement("img");
			im.src=images[t.trim()].fichier;
			aff.appendChild(im);
			event.target.style.color = "red";
 		}
 	},false);
 
	monSpan.addEventListener("mouseout",function(e){	
		if (e.target.nodeName == "SPAN" && aff.firstChild){
			aff.removeChild(aff.firstChild);
			event.target.style.color = "black";
		};
 	},false);
 
 
	monSpan.addEventListener("click",function(e){	
		const ev=e.target;
		const t=ev.firstChild.textContent;
 
		if (ev.nodeName == "SPAN" && images[t.trim()].niveau!=3){
			ev.nextSibling.classList=
			ev.nextSibling.classList=="cache"
			? "vu" 
			: "cache"
		}
	},false);
}

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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html lang="fr">
 
<head>
   <title>Tp2</title>
    <meta charset="utf-8">
<style type="text/css">
#affichage{
        width:300px;
        height:300px;
        text-align:center;
        display:table-cell;
        vertical-align:middle;
 
}
 
#affichage img{
        max-width:300px;
        max-height:300px;
}
 
#liste {
        float:left;
        margin-right:100px;
        width:300px;
}
        
.cache{
        display:none
}
 
.vu{
        display:block
}
</style> 
 
 
</head>
 
<body>
 
    <main>
        <section id="liste">
            <ul>
                <li>Personnages de la saga Star Wars
                    <ul>
                        <li>Episode IV
                            <ul>
                                <li>
                                    Princesse Leia
                                </li>
                                <li>
                                    Luke Skywalker
                                </li>
                                <li>
                                    Hans Solo
                                </li>
                                <li>
                                    Dark Vader
                                </li>
                            </ul>
                        </li>
                        <li>Autre
                            <ul>
                                <li>
                                    Obi wan Kenobi
                                </li>
                                <li>
                                    C3P0
                                </li>
                                <li>
                                    Stormtrooper
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>                
                <li>Vaisseaux de la saga Star Wars
                    <ul>
                        <li>The Empire strike back
 
                            <ul>
                                <li>
                                    Etolie de la mort
                                </li>
                                <li>
                                    Caza Tie
                                </li>
                            </ul>
                        </li>
                        <li>Le Retour du Jedi
                            <ul>
                                <li>
                                    Vaisseaux 1
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
 
        </section>
 
        <div id="affichage"></div>
 
     </main>
 
 
 
</body>
 
</html>

**javatwister** · 24/12/2019, 10h46

Autre tentative, en créant la liste en JS;

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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html lang="fr">
 
<head>
   <title>Tp2</title>
    <meta charset="utf-8">
    <!--<title>TP2 programmation JavaScript, Consultation d'une arborescence thématique illustrée</title>-->
<script>
window.addEventListener("load",documentLoaded,false);
 
function documentLoaded() {
 
        // objet "tableau de correspondance" entre les libellés des LI et leur fichier image
        // vous pouvez choisir un autre thème avec d'autres images
        // =================================================================================
        const images = {
                "Personnages de la saga Star Wars"      :       {"niveau" : 1, "fichier": "sm01.gif"},
        "Episode IV"                                            :       {"niveau" : 2, "fichier": "sm17.gif"},
                "Princesse Leia"                                                :       {"niveau" : 3, "fichier": "sm03.gif"},
                "Luke Skywalker"                                                        :       {"niveau" : 3, "fichier": "sm44.gif"},
                "Hans Solo"                                                             :       {"niveau" : 3, "fichier": "sm55.gif"},
                "Dark Vader"                                                            :       {"niveau" : 3, "fichier": "sm06.gif"},
                "Autre"                                 :   {"niveau" : 2, "fichier": "sm60.gif"},
                "Obi wan Kenobi"                                                :       {"niveau" : 3, "fichier": "sm08.gif"},
                "C3P0"                                                                          :       {"niveau" : 3, "fichier": "sm09.gif"},
                "Stormtrooper"                                                          :       {"niveau" : 3, "fichier": "sm50.gif"},
                "Vaisseaux de la saga Star Wars"    :   {"niveau" : 1, "fichier": "sm52.gif"},
        "The Empire strike back"                    :   {"niveau" : 2, "fichier": "sm59.gif"},
                "Etolie de la mort"                                                     :       {"niveau" : 3, "fichier": "sm13.gif"},
                "Caza Tie"                                                                      :       {"niveau" : 3, "fichier": "sm14.gif"},
        "Le Retour du Jedi"                                             :       {"niveau" : 2, "fichier": "sm15.gif"},
                "Vaisseaux 1"                                                    :      {"niveau" : 3, "fichier": "sm16.gif"},
        };
 
        const monSpan = document.getElementById("liste");
        const aff=document.getElementById("affichage") 
        const ul=document.createElement("ul");
        monSpan.appendChild(ul);
        let last;
        for(i in images){
                let li=document.createElement("li");
                let eSpan = document.createElement("span");
                li.appendChild(eSpan);
                eSpan.textContent=i;
 
                if(images[i].niveau==1){
                        let ul2=document.createElement("ul");
                        ul.appendChild(li);
                        li.appendChild(ul2);
                        last=ul.querySelectorAll("ul")[ul.querySelectorAll("ul").length-1]
                }
                else if(images[i].niveau==2){
                        let ul3=document.createElement("ul");
                        li.appendChild(ul3)
                        last.appendChild(li);
                }
                else{   
                        let last2=ul.querySelectorAll("ul")[ul.querySelectorAll("ul").length-1]
                        last2.appendChild(li);
                }               
        }
 
        monSpan.addEventListener("mouseover",function(e){       
                const ev=e.target;
                const t=ev.textContent
                if (ev.nodeName == "SPAN"){
                        const im=document.createElement("img");
                        im.src=images[t].fichier;
                        aff.appendChild(im);
                        event.target.style.color = "red";
                }
        },false);
 
        monSpan.addEventListener("mouseout",function(e){        
                if (e.target.nodeName == "SPAN" && aff.firstChild){
                        aff.removeChild(aff.firstChild);
                        event.target.style.color = "black";
                };
        },false);
 
 
        monSpan.addEventListener("click",function(e){   
                const ev=e.target;
                const t=ev.firstChild.textContent;
                if (ev.nodeName == "SPAN" && images[t].niveau!=3){
                        ev.nextSibling.classList=
                        ev.nextSibling.classList=="cache"
                        ? "vu" 
                        : "cache"
                }
        },false);
}
 
</script>
<style type="text/css">
 
#affichage{
        border:1px black solid;
        width:300px;
        height:300px;
        text-align:center;
        display:table-cell;
        vertical-align:middle;
 
}
ul {
        margin-top:0px;
}
 
#affichage img{
        max-width:300px;
        max-height:300px;
}
 
#liste {
        border:1px black solid;
        float:left;
        margin-right:100px;
        width:300px;
        height:auto;
}
        
.cache{
        display:none
}
 
.vu{
        display:block
}
 
</style> 
 
</head>
 
<body>
 
    <main>
        <section id="liste">
 
        </section>
 
        <div id="affichage"></div>
 
    </main>
 
</body>
 
</html>

**psychadelic** · 24/12/2019, 14h59

vu l'énoncé, je pense que le prof s'attend à une utilisation d'event delegation... mais j'ai jamais essayé ça en mouseover de l'ensemble des éléments d'une liste...