Cibles des liens d'un menu JS

[itsmi]

Bonsoir à tous,

Je ne parviens pas à trouver comment choisir différents type de cible pour les liens d'un menu déroulant (JS); au minimum pouvoir ouvrir une fenêtre en popup à partir d'un sous titre du menu dirigé sur une page dimensionnée que je considère comme un visuel qu'il serait à mon sens souhaitable de pouvoir consulter de diverses pages du site sans pour autant quitter ces pages ni reinsérer un lien autre à chaque fois (sinon à quoi bon un menu !?). Je pense qu'il est possible de remplacer le type unique de cible par défaut par un choix de types mais je n'y arrive pas:unsure: Avis aux champions du genre, voici le code:

var mmtexte;mmtexte=new Array(); 
var mmliens;mmliens=new Array(); 
var mmfils;mmfils=new Array(); 
var mmetat;mmetat=new Array(); 
var mmetatb;mmetatb=new Array(); 
var mmpere;mmpere=new Array(); 
var mmdeca;mmdeca=new Array(); 
var mmover;mmover=new Array(); 
var mmtx;mmtx=new Array();var mmty;mmty=new Array();var mmhaut;mmhaut=new Array(); 
var posix;posix=new Array();var posiy;posiy=new Array(); 
var deroule;deroule=new Array();var sens_deroule;sens_deroule=new Array(); 
var saclass;saclass=new Array();var mmimg;mmimg=new Array(); 
var mmobj;mmobj=new Array();var ptmmobj=0; 
var maxix=0;maxiy=0;var animee=0; 
var major = parseInt(navigator.appVersion); 
var agent = navigator.userAgent.toLowerCase(); 
var ns = ((agent.indexOf('mozilla')!=-1) && ((agent.indexOf('spoofer')==-1) && (agent.indexOf('compatible') == -1))); 
var ns4 = (ns && (major == 4)); 
// 
// cible par defaut pour les liens 
 // 
var _mmcible="top"; 
var mmvitesse=32; // vitesse d'afficheage des menus 
var positionx=-10000; // position en x du menu (-10000=centré) 
var positiony=128; // position en y 
 var acote=0; //si = 0 les sous menus s'affichent en dessous des menus de la barre de titre, si =1 s'affichent a coté (a droite) 

function cliquer(page) { 
 eval(_mmcible+".location.href=page;"); 
} 

function redessinemmenu() { 
 for (var i = 1; i < mmetat.length; i++) { 
 if (mmetat[mmpere[i]]==0) {mmetat[i]=0;} 
 if (mmetat[i]==1) { 
 VoirObj("mmenu"+i); 
 } 
 else { 
 CacherObj("mmenu"+i); 
 deroule[i]=0;sens_deroule[i]=0; 
 CreerZone("mmenu"+i,0,0,0,0); 
 } 
 } 
} 

function animemmenus() { 
 for (var i = 1; i < mmetat.length; i++) { 
 if (mmetatb[i]==0 && sens_deroule[i]!=0) { 
 deroule[i]+=sens_deroule[i]; 
 if (deroule[i]>mmhaut[i]) { 
 deroule[i]=mmhaut[i];sens_deroule[i]=0; 
 } 
 CreerZone("mmenu"+i,0,0,mmtx[i]+4,deroule[i]+4); 
 } 
 } 
 setTimeout("animemmenus();",25); 
} 

function multiplemenus() { 
 var largeurt=0; 
 for (var i = 1; i < mmetat.length; i++) { 
 if (mmetatb[i]) { 
 largeurt+=mmtx[i]; 
 } 
 } 
 var fpositionx=positionx; 
 if (fpositionx==-10000) { 
 fpositionx=(TailleX()/2)-(largeurt/2); 
 } 
 for (var i = 1; i < mmetat.length; i++) { 
 if (mmetatb[i]!=0) { 
 PlacerObj("mmenu"+i,fpositionx+posix[i],positiony+posiy[i]); 
 } 
 } 
 for (var i = 1; i < mmetat.length; i++) { 
 if (mmetatb[i]==0) { 
 mmetat[i]=0; 
 if (mmetatb[mmpere[i]]==1) { 
 //en dessous 
 if (acote==1) {PlacerObj("mmenu"+i,ObjX("mmenu"+mmpere[i])+mmtx[mmpere[i]],ObjY("mmenu"+mmpere[i])+(mmdeca[i]*mmty[mmpere[i]]));} 
 else {PlacerObj("mmenu"+i,ObjX("mmenu"+mmpere[i]),ObjY("mmenu"+mmpere[i])+mmty[mmpere[i]]);} 
 } 
 else { 
 //a cote 
 PlacerObj("mmenu"+i,ObjX("mmenu"+mmpere[i])+mmtx[mmpere[i]],ObjY("mmenu"+mmpere[i])+(mmdeca[i]*mmty[mmpere[i]])); 
 } 
 } 
 } 
 redessinemmenu(); 
 CacherObj("mmenufond"); 
 if (animee==0) {animemmenus();animee=1;} 
} 

