Menu explorer

0/5 (2 avis)

Vue 17 684 fois - Téléchargée 1 293 fois

Description

Pour avoir dans vos pages Web des menus comme l'explorateur de windows.

Source / Exemple :


<html>

  <head>

  <style type="text/css">
  <!--
  #Pos1 {position : absolute; left : 2px; top : 2px;}
  #Pos2 {position : absolute; left : 2px; top : 2px;}
  #Pos3 {position : absolute; left : 2px; top : 2px;}
  //-->
  </style>

    <map name="theMap1">
      <area shape="rect" coords="20, 16, 200, 32" href="" onClick="afficher_menu (2); return false;">
      <area shape="rect" coords="20, 32, 200, 48" href="" onClick="afficher_menu (3); return false;">
    </map>

    <map name="theMap2">
      <area shape="rect" coords="20, 16, 200, 32" href="" onClick="afficher_menu (1); return false;">
      <area shape="rect" coords="20, 32, 200, 48" href="page1-1.html" target="content_frame">
      <area shape="rect" coords="20, 48, 200, 64" href="page1-2.html" target="content_frame">
      <area shape="rect" coords="20, 64, 200, 80" href="page1-3.html" target="content_frame">
      <area shape="rect" coords="20, 80, 200, 96" href="" onClick="afficher_menu (3); return false;">
    </map>

    <map name="theMap3">
      <area shape="rect" coords="20, 16, 200, 32" href="" onClick="afficher_menu (2); return false;">
      <area shape="rect" coords="20, 32, 200, 48" href="" onClick="afficher_menu (1); return false;">
      <area shape="rect" coords="20, 48, 200, 64" href="page2-1.html" target="content_frame">
      <area shape="rect" coords="20, 64, 200, 80" href="page2-2.html" target="content_frame">
    </map>

  <script language="JavaScript">
  <!-- Masqué pour les anciens navigateurs
  
    Niveaux = document;
    if (document.all)
      Niveaux = document.all;
  
    function affiche_niveau (e, v) {
    
      e.visibility = v;
      if (e.style)
        e.style.visibility = v;
    }

    function afficher_menu (m) {
    
      if (m == 1) {
        
        affiche_niveau (Niveaux.Pos1, "visible");
        affiche_niveau (Niveaux.Pos2, "hidden");
        affiche_niveau (Niveaux.Pos3, "hidden");
      }

      if (m == 2) {
        
        affiche_niveau (Niveaux.Pos1, "hidden");
        affiche_niveau (Niveaux.Pos2, "visible");
        affiche_niveau (Niveaux.Pos3, "hidden");
      }

      if (m == 3) {
        
        affiche_niveau (Niveaux.Pos1, "hidden");
        affiche_niveau (Niveaux.Pos2, "hidden");
        affiche_niveau (Niveaux.Pos3, "visible");
      }
    }
  // -->
  </script>
  </head>

  <body bgcolor="#ffffff" onLoad="afficher_menu (1);">

    <div id="Pos1"><img usemap="#theMap1" src="images/Image1.jpg" width=200 height=130 border=1></div>
    <div id="Pos2"><img usemap="#theMap2" src="images/Image2.jpg" width=200 height=130 border=1></div>
    <div id="Pos3"><img usemap="#theMap3" src="images/Image3.jpg" width=200 height=130 border=1></div>

  </body>

</html>

Conclusion :


Vous pouvez agrandir le script et pour les images
il suffit de faire des copies d'écran.

Codes Sources

A voir également

Ajouter un commentaire Commentaires
tiborg
Messages postés
7
Date d'inscription
mardi 5 novembre 2002
Statut
Membre
Dernière intervention
13 novembre 2004

26 févr. 2004 à 16:34
Honteux !! ne perdez pas votre temps ..
.. sauf si vous aimez photoshop
neojoce
Messages postés
134
Date d'inscription
jeudi 7 février 2002
Statut
Membre
Dernière intervention
16 juin 2002

22 juil. 2002 à 04:52
BIEN :)

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.