[DOM] menu sur plusieurs pages

Version imprimable

bonjour à tous

je suis débutante en javascript. j'ai toutefois réussi à réaliser un petit menu sympas (http://perso.orange.fr/gs.anne-cartier/index2.htm) : regarder celui de gauche

mon problème est relatif au menu du haut : il est commun à toutes mes pages, mais si j'ai une modif à apporter, faut que j'ouvre toutes les pages et en avant le copier-coller !

le script de ce menu est le suivant :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<table height="134" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr> 
    <td width="168" rowspan="3" valign="top"><a href="index2.htm"><img src="Images/logo.jpg" width="168" height="134" border="0"></a></td>
    <td width="807" height="28" align="left" valign="top"><img src="Images/adresse.png" width="806" height="28"></td>
  </tr>
  <tr> 
    <td height="39" align="left" valign="top"><a href="actu-ecol.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('actuecol','','Images/b_actu-ecol2.png',1)"><img src="Images/b_actu-ecol1.png" name="actuecol" width="100" height="39" border="0"></a><a href="actu-clg.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('actuclg','','Images/b_actu-clg2.png',1)"><img src="Images/b_actu-clg1.png" name="actuclg" width="100" height="39" border="0"></a><a href="agendaecol.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('agendaecol','','Images/b_ephem-ecol2.png',1)"><img src="Images/b_ephem-ecol1.png" name="agendaecol" width="100" height="39" border="0"></a><a href="agendaclg.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('agendaclg','','Images/b_ephem-clg2.png',1)"><img src="Images/b_ephem-clg1.png" name="agendaclg" width="100" height="39" border="0"></a><a href="organigramme.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('organigramme','','Images/b_orga2.png',1)"><img src="Images/b_orga1.png" name="organigramme" width="100" height="39" border="0"></a><a href="educ.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('projet','','Images/b_educ2.png',1)"><img src="Images/b_educ1.png" name="projet" width="100" height="39" border="0"></a><a href="pastorale.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('pastorale','','Images/b_past2.png',1)"><img src="Images/b_past1.png" name="pastorale" width="100" height="39" border="0"></a><a href="historique.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('historique','','Images/b_hist2.png',1)"><img src="Images/b_hist1.png" name="historique" width="100" height="39" border="0"></a></td>
  </tr>
  <tr> 
    <td height="67" align="center" valign="top">&nbsp;</td>
  </tr>
</table>

ce qui a pour conséquence que chaque image se recahrge à chaque changement de page...:oops:

existe-t-il un moyen sans utiliser de frame pour enregistrer ce menu en javascript , de sorte à faire les changements éventuels une seule fois et que la mise à jour se fasse sur toutes les pages ?

si oui, merci de me dire comment ...

GRAND MERCI à celui ou celle qui me trouve une solution exploitable. !:yaisse2:

A bientôt de vous lire,
Elodie

14/12/2007, 10h47
SpaceFrog

avec un Iframe :mouarf:

il te suffirait de faire générer ce menu au moyen du DOM

par un script avec des document.createElement...

puis tu externalise ton script et tu l'appelles sur toutes les pages ...
14/12/2007, 11h02
E.Bzz

Bonjour,
il y a un peu plus simple (et sans iframe).
La balise <object>, comme indiqué dans la FAQ HTML (car c'est plus un problème HTML que JS ;) )
La balise include

Code:



Dans les deux cas, il faut faire un fichier html ne contenant que ton menu. C'est ce fichier que tu appelleras dans les balises ci-dessus.
Tu positionneras la balise retenue dans toutes les pages où doit apparaitre ton menu à la place du code actuel ...

A+
14/12/2007, 12h02
elodie07

c'est presque ça

mais pas encore au point. je m'explique : en tentant d'unclure la balise

<object data="menutop.htm" type="text/html" name="menutop" width="1000" height="140" align="top" border="0"></object>

ça marche à laperfection sous firefox :P, mais pas sous IE :roll:...
14/12/2007, 12h20
E.Bzz

Citation:

Envoyé par elodie07

ça marche à laperfection sous firefox :P, mais pas sous IE :roll:...

Et avec le #include ?

A+
14/12/2007, 13h20
elodie07

mauvaise pioche...
le # include ne fonctionne ni sur l'un, ni sur l'autre...

à moins que j'ai mal insérer mon code :

1)méthode #include =
Code:

1 2 3 4 5 6 7 8 9 <body> <div id="haut"> <?php // mon menutop.php est à la racine du site, comme les autres pages include("menutop.php"); ?> </div> blablabla </body>
2) méthode object =
Code:

1 2 3 4 5 <body> <object data="menutop.htm" type="text/html" name="menutop" width="1000" height="140" align="top" border="0"> </object> blablabla </body>
avec la méthode object, OK sous firefox, mais sous IE, c'est comme si j'avais une frame en haut de ma page dans laquelle apparait bien mon menu, mais au 1er plan, en "recouvrant" les calques contenus dans ma page...