function Effacetout() { 
 for (var i = 1; i < mmetat.length; i++) { 
 if (mmetatb[i]==0) {mmetat[i]=0;} 
 } 
 redessinemmenu(); 
 CacherObj("mmenufond"); 
} 

function revelemmenu(num) { 
 var lepere=mmpere[num]; 
 if (mmetatb[lepere]==1) { 
 for (var i = 1; i < mmetat.length; i++) { 
 if (mmetatb[i]==0) {mmetat[i]=0;} 
 } 
 } 
 for (var i = 1; i < mmpere.length; i++) { 
 if (mmpere[i]==lepere) {mmetat[i]=0;} 
 } 
 mmetat[num]=1;mmetat[mmpere[num]]=1;sens_deroule[num]=mmvitesse; 
 redessinemmenu(); 
 VoirObj("mmenufond"); 
} 

function Effacefils(num) { 
 for (var i = 1; i < mmpere.length; i++) { 
 if (mmpere[i]==num) {mmetat[i]=0;} 
 } 
 redessinemmenu(); 
} 

function dessus(num,num2) { 
 if (ns4==false) { 
 num.style.background=num2; 
 num.style.cursor="hand"; 
 } 
} 
function dehors(num,num2) { 
 if (ns4==false) { 
 num.style.background=num2; 
 num.style.cursor="default"; 
 } 
} 
function CreerPave(numero,xpos,ypos,tx,ty,nblignes,visible,classe2,classe3) { 

 var mmchaine="";var imge="";var special=""; 
 var tmmlien="";var reaction="";var special="";var mmfleche="";var mmkeep=""; 
 mmtx[numero]=tx;mmty[numero]=ty;var layery=0; 
 for (var i = 0; i < nblignes; i++) { 
 classe1=saclass[i]; 
 if (mmfils[i]=="" && mmliens[i]=="") { 
 special="onmouseover='Effacefils("+numero+");'"; 
 if (ns4) {mmchaine+="<layer top="+layery+" bgcolor="+classe2+" width="+tx+" height="+ty+" "+special+"><font face='verdana' size=2>"} 
 else{mmchaine+="<div class='"+classe1+"' style='background:"+classe2+";width:"+tx+"px;height:"+ty+"px;' "+special+">"} 
 mmchaine+="<center><img src='vide.gif' width=1 height=22 align='absmiddle' border=0>"+mmtexte[i]+"</center>" 
 if (ns4) {mmchaine+="</font></layer><BR>"} 
 else{mmchaine+="</div>\n"} 
 } 
 else 
 { 
 if (mmfils[i]) { 
 imge="vide.gif";mmpere[mmfils[i]]=numero; 
 special="onmouseout='dehors(this,\""+classe2+"\");' onmouseover='revelemmenu("+mmfils[i]+");dessus(this,\""+classe3+"\");'";mmdeca[mmfils[i]]=i; 
 } 
 else { 
 if (mmimg[i]) { 
 imge=mmimg[i]; 
 } 
 else { 
 imge="vide.gif"; 
 } 
 special="onclick='cliquer(\""+mmliens[i]+"\")' onmouseout='dehors(this,\""+classe2+"\");' onmouseover='Effacefils("+numero+");dessus(this,\""+classe3+"\");'"; 
 } 
 if (ns4) { 
 mmchaine+="<layer top="+layery+" bgcolor="+classe2+" width="+tx+" height="+ty+" "+special+"><font face='verdana' size=2> "; 
 if (!mmfils[i]) { 
 mmchaine+="<a href='#' "+special+">" 
 } 
 } 
 else{mmchaine+="<div class='"+classe1+"' style='background:"+classe2+";width:"+tx+"px;height:"+ty+"px;' "+special+"> "} 
 mmchaine+="<img src='%22+imge+%22' width=1 height=22 align='absmiddle' border=0> "+mmtexte[i] 
 if (ns4) { 
 if (!mmfils[i]) { 
 mmchaine+="</a>" 
 } 
 mmchaine+="</font></layer><BR>"; 
 } 
 else{mmchaine+="</div>\n"} 
 } 
 mmtexte[i]="";mmliens[i]="";mmfils[i]="";saclass[i]="";mmimg[i]="";layery+=22; 
 } 

 CreerObj("mmenu"+numero,xpos,ypos,tx,(nblignes*ty)+10,0,1,mmchaine,"",0); 

 deroule[numero]=0;sens_deroule[numero]=-2; 
 mmetat[numero]=visible;mmetatb[numero]=visible;mmhaut[numero]=(nblignes*ty)+10; 
 posix[numero]=xpos;posiy[numero]=ypos; 
} 

