Fichier à part

J'ai un menu. Il est sur toutes mes pages, le prob, c ken je le modifie, je dois le modifier sur toutes les pages. Comment faire pour le mettre dans un fichier à part.





<script language=javascript>
<!--
function menu_show() {
for (i=0;i<menu_show.arguments.length;i++) {
document.getElementById(menu_show.arguments[i]).style.visibility='visible';}
}


function menu_hide() {
for (i=0;i<menu_hide.arguments.length;i++) {
document.getElementById(menu_hide.arguments[i]).style.visibility='hidden';}
}

function bouge()
{menu.style.top = document.body.scrollTop; }
window.onscroll=bouge;
-->
</script>

<style type="text/css">

<!--
.class1 {position:absolute; left:50px; top300px; width:150px; cursor:hand; visibility:'visible';}

.class2 {position:absolute; left:185px; top300px; width:150px; cursor:hand; visibility:'visible';}

.class3 {position:absolute; left:350px; top300px; width:150px; cursor:hand; visibility:'visible';}

.class4 {position:absolute; left:480px; top300px; width:150px; cursor:hand; visibility:'visible';}

.class5 {position:absolute; left:615px; top300px; width:150px; cursor:hand; visibility:'visible';}

.menu {font-family:'comic-sans-ms'; font-size:14px; font-weight:normal; background-color:lavender; color:blue;}

.submenu {background-color:lavender; font-family:'comic-sans-ms'; font-size:12px; font-weight:normal; color:black; visibility:'hidden';}

A {text-decoration:none; color:black;}

A:hover {background-color:burlywood; color:black;}


-->

</style>

<div name="menu"
id="menu"
style="position:absolute;top:0">

<!-- début menu 1 -->

<div id='div1' class='class1' onmouseover='menu_show("f1","f2","f3","f4","f5")' onmouseout='menu_hide("f1","f2","f3","f4","f5")'>


<table>

<tr>

<td class='menu'><CENTER>Réseau fédéral</CENTER></td>

</tr>

<tr>

<td id='f1' class='submenu'><A HREF="les membres du comite.html">Le comité</A></td>

</tr>

<tr><td id='f2' class='submenu'><A HREF="presentation dtr.htm"> Les DTR</A></td>

</tr>


<tr><td id='f3' class='submenu'><A HREF="construction.html">Comités départementaux</A></td>

</tr>

<tr><td id='f4' class='submenu'><a href="clubs alpins en rhone-alpes.html">Les clubs</a></td>

</tr>

<tr><td id='f5' class='submenu'><a href="password/espaceadministratif.htm" target=blank>Espace administratif</a></td>

</tr>

</table>

</div>

<!-- fin menu 1 -->

<div id='div2' class='class2' onmouseover='menu_show("s1","s2","s3")' onmouseout='menu_hide("s1","s2","s3")'>


<table>

<tr>

<td class='menu'><CENTER>Activités</CENTER></td>

</tr>

<tr>

<td id='s1' class='submenu'><A HREF="securite.htm">Prévention</A></td>

</tr>

<tr>

<td id='s2' class='submenu'><A HREF="compet.htm">Compétitions de ski alpinisme</A></td>

</tr>

<tr>

<td id='s3' class='submenu'><A HREF="groupesalpinisme.htm">Alpinisme : Groupes Espoirs</A></td>

</tr>

</table>

</div>

<div id='div3' class='class3' onmouseover='menu_show("t1","t2","t3")' onmouseout='menu_hide("t1","t2","t3")'>

<table>

<tr>

<td class='menu'><CENTER>Espace Jeunes</CENTER></td></tr>

<tr>

<td id='t1' class='submenu'><A HREF="cartera.htm">Carte Rhône-Alpes +</A></td>

</tr>

<tr><td id='t2' class='submenu'>Stages Jeunes</td>

</tr>

<tr><td id='t3' class='submenu'>Forum Jeunes</td>

</tr>

</table>

</div>

<div id='div4' class='class4' onmouseover='menu_show("p1")' onmouseout='menu_hide("p1")'>

<table>

<tr>

<td class='menu'><CENTER>Protection montagne</CENTER></td></tr>

<tr>

<td id='p1' class='submenu'><A HREF="protection.htm">Protection montagne</A></td>

</tr>

</table>

</div>

<div id='div5' class='class5' onmouseover='menu_show("r1")' onmouseout='menu_hide("r1")'>

<table>

<tr>

<td class='menu'><CENTER>Nous contacter</CENTER></td></tr>

<tr>

<td id='r1' class='submenu'><A HREF="contact.htm">Nous contacter</A></td>

</tr>

</table>

</div>

</div>