aurai-je zappé quelque chose ?
14/12/2007, 14h58
E.Bzz
Citation:

Envoyé par elodie07

aurai-je zappé quelque chose ?

Oui, je pense : mon exemple pour le #include :mrgreen:

Tu as fais un include au sens PHP (qui devrait fonctionner aussi, mais PHP n'étant pas mon truc :? ), et non HTML.
Reprend exactement la syntaxe : chez moi ça fonctionne sous IE ...
Code:

1 2 3 4 5 6 <body> <div id="haut">  </div> blablabla </body>
Remarque :
menutop.php ne doit contenir que ta table (pas de <html> et <body>) ...

EDIT : renomme le en menutop.html : le code est en dur et l'extension peut (peut-être) poser problème ...

A+
14/12/2007, 15h11
SpaceFrog

ça limite à IE non ?

toujours pas...

(1) sur menutop.html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<table width="975" height="134" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr> 
    <td width="168" rowspan="3" valign="top"><a href="index2.htm"><img src="Images/logo.jpg" width="168" height="134" border="0"></a></td>
    <td width="807" height="28" align="left" valign="top"><img src="Images/adresse.png" width="806" height="28"></td>
  </tr>
  <tr> 
    <td height="39" align="left" valign="top"><a href="actu-ecol.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('actuecol','','Images/b_actu-ecol2.png',1)"><img src="Images/b_actu-ecol1.png" name="actuecol" width="100" height="39" border="0"></a><a href="actu-clg.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('actuclg','','Images/b_actu-clg2.png',1)"><img src="Images/b_actu-clg1.png" name="actuclg" width="100" height="39" border="0"></a><a href="agendaecol.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('agendaecol','','Images/b_ephem-ecol2.png',1)"><img src="Images/b_ephem-ecol1.png" name="agendaecol" width="100" height="39" border="0"></a><a href="agendaclg.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('agendaclg','','Images/b_ephem-clg2.png',1)"><img src="Images/b_ephem-clg1.png" name="agendaclg" width="100" height="39" border="0"></a><a href="organigramme.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('organigramme','','Images/b_orga2.png',1)"><img src="Images/b_orga1.png" name="organigramme" width="100" height="39" border="0"></a><a href="educ.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('projet','','Images/b_educ2.png',1)"><img src="Images/b_educ1.png" name="projet" width="100" height="39" border="0"></a><a href="pastorale.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('pastorale','','Images/b_past2.png',1)"><img src="Images/b_past1.png" name="pastorale" width="100" height="39" border="0"></a><a href="historique.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('historique','','Images/b_hist2.png',1)"><img src="Images/b_hist1.png" name="historique" width="100" height="39" border="0"></a></td>
  </tr>
  <tr> 
    <td height="67" align="center" valign="top">&nbsp;</td>
  </tr>
</table>
 
(2) sur MaPage.htm
 
</head>	
<body>
<div id="haut">
<!--#include file="menutop.html" -->
</div>

Même avec cela, ça ne s'affiche même pas ni dans IE, ni dans Firefox :evilred:

14/12/2007, 15h18
elodie07

Citation:

Envoyé par SpaceFrog

ça limite à IE non ?

oui, en tout cas pour la méthode <object>

parce que la méthode <#include> ne fonctionne pas du tout...
14/12/2007, 15h38
E.Bzz

Citation:

Envoyé par SpaceFrog

ça limite à IE non ?

Possible.
C'est une syntaxe que j'utilise, mais je developpe que "pour" IE ...
Avant de poster j'avais trouvé cette même solution également proposée par Bisûnûrs sans mention de restriction IE, d'où ma réponse ici.

@Elodie > re-vérifie les extensions / repertoires, car ton exmple semble bon ...
A moins que ça soit IE 7, auquel cas je n'ai pas testé, pour le coup ...

A+
14/12/2007, 15h51
elodie07

Citation:

Envoyé par E.Bzz

Possible.
C'est une syntaxe que j'utilise, mais je developpe que "pour" IE ...
Avant de poster j'avais trouvé cette même solution également proposée par Bisûnûrs sans mention de restriction IE, d'où ma réponse ici.

@Elodie > re-vérifie les extensions / repertoires, car ton exmple semble bon ...
A moins que ça soit IE 7, auquel cas je n'ai pas testé, pour le coup ...

A+

IE version 6 (win98 oblige...)
pourtant j'ai tout revérifié : le menutop ET les pages du site sont directement à la racine, tous avec l'extantion .HTM sauf menutop.HTML

C'est vrai que pour l'instant, pagesperso.orange ne gère pas le PHP
mais je suis en cours de négociation avec mon chef d'établissement pour changer d'hébergeur... s'il accepte, ça va être une autre paire de manches pour moi car je n'y pige rien en langage php...:oops: