Chapitre: vue d'ensemble Forum SELFHTML Chapitre: vue d'ensemble Archives du forum Chapitre: vue d'ensemble 2003 Chapitre: vue d'ensemble octobre
SELFHTML

Forum SELFHTML: Archives:
menus deroulants
Page d'information: vue d'ensemble
vers le bas 

(JAVASCRIPT) menus deroulants

Le message suivant est de: pascal, Adresse électronique carinae@caramail.com, 07. 10. 2003, 22:33

bonjour

j'ai un petit probléme de menu. j'ai une frame avec une image
et un menu. Rien d'extraordinaire si ce n'est que chaque fois que j'utilise un sous menu la page voulue s'affiche mais par contre la frame disparait et moi je voudrais qu'elle reste visible a chaque page consultée. Qu'ai je donc oublié ?

<html>
<head>
<title>nos randos</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>
<SCRIPT LANGUAGE="JavaScript">

var largeur = 130;
var gauche = 5;
var top = 200;
var couleur_police_cat="#FFFFFF";
var couleur_police_scat="#000000";
var couleur_cat="#959EAD";
var couleur_scat="#C3C9D4";

var taille = 11;//Police de caractères
var police = "Arial";//Type de police

var nb_elem = 4;//Nombre de categorie dans le menu

var nb_souscat = new Array(nb_elem);//Nb_souscat contient le nombre de sous categorie pour chaque categorie

nb_souscat[0] = 3;//Nombre de sous categorie 1
nb_souscat[1] = 4;//Nombre de sous categorie 2
nb_souscat[2] = 2;//Nombre de sous categorie 3
nb_souscat[3] = 3;//Nombre de sous categorie 4

var categorie = new Array(nb_elem);
var soustab = new Array;

var tab0 = new Array(nb_souscat[0]);
var tab1 = new Array(nb_souscat[1]);
var tab2 = new Array(nb_souscat[2]);
var tab3 = new Array(nb_souscat[3]);

<!-------Edition PREMIERE categorie et sous categorie------------>
categorie[0] = " Divers"; //Titre de la categorie

tab0[0] = " Gallerie photos|divers/Gallerie/gallery.htm|_blank";//Premier sous-titre|liens|cible
tab0[1] = " nous écrire|mailto:planitia@free.fr;joel.lagrange@free.fr|_blank";//Second sous-titre|liens|cible

<!-------Edition SECONDE categorie et sous categorie------------>
categorie[1] = " Pyrénées Francaise";//Titre de la categorie

tab1[0] = " Ariege|Ariege/Ariege.htm|_blank";//Premier sous-titre|liens|cible
tab1[1] = " Haute-Garonne|./Haute-Garonne/Luchon.htm|_blank";//Second sous-titre|liens|cible
tab1[2] = " Haute-Pyrenées|./Haute-Pyrenees/Hautes-pyrenees.htm|_blank"; //Troisième sous-titre|liens|cible
tab1[3] = " Pyrénées-Orientales|./Pyrenees_Orientales/PO.htm|_blank";


soustab[0] = tab0;
soustab[1] = tab1;
soustab[2] = tab2;
soustab[3] = tab3;
//répeter aussi souvent qu'il y a de categorie...

var conf = -1;
function Init(){
    var hauteur = top;
    for(i=1;i<=nb_elem;i++){
        document.getElementById("menu"+i+"").style.top = hauteur;
        hauteur = hauteur + 17;
    }
}

function voir(z){
    if(conf==z){
        document.getElementById("sousmenu"+z+"").style.visibility = 'hidden';
        Init();
        conf=conf+nb_elem;
    }else{
        conf=z;

        //Calcul de la hauteur dont doit se baisser le menu
        haut=0;
        var haut = 15*nb_souscat[z-1]+z*18+top;


        //On retracte tous les éléments
        for(i=1;i<=nb_elem;i++){
            document.getElementById("sousmenu"+i+"").style.visibility = 'hidden';
        }

        //on les remets tous à leur place
        Init();

        //on cale le sous menu sous la categorie
        document.getElementById("sousmenu"+z+"").style.top = 16;
        dec = haut;

        //On peut alors baisser tous les autre menus
        for(i=z+1;i<=nb_elem;i++){

            document.getElementById("menu"+i+"").style.top = dec;
            dec=dec+18;
        }

        //Enfin, on rend le menu visible
        document.getElementById("sousmenu"+z+"").style.height = 15*nb_souscat[z-1];
        document.getElementById("sousmenu"+z+"").style.visibility = 'visible';

    }

}

