1. Accueil
  2. ASP / ASP.NET
  3. Sources ASP / ASP.NET
  4. Sources Javascript/DHTML
  5. Menu explorer

Menu explorer

Soyez le premier à donner votre avis sur cette source.

Vue 17 538 fois - Téléchargée 1 276 fois

Télécharger le projet
Commenter

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.
Télécharger le projet

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Signaler
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
Signaler
Messages postés
134
Date d'inscription
jeudi 7 février 2002
Statut
Membre
Dernière intervention
16 juin 2002
BIEN :)
S'inscrire maintenant

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.

Du même auteur (cs_patoch)