// 
// ceci est le calque de fond pour detecter si la souris survol les menus ou pas 
// a ajuster en fonction de la taille de votre menu (ici le calque mesure 900 pixel de long sur 600 de haut) 
// 
CreerObj("mmenufond",0,0,900,600,0,0,"","onmouseover='Effacetout();'",0); 

// 
// Création des menus 
// 
// Les liens pour chaque lignes du pave sont pris dans les tableaux mmtexte,mmliens,mmfils et saclass 
// ou mmtexte est le texte qui apparait dans le menu 
// mmliens, le nom de la page html a afficher si ce lien est cliquer 
// mmfils, le numero du pavé a afficher au survol de ce lien 
// saclass, le style a utilisé sur cette entrée 
// mmimg, l'icone a utiliser (icone par defaut si non utilisé) 
// 
// argument de la fonction CreerPave() 
// arg 1: numero du pavé (doit etre different pour chaque pavé) 
// arg 2: position x (prenez comme référence le point 0,0, le menu est decalé par la suite grace 
// arg 3: position y (aux variables positionx et positiony definies au debu du script) 
 // arg 4: largeur en pixel 
// arg 5: hauteur pour chaque ligne en pixel 
// arg 6: nombre de lignes 
// arg 7: mis a 1 = entrées de barre de titre (tjrs visible). 
// arg 8: indiquez la couleur du fond du menu 
// arg 9: indiquez la couleur du fond lorque la souris est au dessus 
// 
// un petit conseil pratique, construisez d'abord tout les pavés et parametrez ensuite les pavés fils pour chaque liens 
// 

mmtexte[0]="L'île";mmliens[0]="Ikaria-ile.htm";mmfils[0]="7";saclass[0]="mmenu"; 
CreerPave(1,0,0,124,24,1,1,"none","FFAC15"); 

mmtexte[0]="Médias";mmliens[0]="presentation-medias.htm";mmfils[0]="8";saclass[0]="mmenu"; 
CreerPave(2,124,0,124,24,1,1,"none","FFAC15"); 

mmtexte[0]="Séjours à thèmes";mmliens[0]="presentation-sejours.htm";mmfils[0]="9";saclass[0]="mmenu"; 
CreerPave(3,248,0,126,24,1,1,"none","FFAC15"); 

mmtexte[0]="Recherche";mmliens[0]="Liens/index.htm";mmfils[0]="10";saclass[0]="mmenu"; 
CreerPave(4,374,0,124,24,1,1,"none","FFAC15"); 

mmtexte[0]="Livre d'Or";mmliens[0]="livredor/livre.html";mmfils[0]="11";saclass[0]="mmenu"; 
CreerPave(5,498,0,124,24,1,1,"none","FFAC15"); 

mmtexte[0]="Contacts";mmliens[0]="presentation-contacts.htm";mmfils[0]="12";saclass[0]="mmenu"; 
CreerPave(6,622,0,124,24,1,1,"none","FFAC15"); 

var pt=0; 
mmtexte[0]="Ikaria";mmliens[0]="Ikaria-ile.htm";mmfils[0]="";saclass[0]="mmenu2"; 
mmtexte[1]="Situation";mmliens[1]="situation.htm";mmfils[1]="";saclass[1]="mmenu2"; 
mmtexte[2]="Cartes et accès";mmliens[2]="RegionsGRECE.htm";mmfils[2]="13";saclass[2]="mmenu2"; 
mmtexte[3]="En savoir plus";mmliens[3]="SurIkaria.htm";mmfils[3]="";saclass[3]="mmenu3"; 
CreerPave(7,0,0,124,24,4,0,"#FCF1DE","#FFAC15"); 


