Membre de ClickFR, Reseau francophone Paie-Par-Click
Accueil
Accueil
- [ CSS : ] [ DHTML : ] [ HTML : ] [ JavaScript : ] [ Refs : ]
Accueil

DHTML
Apparitions / Disparitions

  Faire apparaître un menu contextuel

fonction de ce script  principe de ce script  le script lui-meme  demonstration du script  telechargement du script  Compatibilite du script... a partir de : 

  Fonction
Le but de ce script est de faire apparaître un menu contextuel lorsque l'utilisateur passe le pointeur de sa souris sur un élément précis.
  Principe
L'élément réactif (une image ici), provoque l'apparition du menu contextuel.
Ce menu est constitué de plusieurs calques (layers) :
  • Un calque contenant le menu lui-même,
  • un calque placé dessous et débordant tout autour du premier calque pour faire disparaître le menu si le pointeur sort de la zone.
Attention : pour une bonne compatibilité avec Netscape sous MacOS, placez vos deux calques à la fin de votre code (après la balise '</html>').
  Le script
dans la partie <head>
<script language="JavaScript">
// Détection du navigateur
ns4 = (document.layers)? true:false;
ie4 = (document.all)? true:false;

// Variable déterminant l'état du menu : non = caché, oui = affiché, ouioui = pourra être fermé
var disp = "non";

// Fonction pour faire apparaître le menu
function apparaitre() {

// Instructions pour Netscape
if (ns4) {

// Affichage du menu
document.context.visibility = 'visible';

// Passage de la variable d'état à 'Menu affiché'
disp = "oui";
}

// Instructions pour Internet Explorer
if (ie4) {
context.style.visibility = 'visible';
disp = "oui";
}
}

// Fonction pour faire disparaître le menu
function disparaitre() {

// Instructions pour Netscape
if (ns4) {

// Disparition du menu
if ( disp == "ouioui" ) {
document.context.visibility = 'hidden';
}

// Passage de la variable à l'état 'Menu affiché et pointeur arrivé sur le menu'
if ( disp == "oui" ) {
disp = "ouioui";
}
}

// Instructions pour Internet Explorer
if (ie4) {
if ( disp == "ouioui" ) {
context.style.visibility = 'hidden';
}
if ( disp == "oui" ) {
disp = "ouioui";
}
}
}
</script>

dans la partie <body>
<!-- L'image qui fera apparaître le menu -->
<a href="#" OnMouseOver="apparaitre();"><img src="images/2.gif" border="0"></a>

<!-- Le calque de dessous, qui permet de faire disparaître le menu -->
<!-- il faut le placer à 10 pixels au-dessus et à gauche du menu lui-même -->
<div name="contextout" id="contextout" style="position: absolute; top: 190px; left: 90px; visibility: visible; z-index: 1;">

<:!-- Placez une images transparente de la taille de votre menu, plus 20 pixels de large et de haut -->
<a href="#" OnMouseOver="disparaitre();"><img src="pixel.gif" width="170" height="170" border="0"></a>
</div>

<!-- Le calque du menu, avec tout son contenu -->
<div name="context" id="context" style="position: absolute; top: 200px; left: 100px; visibility: hidden; z-index: 2;">
Contenu du calque...
</div>
  Démonstration
Passez sur les images :
  Téléchargement
Ce script est disponible en deux versions :
  • le script est intégré à la page où il agit,
  • le script est dans un fichier séparé de la page où il agit (fichier.js et fichier.html).

    L'intérêt d'un script dans un fichier séparé est de pouvoir le partager entre plusieurs pages html.
    Cela permet aussi de le rendre inaccessible à toute personne qui souhaiterai l'enregistrer pour une autre utilisation.
    		•
    Script intégré :
    app_menu.zip
    5 Ko    		 telechargez le script telechargez le script
    Script séparé :
    app_menu2.zip
    5 Ko
    Recherche
    		aide sur la recherche
    CSS 2
    HTML 4
    Javascript 1.3
    Références
    Aide générale
    hit-parade
    Votez TOP Ouaibe !

    statistiques
    aide sur les contacts aide sur la mailing-list aide sur la newsletter