Forum de discussion
Forum « Programmation Javascript » (archives)
Cible dans menu déroulant horizontal
Envoyé: 17 janvier 2005, 18h19 par itsmi
Je ne parviens pas à trouver comment choisir différents type de cible (au minimum pouvoir ouvrir une fenêtre en popup à partir d'un titre ou sous titre du menu) dans un menu par ailleurs assez chiadé (en js donc). Je pense qu'il doit être possible de remplacer le type unique de cible par défaut par un choix de types mais je n'y arrive pas. Avis aux champions du genre, voici le code:
<---DEBUT--->
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();
<---FIN--->
Pour ceux que ça intéresse, ce fichier est avantageusement accompagné d'une feuille CSS pour les styles du menu et de quelques lignes codes pour la compatibilité (il reste des soucis avec certains navigateurs)
Réponses
|