[HTML] Menu Dynamique et Frames comment indiquer la destination

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

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, 11h21

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, 11h27

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, 11h37

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, 12h42

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, 13h08

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 ^^

**MasterOfChakhaL** · 23/06/2006, 13h20

pour Ekin0X:

Code :

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

1
2
3
4
5
 
<frameset cols="25%,*">
  <frame src="menu.html" name="Menu" target="Contenu">
  <frame src="Contenu.html" name="Contenu">
</frameset>

je pense que si ton frameset ressemble à ca, tu n'auras plus de souci avec tes liens

**Ekin0X** · 23/06/2006, 13h37

toujours le même soucis, quand je clik sur le lien, une page web s'ouvre avec mon lien à l'intérieur...

( j'utilise le bloc note )

j'ai sa :

Code :

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

<li><b>| <A HREF="antivirus.html";"target="_blank">Antivirus</a> |</li></b>

Pour mon menu

et sa :

Code :

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

1
2
3
4
<frameset cols="25%,*">
  <frame src="frame.html" name="Menu" target="Contenu">
  <frame src="index.html" name="Index">
</frameset>

pour ma page principale

**MasterOfChakhaL** · 23/06/2006, 13h47

Envoyé par Ekin0X

toujours le même soucis, quand je clik sur le lien, une page web s'ouvre avec mon lien à l'intérieur...

ca c'est normal. C'est toi qui lui dit de faire ca avec target="_blank"

target signifie la cible, donc il faut lui indiquer une cible qu'il connait...

si je t'ai bien suivi, dans ta page index.html tu poses un jeu de frame dont l'une doit charger index.html...
c'est le serpent qui se mord la queue

placer un attribut target dans une frame signifie que tous les liens cliqués dans cette frame auront pour destination la frame indiquée dans le target.
Le fait de définir cet attribut fait que tu n'as plus le besoin de le définir dans les liens.
De plus les ";" dans ta balise a ne sont pas corrects...

En gros,
target doit donc contenir le name d'une de tes frames (ou alors une valeur spéciale comme _blank par exemple)

**Ekin0X** · 23/06/2006, 13h57

C'est pas grâve je vais laisser tel quel !

Merci de ton aide

Mon lien s'affichera dans une autre page web, je trouve que c'est mieux finalement.

[HTML] Menu Dynamique et Frames comment indiquer la destination

HTML

Discussions similaires

Partager

Partager