- <html>
- <head>
- <script>
- v_menuitemactu = 'null'; //Page d'acceuil (il n'y a pas d'onglet sélectionné)
-
- //Appel de la page...
- //file ne sert ici à rien
- //menuclick est l'id de l'objet sur lequel on clique
- function LoadPage(file, menuclick){
- //...
-
- //on remet l'ancienne classe pour l'ancien élément. Attention qu'il est possible qu'aucun ne soit utilisé, à ce moment, il faut faire une condition pour éviter d'interrompre la fonction
- if(v_menuitemactu != 'null') document.getElementById(v_menuitemactu).className = "menuitem";
- //Mise à jour de l'onglet actuel
- v_menuitemactu = menuclick;
- //On change le style de l'onglet qui vient d'être sélectionné
- document.getElementById(v_menuitemactu).className = "menuitemactu";
- }
- </script>
-
- <style type="text/css">
- /* !! Attention, ici, seules les images changent !! */
- /*Onglet non sélectionné...*/
- td.menuitem{
- height: 35px;
- width: 200px;
- background-image: url("../images/menubutton_noselect.png");
- text-align: left;
- padding-left: 12px;
- }
- /* Onglet non-sélectionné survolé */
- td.menuitem:hover{
- background-image: url("../images/menubutton_mouseon.png");
- }
- /* Onglet sélectionné */
- td.menuitemactu{
- height: 35px;
- width: 200px;
- background-image: url("../images/menubutton_select.png");
- text-align: left;
- padding-left: 12px;
- }
- </style>
- </head>
- <body>
- <table width=200 cellpadding=0 cellspacing=0 border=0>
- <tr><td id="ml_01" class="menuitem" onclick="LoadPage('test.html', 'ml_01');"><a href="#" class="menulink">Mon Compte</a></td></tr>
- <tr><td id="ml_02" class="menuitem" onclick="LoadPage('test.html', 'ml_02');"><a href="#" class="menulink">Carte</td></tr>
- <tr><td id="ml_03" class="menuitem" onclick="LoadPage('test.html', 'ml_02');><a href="#" class="menulink">Mes Villes</td></tr>
- <tr><td id="ml_04" class="menuitem" onclick="LoadPage('test.html', 'ml_02');><a href="#" class="menulink">Explorateur</td></tr>
- </table>
- </body>
<html>
<head>
<script>
v_menuitemactu = 'null'; //Page d'acceuil (il n'y a pas d'onglet sélectionné)
//Appel de la page...
//file ne sert ici à rien
//menuclick est l'id de l'objet sur lequel on clique
function LoadPage(file, menuclick){
//...
//on remet l'ancienne classe pour l'ancien élément. Attention qu'il est possible qu'aucun ne soit utilisé, à ce moment, il faut faire une condition pour éviter d'interrompre la fonction
if(v_menuitemactu != 'null') document.getElementById(v_menuitemactu).className = "menuitem";
//Mise à jour de l'onglet actuel
v_menuitemactu = menuclick;
//On change le style de l'onglet qui vient d'être sélectionné
document.getElementById(v_menuitemactu).className = "menuitemactu";
}
</script>
<style type="text/css">
/* !! Attention, ici, seules les images changent !! */
/*Onglet non sélectionné...*/
td.menuitem{
height: 35px;
width: 200px;
background-image: url("../images/menubutton_noselect.png");
text-align: left;
padding-left: 12px;
}
/* Onglet non-sélectionné survolé */
td.menuitem:hover{
background-image: url("../images/menubutton_mouseon.png");
}
/* Onglet sélectionné */
td.menuitemactu{
height: 35px;
width: 200px;
background-image: url("../images/menubutton_select.png");
text-align: left;
padding-left: 12px;
}
</style>
</head>
<body>
<table width=200 cellpadding=0 cellspacing=0 border=0>
<tr><td id="ml_01" class="menuitem" onclick="LoadPage('test.html', 'ml_01');"><a href="#" class="menulink">Mon Compte</a></td></tr>
<tr><td id="ml_02" class="menuitem" onclick="LoadPage('test.html', 'ml_02');"><a href="#" class="menulink">Carte</td></tr>
<tr><td id="ml_03" class="menuitem" onclick="LoadPage('test.html', 'ml_02');><a href="#" class="menulink">Mes Villes</td></tr>
<tr><td id="ml_04" class="menuitem" onclick="LoadPage('test.html', 'ml_02');><a href="#" class="menulink">Explorateur</td></tr>
</table>
</body>