pb menu déroulant sous applet et listbox

maxou2009 · 15 Septembre 2004

J'ai un problème avec un code javascript de menu déroulant qui lorsqu'il se déroule se place sous les combobox et applet.

On m'a conseillé de l'encapsuler dans un iframe ce que j'ai essayé de faire mais n'étant pas un pro j'ai pas 100% du résultat que je voudrais.

L'iframe est bien positionné mais est sur le DIV ... j'en ai marre !!!!! :-)

Quelqu'un peut il m'aider a résoudre mon problème.

Voici le code d'appel du menu dans ma page HTML :

<body>

if(document.getElementById)

document.write('<DIV id=topdeck style="POSITION: absolute; VISIBILITY:hidden; z-index:100; display:none"></DIV>')

</SCRIPT>

</body>

Voici le code javascript du fichier "menu.js" :

//////////////////////////

// MISE EN FORME ET DESIGN

//////////////////////////

// POSITION X DU MENU

posXmenu = 0;

// POSITION Y DU MENU

posYmenu = 75;

// HAUTEUR DE LIGNE DES RUBRIQUES

hauteur_ligne_menu=25;

// HAUTEUR DE LIGNE DES SOUS RUBRIQUES

hauteur_ligne_pop=20;

// MARGE DROITE DES SOUS RUBRIQUES

marge_droite=15;

// FOND DE RUBRIQUE OFF

bgcolor='#000066';

// FOND DE RUBRIQUE ON + FOND DE SOUS RUBRIQUE

bgcolor2='#CCCCFF';

// BORDURE DE SOUS RUBRIQE

bgcolor3='#5C5CA3';

// IMAGE OFF MARGE GAUCHE

image_sep0_off = new Image;

image_sep0_off.src = "picts/menuDHTML/separateurMenu_0.gif";

// IMAGE ON MARGE GAUCHE

image_sep0_on = new Image;

image_sep0_on.src = "picts/menuDHTML/separateurMenu_0_on.gif";

// IMAGE SEPARATEUR MENU OFF

image_sep = new Image;

image_sep.src = "picts/menuDHTML/separateurMenu.gif";

// IMAGE SEPARATEUR MENU GAUCHE ON

image_sep_gauche = new Image;

image_sep_gauche.src = "picts/menuDHTML/separateurMenu_on_g.gif";

// IMAGE SEPARATEUR MENU DROITE OFF

image_sep_droite = new Image;

image_sep_droite.src = "picts/menuDHTML/separateurMenu_on_d.gif";

// INITIALISATION DES CALQUES

document.write('<style type="text/css">');

document.write('#topgauche { position:absolute; top:'+posYmenu+'px; left:'+posXmenu+'px; z-index:10; }')

document.write('</style>')

document.write('<DIV id=topdeck style="POSITION: absolute; VISIBILITY:hidden; z-index:100; display:none"></DIV>');

/////////////////////////////////////////////////////////

// PARTIE A COMPLETER PAR DONNEES EN BDD ET REGLAGES MAIN

/////////////////////////////////////////////////////////

// CHOIX DU LANGAGE

langage='FR';

//langage='UK';

// INDIQUER ICI LE NOMBRE DE RUBRIQUES A AFFICHER

if (langage=='FR')

{

nbreRubriques=6;

}

else // UK

{

nbreRubriques=6;

}

// LARGEUR DES RUBRIQUES

// REGLAGE A LA MAIN :

// AJOUTER 'bgcolor=red' dans le <TD> de la ligne 466

// TESTER LA TAILLE JUSQU'A AVOIR ENVIRON 5 PIXELS DE CHAQUE COTE DU LIBELLE DE LA RUBRIQUE

// RETIRER 'bgcolor=red'

largeurRubriques = new Array;

if (langage=='FR')

{

largeurRubriques[0] = 65;

largeurRubriques[1] = 73;

largeurRubriques[2] = 54;

largeurRubriques[3] = 53;

largeurRubriques[4] = 38;

largeurRubriques[5] = 60;

}

else // UK

{

largeurRubriques[0] = 45;

largeurRubriques[1] = 73;

largeurRubriques[2] = 75;

largeurRubriques[3] = 63;

largeurRubriques[4] = 70;

largeurRubriques[5] = 68;

}

// LARGEUR DES SOUS RUBRIQUES

// REGLAGE A LA MAIN :

// RETIRER 'marge_droite+'

