Menu explorer

Soyez le premier à donner votre avis sur cette source.

Vue 17 582 fois - Téléchargée 1 279 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
Messages postés
7
Date d'inscription
mardi 5 novembre 2002
Statut
Membre
Dernière intervention
13 novembre 2004

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

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.