mmtexte[0]="Présentation";mmliens[0]="presentation-medias.htm";mmfils[0]="";saclass[0]="mmenu2"; 
mmtexte[1]="Galerie photos";mmliens[1]="Galerie Photos/index.htm";mmfils[1]="";saclass[1]="mmenu2"; 
mmtexte[2]="Ecard";mmliens[2]="Ecard/index.php";mmfils[2]="";saclass[2]="mmenu2"; 
mmtexte[3]="Fonds d'écran";mmliens[3]="Fonds ecran/index.htm";mmfils[3]="";saclass[3]="mmenu2"; 
mmtexte[4]="Radios en ligne";mmliens[4]="Medias/index.htm";mmfils[4]="";saclass[4]="mmenu2"; 
mmtexte[5]="SunShop IGA";mmliens[5]="HTTP://www.oozoo.com/boutique.cfm?id=1456";mmfils[5]="";saclass[5]="mmenu2"; 
mmtexte[6]="Calendrier";mmliens[6]="Calendrier.php";mmfils[6]="";saclass[6]="mmenu3"; 
CreerPave(8,0,0,124,24,7,0,"#FCF1DE","#FFAC15"); 

mmtexte[0]="Présentation";mmliens[0]="presentation-sejours.htm";mmfils[0]="";saclass[0]="mmenu2"; 
mmtexte[1]="Centre d'intérêts";mmliens[1]="Formulaire.htm";mmfils[1]="";saclass[1]="mmenu2"; 
mmtexte[2]="Lettre d'information";mmliens[2]="newsletter/inscription.php";mmfils[2]="";saclass[2]="mmenu2"; 
mmtexte[3]="Planning";mmliens[3]="xlagenda311/index.php";mmfils[3]="";saclass[3]="mmenu3"; 
CreerPave(9,0,0,126,24,4,0,"#FCF1DE","#FFAC15"); 

mmtexte[0]="Sur le site";mmliens[0]="Liens/index2.htm";mmfils[0]="";saclass[0]="mmenu2"; 
mmtexte[1]="Sur le Planning";mmliens[1]="xlagenda311/rechercher.php";mmfils[1]="";saclass[1]="mmenu2"; 
mmtexte[2]="Sur Internet";mmliens[2]="Liens/index.htm";mmfils[2]="14";saclass[2]="mmenu3"; 
CreerPave(10,0,0,124,24,3,0,"#FCF1DE","#FFAC15"); 

mmtexte[0]="Signer et consulter";mmliens[0]="livredor/livre.html";mmfils[0]="";saclass[0]="mmenu2"; 
mmtexte[1]="Recommander";mmliens[1]="../mcRefer/mcRefer.php";mmfils[1]="";saclass[1]="mmenu3"; 
CreerPave(11,0,0,125,24,2,0,"#FCF1DE","#FFAC15"); 

mmtexte[0]="Chat Room";mmliens[0]="Contacts/chatroom.htm";mmfils[0]="";saclass[0]="mmenu2"; 
mmtexte[1]="Forum";mmliens[1]="http://forum.europeanservers.net/cgi-bin/liste.eur?itsmifgr";mmfils[1]="";saclass[1]="mmenu2"; 
mmtexte[2]="Espace membres";mmliens[2]="Contacts/espacemembres.htm";mmfils[2]="";saclass[2]="mmenu2"; 
mmtexte[3]="Who's who?";mmliens[3]="AquiAtonAffaire.htm";mmfils[3]="";saclass[3]="mmenu2"; 
mmtexte[4]="Lettre d'information";mmliens[4]="newsletter/inscription.php";mmfils[4]="";saclass[4]="mmenu3"; 
CreerPave(12,0,0,124,24,5,0,"#FCF1DE","#FFAC15"); 

mmtexte[0]="Vue satellite";mmliens[0]="satellite.htm";mmfils[0]="";saclass[0]="mmenu2"; 
mmtexte[1]="Régions de Grèce";mmliens[1]="RegionsGRECE.htm";mmfils[1]="";saclass[1]="mmenu2"; 
mmtexte[2]="Carte d'Ikaria";mmliens[2]="IkariaPlan.htm";mmfils[2]="";saclass[2]="mmenu2"; 
mmtexte[3]="Par mer";mmliens[3]="ParMer.htm";mmfils[3]="";saclass[3]="mmenu2"; 
mmtexte[4]="Par air";mmliens[4]="ParAvion.htm";mmfils[4]="";saclass[4]="mmenu3"; 
CreerPave(13,0,0,110,24,5,0,"#FCF1DE","#FFAC15"); 

mmtexte[0]="Ikaria";mmliens[0]="Liens/pages/002.htm";mmfils[0]="";saclass[0]="mmenu2"; 
mmtexte[1]="Grèce";mmliens[1]="Liens/pages/003.htm";mmfils[1]="";saclass[1]="mmenu2"; 
mmtexte[2]="Hôtel";mmliens[2]="Liens/index3.htm";mmfils[2]="";saclass[2]="mmenu3"; 
CreerPave(14,0,0,100,24,3,0,"#FCF1DE","#FFAC15"); 

