Tout les commentaires sont dans le code
Source / Exemple :
<html>
<head>
<title>menu</title>
<!--
- L'ensemble de ce code JavaScript / VBscript / HTML-style *
- est libre d'utilisation sous réserve de laisser le *
- commentaire suivant dans chaque script: *
- *
- "Auteur: FARID / ALGERIE E-mail: sidoummoudz@yahoo.fr" *
- Bonne utilisation *
-->
<style>
.classe{
font-family:verdana;
font-size:9pt;
color:#66EEC0;
cursor:hand;
}
</style>
<script language="javascript">
<!--
//Ce que suit c'est pour le changement du style du menu quand la souris se pointe
//sur.
function change_menu(){
menu.style.color="#0C0C5E"; //couleur de surbrillance de police
menu.style.backgroundColor="red"; //couleur de surbrillance de l'arrière plan
}
//Ce que suit c'est pour le changement du style des items quand la souris se pointe
//sur.
function change(divers){
divers.style.color="#0C0C5E"; //couleur de surbrillance de police
divers.style.backgroundColor="#66EEC0"; //couleur de surbrillance de l'arrière plan
}
//Cette partie c'est pour le changement du style onMouseout (retour à la couleur d'origine)
function change_rev(divers){
divers.style.color="#66EEC0"; //couleur d'origine de police
divers.style.backgroundColor="#0C0C5E"; //couleur d'origine de l'arrière plan
}
//-->
</script>
<meta name="generator" content="Namo WebEditor v4.0">
</head>
<body topmargin="0" marginheight="0" leftmargin="0" marginwidth="0" >
<table width="136" cellspacing="0" bgcolor="#0C0C5E" cellpadding="0" >
<tr>
<!--On doit donner un identificateur id à cette élément inséré dans une
couche ou non, dans notre cas "menu" ou il doit etre cité dans la première
fonction du scriptjava "menu.style..etc".
La classe c'est pour que les informations citées dans le style avant javascript
y prendre effet.
-->
<td id="menu" class="classe" onClick="apparition()" onMouseover="change_menu()" onMouseout="change_rev(menu)" width="136" height="20"><p align="left"><b> Afficher/masquer
le menu</b></p></td>
</tr>
</table>
<!-- On doit donner aussi un identificateur à la couche suivante qui contient
les tables des items.
Dans le style elles sonts configurables et paramétrables: la largeur,la
hauteur, la position par rapport à la marge gauche et haut, la transition
"duration pour le temps et transition la manière "il y a de0 à 23" mais
pour effet de fondu on met blendTrans au lieu de revealTranset ne pas mettre
l'expression "transition=..." et l'opacité (transparence)
-->
<DIV id="couche" style="width:137px; height:138px; position:absolute; left:0px; top:28px; z-index:1; visibility:hidden; filter:revealtrans(duration=1,transition=12) alpha(opacity=80)">
<!--
Dans les items suivants, dans l'évènement onClick ,location='_top' cela ouvrira
les pages cibles dans la meme fenetre, '_self' dans le meme cadre que le menu
si le document est en cadres et '_blank' dans une nouvelle fenetre.
NB: si vous voulez que les pages cibles s'ouvrirons dans la meme nouvelle fenetre pour
ne pas perdre la page contenant le menu et les nouvelles pages ne s'accumulerons pas
dans la barre d'etat, vous devez donner un nom à la nouvelle fenetre.
Exemple:
onClick="javascript:window.open('aboutus.htm','newwindow','height=350,width=650,status=yes,toolbar=yes,menubar=yes')"
onClick="javascript:window.open('modeles.htm','newwindow','height=350,width=650,status=yes,toolbar=yes,menubar=yes')"
et ainsi de suite...
-->
<table class="classe" onMouseover="change(this)" onMouseout="change_rev(this)" onClick="javascript:window.open('aboutus.htm',location='_top')" width="136" cellpadding="0" cellspacing="0" bgcolor="#0C0C5E"><td width="136" height="23" ><p align="left"><b> Qui sommes nous</b></p> </td></tr></table>
<table class="classe" onMouseover="change(this)" onMouseout="change_rev(this)" onClick="javascript:window.open('modeles.htm',location='_top')" width="136" cellpadding="0" cellspacing="0" bgcolor="#0C0C5E"><td width="136" height="23" ><p align="left"><b> Modeles</b></p></td></tr></table>
<table class="classe" onMouseover="change(this)" onMouseout="change_rev(this)" onClick="javascript:window.open('motorisation.htm',location='_top')" width="136" cellpadding="0" cellspacing="0" bgcolor="#0C0C5E"><td width="136" height="23" ><p align="left"><b> Motorisations</b></p></td></tr></table>
<table class="classe" onMouseover="change(this)" onMouseout="change_rev(this)" onClick="javascript:window.open('equipements.htm',location='_top')" width="136" cellpadding="0" cellspacing="0" bgcolor="#0C0C5E"><td width="136" height="23" ><p align="left"><b> Equipements</b></p> </td></tr></table>
<table class="classe" onMouseover="change(this)" onMouseout="change_rev(this)" onClick="javascript:window.open('support.htm',location='_top')" width="136" cellpadding="0" cellspacing="0" bgcolor="#0C0C5E"><td width="136" height="23" ><p align="left"><b> Support</b></p></td></tr></table>
<table class="classe" onMouseover="change(this)" onMouseout="change_rev(this)" onClick="javascript:window.open('contacts.htm',location='_top')" width="136" cellpadding="0" cellspacing="0" bgcolor="#0C0C5E"><td width="136" height="23" ><p align="left"><b> Contact</b></p></td></tr></table>
</DIV>
<script language=vbscript>
<!--
//La fonction suivante contient une boucle qui sert à afficher et masquer
//les items du menu avec le meme évènement "onClick"
Sub apparition()
If couche.style.visibility="hidden" Then
call couche.filters.item(0).apply()
couche.style.visibility="visible"
call couche.filters.item(0).play()
Else
call couche.filters.item(0).apply()
couche.style.visibility="hidden"
call couche.filters.item(0).play()
End If
End Sub
//-->
</script>
<p>Ce texte reste relativement </p>
<p>visible</p>
</body>
</html>
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.