// TESTER LA TAILLE JUSQU'A BONNE TENUE DES LIBELLES DES SOUS RUBRIQUES

// REMETTRE 'marge_droite+'

largeur_pop = new Array;

if (langage=='FR')

{

largeur_pop[0]=marge_droite+173;

largeur_pop[1]=marge_droite+189;

largeur_pop[2]=marge_droite+240;

largeur_pop[3]=marge_droite+138;

largeur_pop[4]=marge_droite+109;

largeur_pop[5]=marge_droite+109;

}

else // UK

{

largeur_pop[0]=marge_droite+108;

largeur_pop[1]=marge_droite+185;

largeur_pop[2]=marge_droite+170;

largeur_pop[3]=marge_droite+138;

largeur_pop[4]=marge_droite+81;

largeur_pop[5]=marge_droite+87;

}

// LIBELLES DES RUBRIQUES

nomRubriques = new Array;

if (langage=='FR')

{

nomRubriques[0] = 'Actualités';

nomRubriques[1] = 'Le Groupe';

nomRubriques[2] = 'Métiers';

nomRubriques[3] = 'Projets';

nomRubriques[4] = 'Pays';

nomRubriques[5] = 'Activités';

}

else // UK

{

nomRubriques[0] = 'News';

nomRubriques[1] = 'The Group';

nomRubriques[2] = 'Job areas';

nomRubriques[3] = 'Projects';

nomRubriques[4] = 'Countries';

nomRubriques[5] = 'Activities';

}

// INDIQUER ICI LE NOMBRE DE SOUS RUBRIQUES PAR RUBRIQUE.

nbreSousRubriques = new Array;

for(var r=0;r<=nbreRubriques-1;r++){nbreSousRubriques[r] = new Array;}

if (langage=='FR')

{

nbreSousRubriques[0]=2;

nbreSousRubriques[1]=5;

nbreSousRubriques[2]=9;

nbreSousRubriques[3]=5;

nbreSousRubriques[4]=4;

nbreSousRubriques[5]=2;

}

else // UK

{

nbreSousRubriques[0]=2;

nbreSousRubriques[1]=5;

nbreSousRubriques[2]=9;

nbreSousRubriques[3]=5;

nbreSousRubriques[4]=4;

nbreSousRubriques[5]=1;

}

// LIBELLES ET LIENS DES SOUS RUBRIQUES

nomSousRubriques = new Array;

lienSousRubriques = new Array;

for(var r=0;r<=nbreRubriques;r++)

{

nomSousRubriques[r] = new Array;

lienSousRubriques[r] = new Array;

}

// LIBELLES DES SOUS RUBRIQUES

if (langage=='FR')

{

nomSousRubriques[0][0] = 'Communiqués de presse';

nomSousRubriques[0][1] = 'Flash info';

nomSousRubriques[1][0] = 'Présentations et documents';

nomSousRubriques[1][1] = 'Histoire du Groupe';

nomSousRubriques[1][2] = 'Le Groupe en pubs';

nomSousRubriques[1][3] = 'Identité visuelle';

nomSousRubriques[1][4] = 'Sites web du Groupe';

nomSousRubriques[2][0] = 'Communication';

nomSousRubriques[2][1] = 'Arts graphiques';

nomSousRubriques[2][2] = 'Direction Industrielle';

nomSousRubriques[2][3] = 'Finance';

nomSousRubriques[2][4] = 'Informatique';

nomSousRubriques[2][5] = 'Qualité';

nomSousRubriques[2][6] = 'Marketing Groupe';

nomSousRubriques[2][7] = 'Exploitation internationale';

nomSousRubriques[2] = 'Département Nouvelles Technologies';

nomSousRubriques[3][0] = 'Globe';

nomSousRubriques[3][1] = '4D';

nomSousRubriques[3][2] = 'Harmony';

nomSousRubriques[3][3] = 'Monitor';

nomSousRubriques[3][4] = 'Planigrama-Madrid';

nomSousRubriques[4][0] = 'France';

nomSousRubriques[4][1] = 'Royaume-Uni';

nomSousRubriques[4][2] = 'Finlande';

nomSousRubriques[4][3] = 'Belgique';

nomSousRubriques[5][0] = 'AirportNet';

nomSousRubriques[5][1] = 'Airport France';

}

else // UK

