modifier une arborescence dynamique [Fait]

**discusaigon** · 29/12/2008, 10h41

Bonjour,

je préviens d'avance, je suis débutant en html, programation, ...

je travail sur un site qui a été décrit en détail il y a quelques années sous la forme d'un document en html, avec un menu dynamique en javascript.

voila, ce boulot a été fait par un prestataire informaticien externe, et j'aimerai comprendre comment fonctionne la programmation de ce projet html pour pouvoir mettre à jour le document moi même sans passer par l'extérieur.

Pour la modification interne des pages html cela ne me pose pas de problème.

Par contre, j'aimerai pouvoir modifier la structure du site c'est à dire :

modifier l'arborescence dynamique de manière à pointer vers de nouvelles pages html.

J'ai essayé de creuser mais j'ai un peu du mal à me mettre dedans :

voici une extrait de l'aide du site html :

• Modification lourde (ajout / suppression / renommage de pages) :
· Un outil d'édition HTML ainsi que la connaissance du javascript sont nécessaires (cf. nota).

pour l'outil d'édition html, j'ai dreamweaver et je sais utiliser les fonctions de bases donc c'est bon par contre il me manque une petite connaissance du javascript.

Il y a un fichier script.js à la racine du site avec pas mal d'indications sur la définition des fonctions.

exemple :

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
// * * * F O N C T I O N S   G E N E R A L E S * * * 
 
 
function NoRightButton(){    // Inhibe le menu contextuel (bouton droit souris)
   if (event.button==2){
     alert("Utilisez le bouton gauche");
   }
}
 
function DoOver(color) {
    oldcolor=window.event.srcElement.style.color
    window.event.srcElement.style.color=color
}
 
function DoOut() {
	window.event.srcElement.style.color=oldcolor;
}
 
function SomOver(oItem) {
 
	if(document.readyState != "complete") return;
	oItem.className = 'Som2';
	window.event.cancelBubble = true;
}
 
function SomOut(oItem) {
 
	if(document.readyState != "complete") return;
	oItem.className = 'Som1';
	window.event.cancelBubble = true;
}
 
 
// * * * FONCTION MAJ : Mise A Jour des variables de navigation * * *
 
function MAJ(navig,prec,info,suiv,Somm,NomRub) {     // Mise A Jour des variables :
 
parent.parent.nav=navig;                  //   bandeau de navigation
                                          //    1 : pour placer une page dans le cadre 'principal'
                                          //   12 : pour placer une page précédente dans le cadre 'principal'
                                          //        et une page suivante dans le cadre 'Fiche'
                                          //    2 : pour placer une page dans le cadre 'Fiche'
                                          //   21 : pour placer une page précédente dans le cadre 'Fiche'
                                          //        et une page suivante dans le cadre 'principal'
  if (navig==0){                   //   (si pas de bandeau : navig = 0)
	parent.parent.FramesGene.rows="17,*,0";
  }
  else{
        parent.parent.FramesGene.rows="17,*,29";
  }
 
parent.parent.pagep=prec;                 //   nom de la page précédente
  if (prec==null){                 //   (si première page : pas de page précédente)
	parent.parent.bas_droite.IMPP.style.display='none';
  }
  else{
        parent.parent.bas_droite.IMPP.style.display='';
  }
parent.parent.pages=suiv;                 //   nom de la page suivante
  if (suiv==null){                 //   (si dernière page : pas de page suivante)
	parent.parent.bas_droite.IMPS.style.display='none';
  }
  else{
        parent.parent.bas_droite.IMPS.style.display='';
  }
parent.parent.info=info;                  //   numéro de la page en cours
parent.parent.bas_droite.NumPage.innerText=parent.parent.info;
 
if (Somm=='S'){                    //   (si page précédente est un sommaire : changement d'image)
	Url = window.parent.parent.frames['sommaire'].location.href;        // calcul de la racine du site
	chemin = Url.substr(0,Url.lastIndexOf("/"))+"/images/Sommaire.gif"; // 
	parent.parent.bas_droite.IMPP.src=chemin;
  }
  else{
	Url = window.parent.parent.frames['sommaire'].location.href;        // calcul de la racine du site
	chemin = Url.substr(0,Url.lastIndexOf("/"))+"/images/PagePrec.gif"; // 
	parent.parent.bas_droite.IMPP.src=chemin;
  }
 
if (NomRub!=null){
	var i;                     // Mise à jour des couleurs des rubriques du bandeau haut
	var bouton = parent.parent.bandeau.document.all.tags("a");
    for (i=0; i<bouton.length; i++)
    {
            bouton(i).style.color ="#FFFFFF";
    }
    parent.parent.bandeau.eval(NomRub).style.color ="#00FF00";
    oldcolor="#00FF00";
  }
 
}

et aussi un script à l'intérieur de la page html du 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
<script>
//<!--
var ver = 0;
var oldcolor;
var rubrique;
 
function DoOver(color) {
	oldcolor=window.event.srcElement.style.color
   window.event.srcElement.style.color=color;
}
 
function DoOut() {
    window.event.srcElement.style.color=oldcolor;
}
 
function CloseAllDiv() {      // 28/01/98  cache toutes les sous-divisions de la page
    var i;
    var div = document.all.tags("DIV");
 
    for (i=0; i<div.length; i++) {
 
        if (div(i).className == "Outline")
            div(i).style.display = "none";
    }
}
 
