
maxou2009
|
> > Bonjour, > > > > J'ai un problème avec un menu en javascript qui lorsque le sous menu se déroule il apparait sous un applet. J'utilise pour le menu des balises <DIV>. > > > > Vite une solution car cela urge un peu beaucoup !!!! > > > > Merci à vous tous.
CODE SOURCES : // positionnement du menu principal needcenter =false; if(!needcenter) posXmenu = 0; else { if (document.all) posXmenu = (document.body.clientWidth/2)-(500/2); else posXmenu = (window.innerWidth/2)-(500/2); } posYmenu = 75; hauteur_ligne_menu=25; // positionnement des sous-menus posXPop0 = -1; posXPop1 = 108; posXPop2 = 206; posXPop3 = 285; posXPop4 = 363; posXPop5 = 426; // dimensions des sous-menus hauteur_ligne_pop=20; marge_droite=15; largeur_pop0=173+marge_droite; largeur_pop1=189+marge_droite; largeur_pop2=240+marge_droite; largeur_pop3=138+marge_droite; largeur_pop4=109+marge_droite; largeur_pop5=109+marge_droite; // couleurs et images du roll-over bgcolor='#000066'; bgcolor2='#CCCCFF'; bgcolor3='#5C5CA3'; image_sep0_off = new Image; image_sep0_off.src = "picts/menuDHTML/separateurMenu_0.gif"; image_sep0_on = new Image; image_sep0_on.src = "picts/menuDHTML/separateurMenu_0_on.gif"; image_sep = new Image; image_sep.src = "picts/menuDHTML/separateurMenu.gif"; image_sep_gauche = new Image; image_sep_gauche.src = "picts/menuDHTML/separateurMenu_on_g.gif"; image_sep_droite = new Image; image_sep_droite.src = "picts/menuDHTML/separateurMenu_on_d.gif"; // divers var cellule; document.write('<style type="text/css">'); document.write('.popper { POSITION: absolute; VISIBILITY: hidden; z-index:3; }') document.write('#topgauche { position:absolute; top:'+posYmenu+'px; left:'+posXmenu+'px; z-index:10; }') document.write('A:hover.ejsmenu {color:#000000; text-decoration:none;}') document.write('A.ejsmenu {color:#000000; text-decoration:none;}') document.write('</style>') document.write('<DIV class=popper id=topdeck></DIV>');
/* LIENS */ zlien = new Array; zlien[0] = new Array; zlien[1] = new Array; zlien[2] = new Array; zlien[3] = new Array; zlien[4] = new Array; zlien[5] = new Array; zlien[0][0] = '<A HREF="#" class=bleuFonce10>Communiqués de presse</A>'; zlien[0][1] = '<A HREF="#" class=bleuFonce10>flash info</A>'; zlien[1][0] = '<A HREF="#" class=bleuFonce10>Présentations et documents</A>'; zlien[1][1] = '<A HREF="#" class=bleuFonce10>Histoire du Groupe </A>'; zlien[1][2] = '<A HREF="#" class=bleuFonce10>Le Groupe en pubs </A>'; zlien[1][3] = '<A HREF="#" class=bleuFonce10>Identité visuelle </A>'; zlien[1][4] = '<A HREF="#" class=bleuFonce10>Sites web du Groupe </A>'; zlien[2][0] = '<A HREF="#" class=bleuFonce10>Communication</A>'; zlien[2][1] = '<A HREF="#" class=bleuFonce10>Arts graphiques</A>'; zlien[2][2] = '<A HREF="#" class=bleuFonce10>Direction Industrielle</A>'; zlien[2][3] = '<A HREF="#" class=bleuFonce10>Finance</A>'; zlien[2][4] = '<A HREF="#" class=bleuFonce10>Informatique</A>'; zlien[2][5] = '<A HREF="#" class=bleuFonce10>Qualité</A>'; zlien[2][6] = '<A HREF="#" class=bleuFonce10>Marketing Groupe</A>'; zlien[2][7] = '<A HREF="#" class=bleuFonce10>Exploitation internationale</A>'; zlien[2][8] = '<A HREF="#" class=bleuFonce10>Département Nouvelles Technologies</A>'; zlien[3][0] = '<A HREF="#" class=bleuFonce10>Globe</A>'; zlien[3][1] = '<A HREF="#" class=bleuFonce10>4D</A>'; zlien[3][2] = '<A HREF="#" class=bleuFonce10>Harmony</A>'; zlien[3][3] = '<A HREF="#" class=bleuFonce10>Monitor</A>'; zlien[3][4] = '<A HREF="#" class=bleuFonce10>Planigrama-Madrid</A>'; zlien[4][0] = '<A HREF="#" class=bleuFonce10>France</A>'; zlien[4][1] = '<A HREF="#" class=bleuFonce10>Royaume-Uni</A>'; zlien[4][2] = '<A HREF="#" class=bleuFonce10>Finlande</A>'; zlien[4][3] = '<A HREF="#" class=bleuFonce10>Belgique</A>'; zlien[5][0] = '<A HREF="#" class=bleuFonce10>AirportNet</A>'; zlien[5][1] = '<A HREF="#" class=bleuFonce10>Airport France</A>';
// récupération du layer correspondant aux sous-menus 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
// effacement des sous-menus function effacerpop(menu,gauche,pos2) { var x = event.x+document.body.scrollLeft; var y = event.y+document.body.scrollTop; if (gauche==posXPop0){hauteurMax=(posYmenu+hauteur_ligne_menu+1)+((zlien[0].length)*hauteur_ligne_pop); largeurMax=gauche+largeur_pop0} if (gauche==posXPop1){hauteurMax=(posYmenu+hauteur_ligne_menu+1)+((zlien[1].length)*hauteur_ligne_pop); largeurMax=gauche+largeur_pop1} if (gauche==posXPop2){hauteurMax=(posYmenu+hauteur_ligne_menu+1)+((zlien[2].length)*hauteur_ligne_pop); largeurMax=gauche+largeur_pop2} if (gauche==posXPop3){hauteurMax=(posYmenu+hauteur_ligne_menu+1)+((zlien[3].length)*hauteur_ligne_pop); largeurMax=gauche+largeur_pop3} if (gauche==posXPop4){hauteurMax=(posYmenu+hauteur_ligne_menu+1)+((zlien[4].length)*hauteur_ligne_pop); largeurMax=gauche+largeur_pop4} if (gauche==posXPop5){hauteurMax=(posYmenu+hauteur_ligne_menu+1)+((zlien[5].length)*hauteur_ligne_pop); largeurMax=gauche+largeur_pop5} hauteur2=(posYmenu+hauteur_ligne_menu+1); if ((x<gauche+3) || (x>(largeurMax)) || (y>hauteurMax)) { if (gauche==posXPop0) { sep0.src=image_sep0_off.src; sep1.src=image_sep.src; } if (gauche==posXPop1) { sep1.src=image_sep.src; sep2.src=image_sep.src; } if (gauche==posXPop2) { sep2.src=image_sep.src; sep3.src=image_sep.src; } if (gauche==posXPop3) { sep3.src=image_sep.src; sep4.src=image_sep.src; } if (gauche==posXPop4) { sep4.src=image_sep.src; sep5.src=image_sep.src; } if (gauche==posXPop5) { sep5.src=image_sep.src; sep6.src=image_sep.src; } kill(); menu.style.background=bgcolor; menu.style.color="#FFFFFF"; } if (y<=hauteur2+2) { if ((pos2==posXPop0) && ((x<gauche+2) || (x>posXPop1))) { sep0.src=image_sep0_off.src; sep1.src=image_sep.src; menu.style.background=bgcolor; menu.style.color="#FFFFFF"; kill(); } if ((pos2==posXPop1) && ((x<gauche+2) || (x>posXPop2))) { sep1.src=image_sep.src; sep2.src=image_sep.src; menu.style.background=bgcolor; menu.style.color="#FFFFFF"; kill(); } if ((pos2==posXPop2) && ((x<gauche+2) || (x>posXPop3))) { sep2.src=image_sep.src; sep3.src=image_sep.src; menu.style.background=bgcolor; menu.style.color="#FFFFFF"; kill(); } if ((pos2==posXPop3) && ((x<gauche+2) || (x>posXPop4))) { sep3.src=image_sep.src; sep4.src=image_sep.src; menu.style.background=bgcolor; menu.style.color="#FFFFFF"; kill(); } if ((pos2==posXPop4) && ((x<gauche+2) || (x>posXPop5))) { sep4.src=image_sep.src; sep5.src=image_sep.src; menu.style.background=bgcolor; menu.style.color="#FFFFFF"; kill(); } if ((pos2==posXPop5) && ((x<gauche+2) || (x>300))) { sep5.src=image_sep.src; sep6.src=image_sep.src; menu.style.background=bgcolor; menu.style.color="#FFFFFF"; kill(); } } }
// affichage des sous-menus 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>"; if (pos==posXPop0){content += "<TD BGCOLOR="+bgcolor2+" onMouseOut=\"effacerpop(menu,gauche,pos2);\" onClick=\"menuOff(menu,gauche,1);\" HEIGHT="+hauteur_ligne_pop+" class=bleuFonce10 width="+largeur_pop0+"> <img src='picts/icones/ico_menuGauche.gif' width='13' height='7' alt='' border='0'> "+msg[pass]+"</TD>";} if (pos==posXPop1){content += "<TD BGCOLOR="+bgcolor2+" onMouseOut=\"effacerpop(menu,gauche,pos2);\" onClick=\"menuOff(menu,gauche,1);\" HEIGHT="+hauteur_ligne_pop+" class=bleuFonce10 width="+largeur_pop1+"> <img src='picts/icones/ico_menuGauche.gif' width='13' height='7' alt='' border='0'> "+msg[pass]+"</TD>";} if (pos==posXPop2){content += "<TD BGCOLOR="+bgcolor2+" onMouseOut=\"effacerpop(menu,gauche,pos2);\" onClick=\"menuOff(menu,gauche,1);\" HEIGHT="+hauteur_ligne_pop+" class=bleuFonce10 width="+largeur_pop2+"> <img src='picts/icones/ico_menuGauche.gif' width='13' height='7' alt='' border='0'> "+msg[pass]+"</TD>";} if (pos==posXPop3){content += "<TD BGCOLOR="+bgcolor2+" onMouseOut=\"effacerpop(menu,gauche,pos2);\" onClick=\"menuOff(menu,gauche,1);\" HEIGHT="+hauteur_ligne_pop+" class=bleuFonce10 width="+largeur_pop3+"> <img src='picts/icones/ico_menuGauche.gif' width='13' height='7' alt='' border='0'> "+msg[pass]+"</TD>";} if (pos==posXPop4){content += "<TD BGCOLOR="+bgcolor2+" onMouseOut=\"effacerpop(menu,gauche,pos2);\" onClick=\"menuOff(menu,gauche,1);\" HEIGHT="+hauteur_ligne_pop+" class=bleuFonce10 width="+largeur_pop4+"> <img src='picts/icones/ico_menuGauche.gif' width='13' height='7' alt='' border='0'> "+msg[pass]+"</TD>";} if (pos==posXPop5){content += "<TD BGCOLOR="+bgcolor2+" onMouseOut=\"effacerpop(menu,gauche,pos2);\" onClick=\"menuOff(menu,gauche,1);\" HEIGHT="+hauteur_ligne_pop+" class=bleuFonce10 width="+largeur_pop5+"> <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) { if (etat==1) { if (gauche==posXPop0) { sep0.src=image_sep0_off.src; sep1.src=image_sep.src; } if (gauche==posXPop1) { sep1.src=image_sep.src; sep2.src=image_sep.src; } if (gauche==posXPop2) { sep2.src=image_sep.src; sep3.src=image_sep.src; } if (gauche==posXPop3) { sep3.src=image_sep.src; sep4.src=image_sep.src; } if (gauche==posXPop4) { sep4.src=image_sep.src; sep5.src=image_sep.src; } if (gauche==posXPop5) { sep5.src=image_sep.src; sep6.src=image_sep.src; } kill(); src.style.background=bgcolor; src.style.color="#FFFFFF"; } 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) { if (gauche==posXPop0) { sep0.src=image_sep0_off.src; sep1.src=image_sep.src; } if (gauche==posXPop1) { sep1.src=image_sep.src; sep2.src=image_sep.src; } if (gauche==posXPop2) { sep2.src=image_sep.src; sep3.src=image_sep.src; } if (gauche==posXPop3) { sep3.src=image_sep.src; sep4.src=image_sep.src; } if (gauche==posXPop4) { sep4.src=image_sep.src; sep5.src=image_sep.src; } if (gauche==posXPop5) { sep5.src=image_sep.src; sep6.src=image_sep.src; } kill(); src.style.background=bgcolor; src.style.color="#FFFFFF"; } if (y==hauteurMax+2) { if (x<=gauche+3) { if (gauche==posXPop0) { sep0.src=image_sep0_off.src; sep1.src=image_sep.src; } if (gauche==posXPop1) { sep1.src=image_sep.src; sep2.src=image_sep.src; } if (gauche==posXPop2) { sep2.src=image_sep.src; sep3.src=image_sep.src; } if (gauche==posXPop3) { sep3.src=image_sep.src; sep4.src=image_sep.src; } if (gauche==posXPop4) { sep4.src=image_sep.src; sep5.src=image_sep.src; } if (gauche==posXPop5) { sep5.src=image_sep.src; sep6.src=image_sep.src; } kill(); src.style.background=bgcolor; src.style.color="#FFFFFF"; } } } }
function kill() { skn.visibility = "hidden"; }
document.onclick = kill;
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>') document.write('<td bgcolor="'+bgcolor2+'"><img src="picts/tdot.gif" width="65" 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('<td bgcolor="'+bgcolor2+'"><img src="picts/tdot.gif" width="73" 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('<td bgcolor="'+bgcolor2+'"><img src="picts/tdot.gif" width="54" 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('<td bgcolor="'+bgcolor2+'"><img src="picts/tdot.gif" width="53" 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('<td bgcolor="'+bgcolor2+'"><img src="picts/tdot.gif" width="38" 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('<td bgcolor="'+bgcolor2+'"><img src="picts/tdot.gif" width="60" 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,posXPop0,1);"><img src="'+image_sep0_off.src+'" width="19" height="'+hauteur_ligne_menu+'" alt="" border="0" name="sep0"></td>') document.write('<td class=blanc12 onMouseOver="pop(this,zlien[0],posXPop0);sep0.src=image_sep0_on.src;sep1.src=image_sep_gauche.src;" onMouseOut="menuOff(this,posXPop0,0);" onClick="menuOff(this,posXPop0,1);">Actualités </td>') document.write('<td onClick="menuOff(this,posXPop0,1);"><img src="'+image_sep.src+'" width="25" height="'+hauteur_ligne_menu+'" alt="" border="0" name="sep1"></td>') document.write('<td class=blanc12 onMouseOver="pop(this,zlien[1],posXPop1);sep1.src=image_sep_droite.src;sep2.src=image_sep_gauche.src" onMouseOut="menuOff(this,posXPop1,0);" onClick="menuOff(this,posXPop1,1);"> Le Groupe </td>') document.write('<td onClick="menuOff(this,posXPop1,1);"><img src="'+image_sep.src+'" width="25" height="'+hauteur_ligne_menu+'" alt="" border="0" name="sep2"></td>') document.write('<td class=blanc12 onMouseOver="pop(this,zlien[2],posXPop2);sep2.src=image_sep_droite.src;sep3.src=image_sep_gauche.src" onMouseOut="menuOff(this,posXPop2,0);" onClick="menuOff(this,posXPop2,1);"> Métiers </td>') document.write('<td onClick="menuOff(this,posXPop2,1);"><img src="'+image_sep.src+'" width="25" height="'+hauteur_ligne_menu+'" alt="" border="0" name="sep3"></td>') document.write('<td class=blanc12 onMouseOver="pop(this,zlien[3],posXPop3);sep3.src=image_sep_droite.src;sep4.src=image_sep_gauche.src" onMouseOut="menuOff(this,posXPop3,0);" onClick="menuOff(this,posXPop3,1);"> Projets </td>') document.write('<td onClick="menuOff(this,posXPop3,1);"><img src="'+image_sep.src+'" width="25" height="'+hauteur_ligne_menu+'" alt="" border="0" name="sep4"></td>') document.write('<td class=blanc12 onMouseOver="pop(this,zlien[4],posXPop4);sep4.src=image_sep_droite.src;sep5.src=image_sep_gauche.src" onMouseOut="menuOff(this,posXPop4,0);" onClick="menuOff(this,posXPop4,1);"> Pays </td>') document.write('<td onClick="menuOff(this,posXPop4,1);"><img src="'+image_sep.src+'" width="25" height="'+hauteur_ligne_menu+'" alt="" border="0" name="sep5"></td>') document.write('<td class=blanc12 onMouseOver="pop(this,zlien[5],posXPop5);sep5.src=image_sep_droite.src;sep6.src=image_sep_gauche.src" onMouseOut="menuOff(this,posXPop5,0);" onClick="menuOff(this,posXPop5,1);"> Activités </td>') document.write('<td onClick="menuOff(this,posXPop5,1);"><img src="'+image_sep.src+'" width="25" height="'+hauteur_ligne_menu+'" alt="" border="0" name="sep6"></td>') document.write('</tr>') document.write('<tr>') document.write('<td colspan=13 bgcolor="'+bgcolor2+'"><img src="picts/tdot.gif" width="1" height="1" alt="" border="0"></td>') document.write('</tr>') document.write('</table></div>')
|