{

nomSousRubriques[0][0] = 'Press release';

nomSousRubriques[0][1] = 'news flash';

nomSousRubriques[1][0] = 'Presentations & documents';

nomSousRubriques[1][1] = 'History of the Group';

nomSousRubriques[1][2] = 'Adverts of the Group';

nomSousRubriques[1][3] = 'Corporate identity';

nomSousRubriques[1][4] = 'Web sites of the Group';

nomSousRubriques[2][0] = 'Communications';

nomSousRubriques[2][1] = 'Graphic design';

nomSousRubriques[2][2] = 'Industrial';

nomSousRubriques[2][3] = 'Finance';

nomSousRubriques[2][4] = 'IT';

nomSousRubriques[2][5] = 'Quality';

nomSousRubriques[2][6] = 'Group Marketing';

nomSousRubriques[2][7] = 'International Operations';

nomSousRubriques[2] = 'High-tech Department';

nomSousRubriques[3][0] = 'Globe';

nomSousRubriques[3][1] = '4D';

nomSousRubriques[3][2] = 'Harmony';

nomSousRubriques[3][3] = 'Monitor';

nomSousRubriques[3][4] = 'Planigrama-Madrid';

nomSousRubriques[4][0] = 'France';

nomSousRubriques[4][1] = 'UK';

nomSousRubriques[4][2] = 'Finland';

nomSousRubriques[4][3] = 'Belgium';

nomSousRubriques[5][0] = 'AirportNet';

}

// LIENS DES SOUS RUBRIQUES

if (langage=='FR')

{

lienSousRubriques[0][0] = '#a';

lienSousRubriques[0][1] = '#b';

lienSousRubriques[1][0] = '#c';

lienSousRubriques[1][1] = '#d';

lienSousRubriques[1][2] = '#e';

lienSousRubriques[1][3] = '#f';

lienSousRubriques[1][4] = '#g';

lienSousRubriques[2][0] = '#h';

lienSousRubriques[2][1] = '#i';

lienSousRubriques[2][2] = '#j';

lienSousRubriques[2][3] = '#k';

lienSousRubriques[2][4] = '#l';

lienSousRubriques[2][5] = '#m';

lienSousRubriques[2][6] = '#n';

lienSousRubriques[2][7] = '#o';

lienSousRubriques[2] = '#p';

lienSousRubriques[3][0] = '#q';

lienSousRubriques[3][1] = '#r';

lienSousRubriques[3][2] = '#s';

lienSousRubriques[3][3] = '#t';

lienSousRubriques[3][4] = '#u';

lienSousRubriques[4][0] = '#v';

lienSousRubriques[4][1] = '#w';

lienSousRubriques[4][2] = '#x';

lienSousRubriques[4][3] = '#y';

lienSousRubriques[5][0] = '#z';

lienSousRubriques[5][1] = '#a';

}

else // UK

{

lienSousRubriques[0][0] = '#a';

lienSousRubriques[0][1] = '#b';

lienSousRubriques[1][0] = '#c';

lienSousRubriques[1][1] = '#d';

lienSousRubriques[1][2] = '#e';

lienSousRubriques[1][3] = '#f';

lienSousRubriques[1][4] = '#g';

lienSousRubriques[2][0] = '#h';

lienSousRubriques[2][1] = '#i';

lienSousRubriques[2][2] = '#j';

lienSousRubriques[2][3] = '#k';

lienSousRubriques[2][4] = '#l';

lienSousRubriques[2][5] = '#m';

lienSousRubriques[2][6] = '#n';

lienSousRubriques[2][7] = '#o';

lienSousRubriques[2] = '#p';

lienSousRubriques[3][0] = '#q';

lienSousRubriques[3][1] = '#r';

lienSousRubriques[3][2] = '#s';

lienSousRubriques[3][3] = '#t';

lienSousRubriques[3][4] = '#u';

lienSousRubriques[4][0] = '#v';

lienSousRubriques[4][1] = '#w';

lienSousRubriques[4][2] = '#x';

lienSousRubriques[4][3] = '#y';

lienSousRubriques[5][0] = '#z';

}

//////////////////////////////////

// NE RIEN MODIFIER A PARTIR D'ICI

//////////////////////////////////

// POSITIONNEMENT AUTOMATIQUE DES SOUS RUBRIQUES EN FONCTIONS DE LA LARGEUR DES RUBRIQUES

posXPop = new Array;

posXPop[0] = -1;

posXPop[1] = 19+largeurRubriques[0]+25-1;

for(var r=2;r<=nbreRubriques-1;r++)

