[HTML] Menu Dynamique et Frames comment indiquer la destination

**remwideco** · 23/06/2006, 12h05

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

)

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 :

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

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 :

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
<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 += '&nbsp;' + 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

**Seb19** · 23/06/2006, 12h21

Il manque la destination vers laquelle afficher la page une fois que tu as cliqué sur le lien dans le menu

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
function DynamicMenu_addChild(strName,strURL) {
                var strTemp = '<A HREF="' + strURL + '"'
                            + ' onClick="cancelBubble(arguments[0]);" target="Contenu">'
                            + strName + '</A><BR>';

                if (document.all) {
                    this.currentChild.children[1].innerHTML += strTemp;
                } else {
                    this.currentChild.childNodes[2].innerHTML += strTemp;
                }
            }

**remwideco** · 23/06/2006, 12h27

Merci beaucoup Seb10

Cela fonctionne très bien, par hasard vois tu quelques abbérations dans ce type de site ?

Mais un très GRAAAAAAANNNNND MERCI

**<romain/>** · 23/06/2006, 12h37

par hasard vois tu quelques abbérations dans ce type de site

BEn déja la structure même de ton site avec des frames est pas vraiment super... Puisque tu commences a faires des sites, tu aurais du commencer par le (x)html + css. Ton code en serait d'autant plus lisible.

**remwideco** · 23/06/2006, 13h42

Merci romain de tes remarques.

En effet je commence le HTML mais je te rassure j'ai acheté un ouvrage sur le XHTML et les CSS de J.Engels.

Cependant avant de m'y pencher je souhaiterais prendre le problème dans l'ordre.

Autre question :

Dans cette partie du code, je voudrais que le portail aille chercher un document (.xls ou .doc)

Cependant quand je met l'adresse du document dans le "menu.addChild" il n'arrive pas à le trouver.

Il y a-t-il une valeur que j'aurais oublié ?

Code :

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

1
2
3
            menu.addParent("Cellule XXX");
                menu.addChild("Suivi Courriers",
                              "\\xxxx\xxxx\23 - DIR_E\02_FRD\03_TABLEAU_\attente_documents_A.xls");

Ou alors ouvrir le document dans une nouvelle fenêtre.

Je sais que ca marche, car l'ancienne version de mon site permettais d'y accéder (fait avec N|vu)

**Ekin0X** · 23/06/2006, 14h08

Salut à tous, je me permet de répondre à ce topic, car en fait j'ai le même soucis.

J'ai une frame et dans celle-ci un menu, et dans la frame de droite mon index.html

j'aimerai qu'en cliquant sur "menu" par exemple, que ma page se dirige vers le menu mais tout en restant dans la frame de droite et non celle de gauche ( ou il y a mon menu) et biensûr quand je click sur le lien la page s'affiche dans la frame gauche et non celle de gauche.

Après avoir lu ce topic j'ai vu qu'il fallait mettre target="nomdufichier" et c'est ce que j'ai fait, j'ai donc ceci :

Code :

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

<A HREF="nom.html";"target="nom.html">Nom</a>

mais comment faire pour que ma page ne s'affiche pas dans une autre fenetre mais dans ma frame de droite ?

Merci de vos réponses ^^

[HTML] Menu Dynamique et Frames comment indiquer la destination

HTML

Vue hybride

Discussions similaires

Partager

Partager