En HTML pur je ne crois pas qu'il soit possible de faire des includes d'autres fichiers HTML.

Possibilités:
1/ Les iFrames ou Frames
2/ En PHP tu peux faire des includes (solution la plus belle à mon gout)
3/ On peut faire des includes de fichier JS. Donc tu devrais pouvoir faire un fichier menu.js qui écrit toute les lignes ton menu avec des writes...

Je ne dispose pas du PHP sur mon site, donc la solution .js m'interesse. Peux tu me la créer car je n'ai aucune idée de la marche à suivre.

Merci

3 fichiers:
- Le premier: le fichier html de base de tes pages. Il inclu un fichier js menu.js qui va créer le menu, un fichier menu.css qui va se charger des styles du menu et d'un conteneur vide, un div qui recevera le menu.
- Le second: menu.js. J'ai gardé tes fonctions de gestion du menu. J'y ai ajouter la fonction loadMenu qui va en fait remplir le contenu du div créé dans le fichier html.
- Le troisième: menu.css. J'y ai mis tes styles.

Remarque: je n'ai fais que la première partie du menu, à toi faire la suite sur le même modèle. Attention à bien protéger les " et ' avec le \. C'est pas plus compliqué que ça.

fichier.html
<html>
<head>
<script src="menu.js"></script>
<link rel="stylesheet" type="text/css" href="menu.css">
</head>
<body onLoad="loadMenu()">
<div name="menu" id="menu" style="position:absolute;top:0">
</div>
</body>
</html>

menu.js
function menu_show()
{
for (i=0;i<menu_show.arguments.length;i++) {
document.getElementById(menu_show.arguments[i]).style.visibility='visible';}
}
function menu_hide()
{
for (i=0;i<menu_hide.arguments.length;i++) {
document.getElementById(menu_hide.arguments[i]).style.visibility='hidden';}
}
function bouge()
{
menu.style.top = document.body.scrollTop;
}
window.onscroll=bouge;
function loadMenu()
{
HTMLsrc=" <div id=\"div1\" class=\"class1\" onmouseover=\"menu_show('f1','f2','f3','f4','f5')\" onmouseout=\"menu_hide('f1','f2','f3','f4','f5')\">";
HTMLsrc+=" <table>";
HTMLsrc+=" <tr>";
HTMLsrc+=" <td class=\"menu\"><CENTER>Réseau fédéral</CENTER></td>";
HTMLsrc+=" </tr>";
HTMLsrc+=" <tr>";
HTMLsrc+=" <td id=\"f1\" class=\"submenu\"><A HREF=\"les membres du comite.html\">Le comité</A></td>";
HTMLsrc+=" </tr>";
HTMLsrc+=" <tr>";
HTMLsrc+=" <td id=\"f2\" class=\"submenu\"><A HREF=\"presentation dtr.htm\"> Les DTR</A></td>";
HTMLsrc+=" </tr>";
HTMLsrc+=" <tr>";
HTMLsrc+=" <td id=\"f3\" class=\"submenu\"><A HREF=\"construction.html\">Comités départementaux</A></td>";
HTMLsrc+=" </tr>";
HTMLsrc+=" <tr>";
HTMLsrc+=" <td id=\"f4\" class=\"submenu\"><a href=\"clubs alpins en rhone-alpes.html\">Les clubs</a></td>";
HTMLsrc+=" </tr>";
HTMLsrc+=" <tr>";
HTMLsrc+=" <td id=\"f5\" class=\"submenu\"><a href=\"password/espaceadministratif.htm\" target=blank>Espace administratif</a></td>";
HTMLsrc+=" </tr>";
HTMLsrc+=" </table>";
HTMLsrc+=" </div>";
alert(HTMLsrc);
document.getElementById("menu").innerHTML = HTMLsrc;
}

menu.css
class1 {position:absolute; left:50px; top300px; width:150px; cursor:hand; visibility:'visible';}
.class2 {position:absolute; left:185px; top300px; width:150px; cursor:hand; visibility:'visible';}
.class3 {position:absolute; left:350px; top300px; width:150px; cursor:hand; visibility:'visible';}
.class4 {position:absolute; left:480px; top300px; width:150px; cursor:hand; visibility:'visible';}
.class5 {position:absolute; left:615px; top300px; width:150px; cursor:hand; visibility:'visible';}
.menu {font-family:'comic-sans-ms'; font-size:14px; font-weight:normal; background-color:lavender; color:blue;}
.submenu {background-color:lavender; font-family:'comic-sans-ms'; font-size:12px; font-weight:normal; color:black; visibility:'hidden';}
A {text-decoration:none; color:black;}
A:hover {background-color:burlywood; color:black;}