Discussion :

[elodie07]

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 :

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

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

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. !

A bientôt de vous lire,
Elodie

[SpaceFrog]

avec un Iframe

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

[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 :

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

<!--#include file="menu.html" -->

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+

[elodie07]

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 , mais pas sous IE ...

[E.Bzz]

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

Et avec le #include ?

A+

[elodie07]

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 :

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

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 :

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

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 ?

[E.Bzz]

aurai-je zappé quelque chose ?

Oui, je pense : mon exemple pour le #include

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 :

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

1
2
3
4
5
6
<body>
<div id="haut">
<!--#include file="menutop.php" -->
</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+

[SpaceFrog]

ça limite à IE non ?

[elodie07]

(1) sur menutop.html

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

[elodie07]

ça limite à IE non ?

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

parce que la méthode <#include> ne fonctionne pas du tout...

[E.Bzz]

ç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+

[elodie07]

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