{

rPrec=r-1;

posXPop[r] = posXPop[rPrec]+largeurRubriques[rPrec]+25;

}

// DEFINITION DES SEPARATEURS

sep = new Array;

for(var r=0;r<=nbreRubriques;r++)

{

sep[r]='sep'+r;

}

// DEFINITION DU NOMBRE DE RUBRIQUES

zlien = new Array;

for(var r=0;r<=nbreRubriques-1;r++)

{

zlien[r] = new Array;

// DEFINITION DU NOMBRE DE SOUS RUBRIQUES PAR RUBRIQUES

for(var sr=0;sr<=nbreSousRubriques[r]-1;sr++)

{

zlien[r][sr] = '<A HREF="'+lienSousRubriques[r][sr]+'" class=bleuFonce10>'+nomSousRubriques[r][sr]+'</A>';

}

// RECUPERATION DU LAYER CORRESPONDANT AUX SOUS RUBRIQUES ET POSITIONNEMENT

var nava = (document.layers);

var dom = (document.getElementById);

var iex = (document.all);

if (nava) { skn = document.topdeck;}

else if (dom) { skn = document.getElementById("topdeck").style;}

else if (iex) { skn = topdeck.style;}

skn.top = posYmenu+hauteur_ligne_menu+1; // +1 pour la ligne claire en bas du tableau du menu principal

// RESET DES SEPARATEURS

function etatSep(sepPrec,sepSuiv,src)

{

if (gauche==posXPop[0]) { sepPrec.src=image_sep0_off.src; sepSuiv.src=image_sep.src; }

for(var r=1;r<=nbreRubriques-1;r++)

{

r1=r+1;

if (gauche==posXPop[r]) {sepPrec.src=image_sep.src; sepSuiv.src=image_sep.src;}

}

kill();

src.style.background=bgcolor;

src.style.color="#FFFFFF";

}

// EFFACEMENT DES SOUS RUBRIQUES

function effacerpop(menu,gauche,pos2,sepPrec,sepSuiv)

{

var x = event.x+document.body.scrollLeft;

var y = event.y+document.body.scrollTop;

for(var r=0;r<=nbreRubriques-1;r++)

{

if (gauche==posXPop[r]){hauteurMax=(posYmenu+hauteur_ligne_menu+1)+((zlien[r].lengt

)*hauteur_ligne_pop); largeurMax=gauche+largeur_pop[r]}

}

hauteur2=(posYmenu+hauteur_ligne_menu+1);

if ((x<gauche+3) || (x>(largeurMax)) || (y>hauteurMax))

{

etatSep(sepPrec,sepSuiv,menu);

}

if (y<=hauteur2+2)

{

if ((pos2==posXPop[0]) && ((x<gauche+2) || (x>posXPop[1]-25))) {sepPrec.src=image_sep0_off.src; sepSuiv.src=image_sep.src; menu.style.background=bgcolor; menu.style.color="#FFFFFF"; kill(); }

for(var r=1;r<=nbreRubriques-1;r++)

{

if ((pos2==posXPop[r]) && ((x<gauche+2) || (x>(posXPop[r]+largeurRubriques[r]))))

{

etatSep(sepPrec,sepSuiv,menu);

}

// AFFICHAGE DES SOUS RUBRIQUES

function pop(src,msg,pos)

{

menu=src;

skn.visibility = "hidden";

a=true

skn.left = posXmenu+pos;

gauche=posXmenu+pos;

var content ="<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR='"+bgcolor2+"'>";

pass = 0

while (pass < msg.length)

{

pos2=pos;

content += "<TR>";

content += "<TD bgcolor='"+bgcolor3+"'><img src='picts/tdot.gif' width=1 height=1 alt='' border=0></TD>";

for(var r=0;r<=nbreRubriques-1;r++)

{

r1=r+1;

if (pos==posXPop[r]){content += "<TD BGCOLOR="+bgcolor2+" onMouseOut=\"effacerpop(menu,gauche,pos2,"+sep[r]+","+sep[r1]+");\" onClick=\"menuOff(menu,gauche,1,"+sep[r]+","+sep[r1]+");\" HEIGHT="+hauteur_ligne_pop+" class=bleuFonce10 width="+largeur_pop[r]+"> <img src='picts/icones/ico_menuGauche.gif' width='13' height='7' alt='' border='0'> "+msg[pass]+"</TD>";}

}

content += "<TD bgcolor='"+bgcolor3+"'><img src='picts/tdot.gif' width=1 height=1 alt='' border=0></TD>";

content += "</TR>";

pass++;

}

content += "<TR>";

content += "<TD colspan=3 bgcolor='"+bgcolor3+"'><img src='picts/tdot.gif' width=1 height=1 alt='' border=0></TD>";

content += "</TR>";

content += "</TABLE>";

if (nava)

{

skn.document.write(content);

skn.document.close();

skn.visibility = "visible";

}

else if (dom)

{

document.getElementById("topdeck").innerHTML = content;

skn.visibility = "visible";

}

else if (iex)

{

document.all("topdeck").innerHTML = content;

skn.visibility = "visible";

}

src.style.background=bgcolor2;

src.style.color=bgcolor;

}

function menuOff(src,gauche,etat,sepPrec,sepSuiv)

{

if (etat==1)

{

etatSep(sepPrec,sepSuiv,src);

}

else

{

var x = event.x+document.body.scrollLeft;

var y = event.y+document.body.scrollTop;

hauteurMax=(posYmenu+hauteur_ligne_menu+1);

if (y<hauteurMax+2)

{

etatSep(sepPrec,sepSuiv,src);

}

if (y==hauteurMax+2)

{

if (x<=gauche+3)

{

etatSep(sepPrec,sepSuiv,src);

}

src.style.background=bgcolor2;

src.style.color=bgcolor;

var DivRef = document.getElementById('topdeck');

var IfrRef = document.getElementById('DivShim');

DivRef.style.display = "block";

IfrRef.style.width = DivRef.offsetWidth;

IfrRef.style.height = DivRef.offsetHeight;

IfrRef.style.top = DivRef.style.top;

IfrRef.style.left = DivRef.style.left;

IfrRef.style.zIndex = DivRef.style.zIndex - 1;

IfrRef.style.display = "block";

}

function kill()

{

skn.visibility = "hidden";

var DivRef = document.getElementById('topdeck');

var IfrRef = document.getElementById('DivShim');

DivRef.style.display = "none";

IfrRef.style.display = "none";

}

document.onclick = kill;

//CONSTRUCTION DU MENU DHTML AU CHARGEMENT DE LA PAGE

document.write('<DIV ID=topgauche><table cellpadding=0 cellspacing=0 border=0 bgcolor="'+bgcolor+'" width="300">')

document.write('<tr>')

document.write('<td bgcolor="'+bgcolor2+'"><img src="picts/tdot.gif" width="19" height="1" alt="" border="0"></td>')

for(var r=0;r<=nbreRubriques-1;r++)

{

if(r==0){sepDroite='sep0_on';}else{sepDroite='sep_droite';}

r1=r+1;

document.write('<td bgcolor="'+bgcolor2+'"><img src="picts/tdot.gif" width='+largeurRubriques[r]+' height="1" alt="" border="0"></td>')

document.write('<td bgcolor="'+bgcolor2+'"><img src="picts/tdot.gif" width="25" height="1" alt="" border="0"></td>')

}

document.write('</tr>')

document.write('<tr>')

document.write('<td onClick="menuOff(this,posXPop[0],1,'+sep[0]+','+sep[1]+');"><img src="'+image_sep0_off.src+'" width="19" height="'+hauteur_ligne_menu+'" alt="" border="0" name="'+sep[0]+'"></td>')

for(var r=0;r<=nbreRubriques-1;r++)

{

if(r==0){sepDroite='sep0_on';}else{sepDroite='sep_droite';}

r1=r+1;

document.write('<td align=center class=blanc12 onMouseOver="pop(this,zlien['+r+'],posXPop['+r+']);'+sep[r]+'.src=image_'+sepDroite+'.src;'+sep[r1]+'.src=image_sep_gauche.src;" onMouseOut="menuOff(this,posXPop['+r+'],0,'+sep[r]+','+sep[r1]+');" onClick="menuOff(this,posXPop['+r+'],1,'+sep[r]+','+sep[r1]+');">'+nomRubriques[r]+'</td>')

document.write('<td onClick="menuOff(this,posXPop['+r+'],1,'+sep[r]+','+sep[r1]+');"><img src="'+image_sep.src+'" width="25" height="'+hauteur_ligne_menu+'" alt="" border="0" name="'+sep[r1]+'"></td>')

}

document.write('</tr>')

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

Connexion

pb menu déroulant sous applet et listbox

Sujets conseillés

maxou2009

Veuillez vous connecter pour commenter

Parcourir

Activité