function affiche(){

    //feuille de style
     document.write('<style>');
    document.write('div.menu{visibility:visible; border-width: 1px; border-style: solid; border-color: #000000;background-color: '+couleur_cat+'}');
    document.write('div.sousmenu{position:absolute; left:-1; height:20; visibility:hidden; width:'+ largeur +'; border-width: 1px; border-style: solid; border-color: #000000;background-color: '+couleur_scat+'}');
    document.write('a.menu{font-family: '+ police +'; color: '+couleur_police_cat+'; font-size: '+taille+'px; font-weight:bold; text-decoration: none;}');
    document.write('a.smenu{font-family: '+ police +'; color: '+couleur_police_scat+'; font-size: '+taille+'px; font-weight:bold; text-decoration: none;}');
    document.write('</style>');
    document.write('<div>');

    for(i=0;i<nb_elem;i++){
        boucle = nb_souscat[i];


        document.write('<div id="menu'+(i+1)+'" style="position:absolute; left:'+ gauche +'px; width:'+ largeur +'px;" class="menu">');
        document.write('<a href="#" class="menu" onClick="javascript:voir('+(i+1)+')">'+categorie[i]+'</a>');

        document.write('<div width="'+ largeur +'" id="sousmenu'+(i+1)+'" class="sousmenu">');


        for(z=0;z<boucle;z++){
            elem=soustab[i][z].split("|");
            document.write('<div height="15"><a href="'+elem[1]+'" target="'+elem[2]+'" class="smenu">'+elem[0]+'</a></div>');
        }


        document.write('</div>');
        document.write('</div>');

    }

    document.write('</div>');

    document.onLoad=Init();
}
</script>
</head>

<body bgcolor="#FFFFFF">
<p align="left"><a href="menu.htm"><img src="images/bandeauFrame.jpg" alt="Menu" width="130" height="477" border="0"></a>
</p>
<script>
affiche();
</script>
</body>
</html>

De plus je souhaiterais savoir s'il est possible et comment , dans la frame, de faire disparaitre l'image pour faire afficher le menu simplement en passant la souris dessus (comme pour les images survolées).?
si j'utilise la syntaxe ci dessous le menu ne s'affiche pas, sachant
qu'il est codé dans une page html et que bandeauframe est une image, mais je ne sais pas du tout si c'est la bonne solution

<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','file:///C|/Web/menu.htm',1)"><img src="file:///C|/Web/images/bandeauFrame.jpg" name="Image1" width="354" height="945" border="0"></a>


 
vers le hautvers le bas 

(JAVASCRIPT) menus deroulants

Le message suivant est de: Patrick Andrieu, Adresse électronique nospam@nospam.no, 08. 10. 2003, 06:07
http://www.selfhtml.com.fr/equipe/patrick.htm

Bonjour Pascal!



»» j'ai une frame avec une image
»» et un menu. Rien d'extraordinaire si ce n'est que chaque fois que j'utilise un sous menu la page voulue s'affiche mais par contre la frame disparait et moi je voudrais qu'elle reste visible a chaque page consultée. Qu'ai je donc oublié ?

Que veux-tu dire? Quelle est à ton avis la différence entre frame et page? En général, on parle de jeux de cadres (frameset), et à ce moment-là les "frames" sont les fenêtres intérieures. Ton code ne nous livre qu'une page. Parler avec précision STP!

D'autre part, on ne va pas décortiquer pour toi des lignes de codes qu tu n'as vraissemblablement pas écrites toi-même. Si tu utilises un script public, demande support aux offrants ou sache assez de JavaScript pour pouvoir comprendre ce que ton code "fait".

Si tu as un menu qui contient des liens vers d'autres pages, il est normal que la page appelante disparaisse lorsque tu cliques un de ces liens. Ou alors, il te faut placer ton menu dans l'un des frames d'un jeu de frames.

Donc, lecture pour toi:
Cibles: http://selfhtml.selfhtml.com.fr/html/liens/definir.htm#fenetre_cible
Jeux de cadres: http://selfhtml.selfhtml.com.fr/html/frames/definir.htm
JavaScript: http://selfhtml.selfhtml.com.fr/javascript/index.htm


»» De plus je souhaiterais savoir s'il est possible et comment , dans la frame, de faire disparaitre l'image pour faire afficher le menu simplement en passant la souris dessus (comme pour les images survolées).?
»» si j'utilise la syntaxe ci dessous le menu ne s'affiche pas, sachant
»» qu'il est codé dans une page html et que bandeauframe est une image, mais je ne sais pas du tout si c'est la bonne solution

»» <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','file:///C|/Web/menu.htm',1)"><img src="file:///C|/Web/images/bandeauFrame.jpg" name="Image1" width="354" height="945" border="0"></a>

Il n'y a pas de fonction MM_swapImgRestore() dans le code que tu as cité. D'autre part, tu ne peux changer que l'image (la remplacer par une autre) et non faire afficher un document HTML à la place.

Patrick


 
vers le haut
Chapitre: vue d'ensemble Forum SELFHTML Chapitre: vue d'ensemble Archives du forum Chapitre: vue d'ensemble 2003 Chapitre: vue d'ensemble octobre

© 1998-2004 Adresse électronique selfhtml@fr.selfhtml.org