[HTML] Menu Dynamique et Frames comment indiquer la destination
Bonjour,
Ceci doit être mon premier Post, étant donné que déjà beaucoup de questions que je me posais ont déjà été abordée. (J'en profite pour remercier tout ceux qui ont posé ces questions avant moi :mrgreen: )
Cependant je me trouve dans une impasse.
J'ai Crée un site pour aider mes collègues de bureau et je voudrais leur donner une nouvelle version avec un menu dynamique.
J'ai donc
La page d'accueil Accueil.html qui définit les Frames (au nombres de 3)
Code:
1
2
3
4
5
6
7
8
9
10
11
12
| <HTML>
<HEAD>
<TITLE>Accueil</TITLE>
<FRAMESET ROWS="20%,*">
<FRAME SRC="Titre.html" NAME="Titre" FRAMEBORDER=0>
<FRAMESET COLS="25%,*">
<FRAME SRC="menu.html" NAME="Menu" FRAMEBORDER=0>
<FRAME SRC="Contenu.html" NAME="Contenu" FRAMEBORDER=0>
</FRAMESET>
</FRAMESET>
</FRAMESET>
</HTML> |
La page Titre.html qui contient juste une image donc je ne met pas le code
La page Menu.html qui contient le Menu Dynamique
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
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
| <HTML>
<HEAD>
<STYLE>
<!--
.parent {
font-family: verdana;
font-weight: bold;
font-size: 10pt;
margin-top: 10;
cursor: hand;
}
.child {
font-size: 10pt;
font-weight: normal;
margin-left: 14pt;
}
a:hover { color:red; }
-->
</STYLE>
<SCRIPT LANGUAGE=javascript>
<!--
var intCount = 0;
//-Fonction d'ajout d'entrées principales-------------------------
function DynamicMenu_addParent(strName) {
var strID = 'ID' + intCount++;
var strTemp = '<DIV ID="' + strID + '" CLASS="parent"';
strTemp += ' onClick="expandCollapse(this);">';
strTemp += '<IMG SRC="Images/left.gif" Height="12">';
strTemp += ' ' + strName ;
strTemp += '<DIV STYLE="display: none" CLASS="child"></DIV>';
strTemp += '</DIV>';
this.div.innerHTML += strTemp;
this.currentChild = document.getElementById(strID);
}
//-Fonction d'ajout de liens dans le menu-------------------------
function DynamicMenu_addChild(strName,strURL) {
var strTemp = '<A HREF="' + strURL + '"'
+ ' onClick="cancelBubble(arguments[0]);">'
+ strName + '</A><BR>';
if (document.all) {
this.currentChild.children[1].innerHTML += strTemp;
} else {
this.currentChild.childNodes[2].innerHTML += strTemp;
}
}
//-inhibe la cascade d'évènements au DIV conteneur----------------
function cancelBubble(netEvent) {
if (document.all) {
window.event.cancelBubble = true;
} else {
netEvent.cancelBubble = true;
}
}
//-Contracte ou expanse le menu-----------------------------------
function expandCollapse(objElement) {
if (document.all) {
var imgIcon = objElement.children[0];
objElement = objElement.children[1];
} else {
var imgIcon = objElement.childNodes[0];
objElement = objElement.childNodes[2];
}
if (objElement.style.display == "none") {
objElement.style.display = "block" ;
imgIcon.src = "Images/bottom.gif" ;
} else {
objElement.style.display = "none" ;
imgIcon.src = "Images/left.gif" ;
}
}
//-Fonction de création de menu dynamique-------------------------
function DynamicMenu() {
var id = "Menu" + intCount++;
document.write('<DIV Id="' + id + '"></DIV>');
this.div = document.getElementById(id);
this.currentChild = null;
this.addParent = DynamicMenu_addParent;
this.addChild = DynamicMenu_addChild;
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT Language="Javascript">
<!--
var menu = new DynamicMenu();
menu.addParent("Le langage Javascript");
menu.addChild("Page d'accueil",
"../javascript.html");
menu.addChild("Etude du langage",
"../Langage/ecmascript.html");
menu.addChild("Les objets clients",
"../ObjetsClients/javascript.html");
menu.addChild("La bibliothèque de code",
"../Bibliotheque/index.html");
menu.addChild("Le fabuleux J-Project",
"../J-Project/jproject.html");
menu.addParent("Autres langages du Web");
menu.addChild("Le langage HTML",
"../../Html/index.html");
menu.addChild("Le langage XML",
"../../Xml/index.html");
menu.addChild("Le langage CSS",
"../../Css/styles.html");
menu.addParent("Quelques petits jeux");
menu.addChild("Dynamic PingPong",
"../../../../../Programmes/Jeux/PingPong/PingPong.html");
menu.addChild("Casse briques", "gamesCasseBriques.html");
//-->
</SCRIPT>
</BODY>
</HTML> |
La page Contenu.html qui devrait contenir les différentes pages.
Cependant voilà, quand je monte l'ensemble du "binz" quand je clique sur un lien il me charge la page dans le Frame du Menu.
Mes questions :
Où dois je intervenir pour que sur le "Onclick" il me charge la page dans le Frame Contenu sans toucher aux autres frames ?
Dois je mettre les attributes FRAMESET dans le corps du menu.html ?
PS : je suis un débutant qui s'autoforme sur Internet et avec quelques livres. Excusez moi donc si je m'exprime de manière pas très clair