function ExpandCollapse()    //affiche la sous-division et ferme les autres
{
    var targetElement, parentDiv;
    i = window.event.srcElement.sourceIndex; 
   // is this link already nested in a DIV?
    for (parentDiv = window.event.srcElement.parentElement; parentDiv!=null; parentDiv = parentDiv.parentElement) { 
		 if (parentDiv.tagName=="DIV") {
            j=1;
            break;
        }
        if (parentDiv.tagName=="BODY") {
           for (j=1; (i+j) < document.all.length && document.all(i+j).tagName=="BR"; j++);
            j+=2;
            break;
        }
    }
    if (parentDiv==null) {
       for (j=1; (i+j) < document.all.length && document.all(i+j).tagName=="BR"; j++);
        j+=2;
        parentDiv = document.body;
    	}
 
    //make sure element is not off page (test for last link)
    if ( ((i+j)<document.all.length)  && (document.all(i+j).tagName == "DIV")) {
 
        if ( parentDiv.contains(document.all(i+j))==true 
            &&  (document.all(i+j).className == "Outline") ) {
            targetElement = document.all(i+j);
            if (targetElement.style.display == "none")
					{
					CloseAllDiv();
					targetElement.style.display = "";
					}
            else {
                	targetElement.style.display = "none";
            		}
        }
    }
 
    window.event.cancelBubble = true;
}
 
 
function Titrage(montitre,monmodule)   //  28/01/98  Met à jour le titre et les variables qui vont avec (module,rubrique)
{												// et affiche la page principe de base du module dans la fenetre principal
	var i;
	var oldmodule;   
	var bouton = document.all.tags("a");
    for (i=0; i<bouton.length; i++) {
            bouton(i).style.color ="#FFFFFF";
    }
	window.event.srcElement.style.color ="#00FF00";
	oldcolor="#00FF00";
	with (window.top.frames['titre'])
	{	
		oldmodule=document.all.MyText.Module;			// on récupère le nom de l'ancien module avant de le changer
		document.all.MyText.innerText = montitre;
		document.all.MyText.Module = monmodule;
		rubrique=document.all.MyText.Rubrique;
	}
	with (window.top.frames['bandeau']) 
	{	
		if (monmodule == 'securite')	
		{
		ChgRub('AccSecur');				//si on clique sur 'securité' , alors on force la rubrique à 'pbase2'
		}
		else
			if ((oldmodule == 'securite')||(oldmodule == 'aide'))		
			{
			ChgRub('Loc');			// si l'ancien module était 'securité' ou 'aide' alors on force le nouveau à 'pbase'
			}
			else
			{
			ChgRub('nochange');		// si l'ancien module n'était pas 'securité' alors on ne change pas la rubrique
			}
		}
}
//-->
</script>

Voila est ce que vous pouvez m'aider à partir de ces éléments ?

Merci d'avance.

**RomainVALERI** · 29/12/2008, 16h58

Deux remarques de premier abord :

- ce code est très daté ^^ il y a un certain nombre de choses qui ne s'écrivent plus de cette façon et vont probablement nécessiter une mise à jour.

- même sans le tester, je peux te dire que ce code ne fonctionnera (éventuellement) que sur IE. Entre autres, parce qu'il fait appel à plusieurs endroits à document.all qui n'est reconnu que par IE, mais aussi pour la propriété className, la méthode cancelBubble() de l'objet event, etc.

Pour ces deux raisons, il est à mon avis plus que raisonnable d'envisager au plus vite :

- soit une réécriture complète par tes soins,
- soit la récupération d'un code plus récent et portable auprès de sources contributives (comme... les cours et tutos de developpez.com ? ^^).

Quel que soit ton choix, n'hésite pas à revenir demander de l'aide en cours de route si tu coinces...

**discusaigon** · 29/12/2008, 21h57

Eh bien merci pour ce coup d'œil éclairé !!

au moins je ne perdrai pas mon temps à essayer de comprendre ce code obsolète.

Je suis disposé à effectuer une refonte de la structure de ce site html.

Mon objectif est donc de réaliser une arborescence dynamique verticale à gauche puis d'appeler des pages html à partir de cette arborescence.

J'ai cru comprendre que le langage javascript était le plus adapté pour ce genre de projet.

Par contre je veux bien être orienté vers la technique la plus appropriée (javascript ou autre et les tutos qui correspondent).

Merci.

Merci d'avance.

**discusaigon** · 29/12/2008, 23h10

en fait en parcourant les pages de tuto je m'aperçois qu'il existe beaucoup de techniques variées.

Il faut que je prenne le temps de voir tout ce qui existe pour créer un menu avec au moins trois niveau et quelle technique sera la plus adaptées pour mon projet.

pour l'instant j'ai donc vu :

javascript : à voir
menu déroulant avec les ccs http://css.developpez.com/tutoriels/menu-deroulant/ , ça parait simple à réaliser, l'inconvénient est que cela ne soit pas supporté par internet explorer.

si vous avez d'autres pistes, je cherche plutôt une technique "universelle" acceptée par n'importe quel navigateur de base.

**RomainVALERI** · 30/12/2008, 12h54

Si tu recherches quelque chose d'universel, sache que javascript est un choix technologique qui va exclure beaucoup plus de visiteurs potentiels qu'une bonne mise en page CSS. Peut-être y a-t-il moyen d'adapter l'excellent exemple que tu donnes, quitte à accepter quelques concessions en termes de rendu pour être portable.

L'idéal serait, selon le principe de dégradation élégante, de réaliser un menu ne recourrant pas à javascript, et d'ajouter, pour les visiteurs acceptant javascript, toutes les fonctionnalités supplémentaires souhaitées...

**Bovino** · 30/12/2008, 13h01

Tu as été voir par ici ?

modifier une arborescence dynamique [Fait]

JavaScript

Vue hybride

Discussions similaires

Partager

Partager