// Fin Création des menus 

// replace le menu si fenetre change de taille 
window.onresize=multiplemenus(); 

Ce fichier est avantageusement accompagné d'une feuille CSS pour les styles du menu et de quelques lignes codes pour la compatibilité (d'ailleurs, il reste des soucis avec certains navigateurs mais là aussi je plafonne. Il est vrai que je plafonne assez bas)

[itsmi]

Bonsoir

Je suis entrain d'essayer une solution qui a le mérite de ne pas planter le menu mais qui n'ouvre toujours pas de fenêtre en popup avec taille et position paramétrées. Voici ce que j'ai changé par rapport au script de mon premier message...

[----------------------

var _mmcible="top";

remplacé par :

var mmtarget;mmtarget=new Array();

if (mmtarget ==""){

_mmcible="top";

}

else {

_mmcible="window.open";

}

--------------------------

cette nouvelle variable mmtarget ajoutée à la structure du menu, ici d'abord:

}

mmtexte="";mmliens="";mmtarget="";mmfils="";saclass="";mmimg="";layery+=22;

}

----------------------------

Puis dans le menu proprement dit, exemple:

mmtexte[0]="Vue satellite";mmliens[0]="'satellite.htm','satellite_blank','toolbar=0, location=0, directories=0, status=0, scrollbars=1, resizable=0, copyhistory=0, menuBar=0, width=380, height=650'";mmtarget[0]="popup";mmfils[0]="";saclass[0]="mmenu2";

mmtexte[1]="Régions de Grèce";mmliens[1]="RegionsGRECE.htm";mmtarget[1]="";mmfils[1]="";saclass[1]="mmenu2";

mmtexte[2]="Carte d'Ikaria";mmliens[2]="IkariaPlan.htm";mmtarget[2]="";mmfils[2]="";saclass[2]="mmenu2";

mmtexte[3]="Par mer";mmliens[3]="ParMer.htm";mmtarget[3]="";mmfils[3]="";saclass[3]="mmenu2";

mmtexte[4]="Par air";mmliens[4]="ParAvion.htm";mmtarget[4]="";mmfils[4]="";saclass[4]="mmenu3";

CreerPave(13,0,0,110,24,5,0,"#FCF1DE","#FFAC15");

----------------------------

]

J'ai l'espoir de m'approcher de la solution dans la mesure ou mon menu fonctionne normalement, sauf le sous-titre pour lequel j'essaie de mettre un lien vers une popup.

Dans la mesure où la variable "mmtarget" ne sert (dans mon idée) qu'à obtenir 2 valeurs possibles pour "mmcible" en jouant sur "if" et "else" j'ai mis "popup" comme valeur de "mmtarget" de la sous-rubrique mais (toujours dans mon idée) je pouvais mettre n'importe quoi sauf aucune valeur qui doit correspondre à "if" soit "mmcible="top".

Est-ce que cette idée peut fonctionner et que c'est un problème de syntaxe pour l'adresse du lien qui pose problème, ou bien est-ce que c'est vraiment n'importe quoi ?

Modifié 18 Janvier 2005 par itsmi

[LaurentDenis]

Aïe

Quelques problèmes de démarche sur lesquels tu devrais, AMHA, te pencher avant de pourquivre:

Ton menu déroulant me semble reposer sur des techniques DHTML qui ont largement montré leurs limites:

- javascript obstructif, c'est à dire site non navigable sans javascript.

- javascript incompatible avec de nombreux navigateurs, car non standard

- complexité inutile de l'interface avec menu déroulant+popup, dissuasive pour l'utilisateur

- inaccessibilité de la solution

Tu réduis finalement beaucoup ton audience potentielle.

Quelques liens utiles:

- Faire un menu dynamique ouvert et accessible

- Créer des pop-up intelligentes

[itsmi]

je dirais même ouille! ouille! aie!

J'ai bien peur d'être déjà persuadé de la pertinence de tes remarques et à vrai dire je cherche dèjà dans une autre direction mais suis tout simplement effaré à l'idée d'avoir à repartir de zéro sur un point aussi essentiel que le menu du site.

D'une manière générale plus je me documente et plus je suis abasourdi (pour varier un peu) par la quantité phénoménale de "codes" existant pour la programmation d'une même tâche à accomplir; qui est de plus d'une banalité (dans le concept de base, l'idée de fond) absolue et d'un usage parfaitement systématique, bien que ceci vienne sûrement de cela, justement.

Parenthèse, j'ai tardé à répondre car je m'attendais à recevoir notification par mail d'une réponse. J'ai dû me gourrer quelque part et vais vérifier ça.

Au fait, merci !