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 <span> 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 <span> 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 <span> qui contiendront les textes des <li>, de sorte que les �v�nements de la souris seront captur�s sur les �l�ments <span> 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 <span> 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 <span> 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 <span> 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 :