Bonjours, j'ai repris un vieux menu que j'ai modifié afin de rajouté des onglets de navigation avec des vrais liens dans le menu (<a> avec target).
Par contre j'ai un problème de compatibilité IE avec le menu du à la création de la feuille de style???, et un autre problème avec la fonction de mise à jours du menu, actuMenu(), via une iframe et un parent.frame.
Au fait, la gestion des liens se fait via php et une base mysql d'où l'utilisation de la fonction de mise à jours.
Code de la page :
<SCRIPT SRC='Classe/ssm.js' language='JavaScript1.2'></SCRIPT>
<SCRIPT language='JavaScript1.2'> // Menu
NbOnglets = 4; ongletHorizontal='no';
YOffset=0; XOffset=0; staticYOffset=30;
slideSpeed=20 // no quotes!!
waitTime=60; // no quotes!! this sets the time the menu stays out for after the mouse goes off it.
menuBGColor='black';
menuIsStatic='yes'; //this sets whether menu should stay static on the screen
menuWidth=180;
// mise en format titre
hdrFontFamily='verdana'; hdrFontSize='2'; hdrFontColor='white'; hdrBGColor='#E0B888'; hdrAlign='center'; hdrVAlign='center'; hdrHeight='15';
// mise en format lien active
linkFontFamily='Verdana'; linkFontSize='2'; linkBGColor='white'; linkOverBGColor='#E0B888'; linkTarget='visuDiv'; linkAlign='Left';
// mise en format apercu
barBGColor='#FFD800'; barFontFamily='Verdana'; barFontSize='2'; barFontColor='white'; barVAlign='center'; barWidth=20;
barText='M E N U'; barImg='<IMG src="Classe/Img/link.gif">';
iop=0;
// ssmItems[...]=[name, link, target, passworld ?]
ssmItems[iop]=['Administration', '?page=admin']; iop+=1;
ssmItems[iop]=['Pages privées']; iop+=1;
ssmItems[iop]=["BDD", "","",1]; iop+=1;
ssmItems[iop]=['Pages publiques']; iop+=1;
ssmItems[iop]=["Jeux online", "./Jeux/"]; iop+=1;
buildMenu();
InitBulle('#000000','#E0B888','#FFD800',3);
</SCRIPT>
--------------------------------------------------
Code du fichier ssm.js:
NS6 = (document.getElementById&&!document.all)
IE = (document.all)
NS = (navigator.appName=="Netscape" && navigator.appVersion.charAt(0)=="4")
tempBar=''; ssmItems=new Array();
tabMemo=new Array(); pageSel=0;
function truebody(){
return (document.compatMode!="BackCompat")? document.documentElement : document.body
}
moving=setTimeout('null',1)
function moveOut() {
if ((NS6||NS)&&parseInt(ssm.left)<0 || IE && ssm.pixelLeft<0) {
clearTimeout(moving); moving = setTimeout('moveOut()', slideSpeed);slideMenu(10)}
else {clearTimeout(moving); moving=setTimeout('null',1)}
};
function moveBack() {clearTimeout(moving);moving = setTimeout('moveBack1()', waitTime)}
function moveBack1() {
if ((NS6||NS) && parseInt(ssm.left)>(-menuWidth) || IE && ssm.pixelLeft>(-menuWidth)) {
clearTimeout(moving); moving = setTimeout('moveBack1()', slideSpeed); slideMenu(-10)}
else {clearTimeout(moving); moving=setTimeout('null',1)}
}
function slideMenu(num){
if (IE) {ssm.pixelLeft += num;}
if (NS6) {ssm.left = parseInt(ssm.left)+num+"px";}
if (NS) {ssm.left = parseInt(ssm.left)+num; bssm.clip.right+=num; bssm2.clip.right+=num;}
}
function makeStatic() {
if (NS||NS6) {winY = window.pageYOffset;}
if (IE) {winY = truebody().scrollTop;}
if (NS6||IE||NS) {
smooth=winY-lastY;
if (IE) { bssm.pixelTop+=smooth; }
if (NS6){ bssm.top=parseInt(bssm.top)+smooth+"px"; }
if (NS) { bssm.top=parseInt(bssm.top)+smooth; }
lastY = lastY+smooth;
setTimeout('makeStatic()', 1)
}
}
function initSlide() {
if (NS6){
ssm=document.getElementById("thessm").style;
bssm=document.getElementById("basessm").style;
bssm.clip="rect(0 "+document.getElementById("thessm").offsetWidth+" "+document.getElementById("thessm").offsetHeight+" 0)";
ssm.visibility="visible";
}
else if (IE) {
ssm=document.all("thessm").style;
bssm=document.all("basessm").style
bssm.clip="rect(0 "+thessm.offsetWidth+" "+thessm.offsetHeight+" 0)";
bssm.visibility = "visible";}
else if (NS) {
bssm=document.layers["basessm1"];
bssm2=bssm.document.layers["basessm2"];
ssm=bssm2.document.layers["thessm"];
bssm2.clip.left=0;ssm.visibility = "show";
}
if (menuIsStatic=="yes") makeStatic();
}
function buildMenu() {
style(); makeOnglet();
if (IE||NS6) {document.write('<DIV ID="basessm" style="visibility:hidden;Position : Absolute ;Left : '+XOffset+'px ;Top : '+YOffset+'px ;Z-Index : 20;width:'+(menuWidth+barWidth+10)+'px"><DIV ID="thessm" style="Position : Absolute ;Left : '+(-menuWidth)+'px ;Top : 0 ;Z-Index : 20;" onmouseover="moveOut()" onmouseout="moveBack()">')}
if (NS) {document.write('<LAYER name="basessm1" top="'+YOffset+'" LEFT='+XOffset+' visibility="show"><ILAYER name="basessm2"><LAYER visibility="hide" name="thessm" bgcolor="'+menuBGColor+'" left="'+(-menuWidth)+'" onmouseover="moveOut()" onmouseout="moveBack()">')}
if (NS6){document.write('<table border="0" cellpadding="0" cellspacing="0" width="'+(menuWidth+barWidth+2)+'px" bgcolor="'+menuBGColor+'"><TR><TD>')}
document.write('<iframe style="position:absolute; top:0px; left:0px;" frameborder=0 height=1 width=1 name="secuZoneDiv"></iframe><table border="0" cellpadding="0" cellspacing="1" width="'+(menuWidth+barWidth+2)+'px" bgcolor="'+menuBGColor+'" id="MenuTabAff">');
txtes=""; barBuilt=0;
for(i=0;i<ssmItems.length;i++) {
txtes += '<TR>';
if(!ssmItems[i][1] && !ssmItems[i][3]){
txtes += '<td bgcolor="'+hdrBGColor+'" HEIGHT="'+hdrHeight+'px" ALIGN="'+hdrAlign+'" VALIGN="'+hdrVAlign+'"> <font face="'+hdrFontFamily+'" Size="'+hdrFontSize+'" COLOR="'+hdrFontColor+'"><b>'+ssmItems[i][0]+'</b></font></td>';
}
else {
if(ssmItems[i][3]) {
tmpCible = "secuZoneDiv"; tmpLien = "?onglet="+pageSel+"&pageSecu="+ssmItems[i][0];
} else {
tmpLien = ssmItems[i][1]; tmpCible = (!ssmItems[i][2]) ? linkTarget+""+pageSel : ssmItems[i][2];
}
txtes += '<TD BGCOLOR="'+linkBGColor+'" onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'" ALIGN="'+linkAlign+'"><FONT face="'+linkFontFamily+'" Size="'+linkFontSize+'" onclick="changeCom('+i+')"> <A HREF="'+tmpLien+'" target="'+tmpCible+'" CLASS="ssmItems">'+ssmItems[i][0]+'</a></TD>';
}
if(barBuilt==0) {
tempBar="";
if(barText.indexOf('<IMG')>-1) {tempBar=barText}
else{for (b=0;b<barText.length;b++) {tempBar+=barText.charAt(b)+"<BR>"}}
txtes += '<td align="center" rowspan="100" width="'+barWidth+'" bgcolor="'+barBGColor+'" valign="'+barVAlign+'"><p align="center"><font face="'+barFontFamily+'" Size="'+barFontSize+'" COLOR="'+barFontColor+'"><B>'+tempBar+'</B></font></p></TD>';
barBuilt=1;
}
txtes += '</TR>';
}
document.write(txtes);
document.write('</table>');
if (NS6){document.write('</TD></TR></TABLE>')}
if (IE||NS6) {document.write('</DIV></DIV>')}
if (NS) {document.write('</LAYER></ILAYER></LAYER>')}
theleft=-menuWidth;
lastY=0;
setTimeout('initSlide();', 10);
setTimeout('updateMenu();', 150);
}
function updateMenu() {
txtes=""; barBuilt=0;
for(i=0;i<ssmItems.length;i++) {
txtes += '<TR>';
if(!ssmItems[i][1] && !ssmItems[i][3]){
txtes += '<td bgcolor="'+hdrBGColor+'" HEIGHT="'+hdrHeight+'px" ALIGN="'+hdrAlign+'" VALIGN="'+hdrVAlign+'"> <font face="'+hdrFontFamily+'" Size="'+hdrFontSize+'" COLOR="'+hdrFontColor+'"><b>'+ssmItems[i][0]+'</b></font></td>';
}
else {
if(ssmItems[i][3]) {
tmpCible = "secuZoneDiv"; tmpLien = "?onglet="+pageSel+"&pageSecu="+ssmItems[i][0];
} else {
tmpLien = ssmItems[i][1]; tmpCible = (!ssmItems[i][2]) ? linkTarget+""+pageSel : ssmItems[i][2];
}
txtes += '<TD BGCOLOR="'+linkBGColor+'" onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'" ALIGN="'+linkAlign+'"><FONT face="'+linkFontFamily+'" Size="'+linkFontSize+'" onclick="changeCom('+i+')"> <A HREF="'+tmpLien+'" target="'+tmpCible+'" CLASS="ssmItems">'+ssmItems[i][0]+'</a></TD>';
}
if(barBuilt==0) {
tempBar="";
if(barText.indexOf('<IMG')>-1) {tempBar=barText}
else{for (b=0;b<barText.length;b++) {tempBar+=barText.charAt(b)+"<BR>"}}
txtes += '<td align="center" rowspan="100" width="'+barWidth+'" bgcolor="'+barBGColor+'" valign="'+barVAlign+'"><p align="center"><font face="'+barFontFamily+'" Size="'+barFontSize+'" COLOR="'+barFontColor+'"><B>'+tempBar+'</B></font></p></TD>';
barBuilt=1;
}
txtes += '</TR>';
}
// document.getElementById("MenuTabAff").innerHTML = txtes;
top = YOffset+18*ssmItems.length*((ongletHorizontal!="yes")?1:0); max=115;
tops = (top<max)?max:top;
finalL = 20*((ongletHorizontal=="yes")?1:0);
// alert(tops+' '+finalL)
if (document.layers) {
document.layers["MenuTabAff"].document.write(txtes);
document.layers["MenuTabAff"].document.close();
document.layers["master"].top=tops;
document.layers["master"].left = finalL;
}
if (document.all) {
MenuTabAff.innerHTML=txtes;
document.all["master"].style.top=tops;
document.all["master"].style.left = finalL;
}
else if (document.getElementById) {
document.getElementById("MenuTabAff").innerHTML=txtes;
document.getElementById("master").style.top=tops;
document.getElementById("master").style.left = finalL;
}
}
function makeOnglet() {
txt="";
document.write("<div id='master'><table><tr>");
document.write("<td align=middle valign=middle><img src='Classe/Img/generic.gif' width=18 onmouseover=\"AffBulle('Actualiser l&#39;onglet');\" onmouseout='HideBulle();' onclick='actupg()'><td>");
if(ongletHorizontal!="yes") { document.write("</tr><tr>"); }
for(i=0; i<NbOnglets; i++) {
tabMemo[i]="a";
document.write("<td align=middle id='"+linkTarget+"R"+i+"' onclick='selectPg("+i+")' class='"+((i)?'def':'sel')+"' onmouseover=\"affCom("+i+");\" onmouseout='HideBulle();'>P"+((ongletHorizontal=="yes")?"age_":"<br>g<br> <br>")+""+(i+1)+"</td>");
if(ongletHorizontal!="yes") { document.write("</tr><tr>"); }
txt+="<iframe id='"+linkTarget+i+"' name='"+linkTarget+i+"' src='' width='100%' height='100%'></iframe>";
}
document.write("</table></div>");
document.write("<div id='masterVisu'>"+txt+"</div>");
for(i=NbOnglets-1; i>0; i--) { document.getElementById(linkTarget+i).style.visibility="hidden"; }
extLien("?defo=true", linkTarget+0);
}
function actupg(koi) {
tmpLien = parent.frames[linkTarget+pageSel].location.href;
// prompt('actu page '+pageSel, tmpLien);
parent.frames[linkTarget+pageSel].location.href = tmpLien;
}
function changeCom(koi) { tabMemo[pageSel] = ssmItems[koi][0]; }
function affCom(ou) { txt=(tabMemo[ou]=="a")? "Vide":tabMemo[ou]; AffBulle(txt); }
function selectPg(ou) {
document.getElementById(linkTarget+"R"+pageSel).className="def";document.getElementById(linkTarget+pageSel).style.visibility="hidden";
document.getElementById(linkTarget+"R"+ou).className ="sel"; document.getElementById(linkTarget+ou).style.visibility ="visible";
pageSel=ou;
updateMenu();
}
function extLien(lienTmp, frameTmp) {
if(frameTmp.length==0) { frameTmp = linkTarget+pageSel; }
window.open(lienTmp, frameTmp);
}
// Aff bulle
var IB=new Object; var posBulleX=0;posBulleY=0; var xOffsetBulle=10;yOffsetBulle=10;
function AffBulle(texte) { if(texte.length!=0) {
decal=new Array(150,200);
contenu="<TABLE border=0 cellspacing=0 cellpadding="+IB.NbPixel+"><TR bgcolor='"+IB.ColContour+"'><TD><TABLE border=0 cellpadding=2 cellspacing=0 bgcolor='"+IB.ColFond+"' valign=middle align=middle><TR><TD><FONT size='-1' face='arial' color='"+IB.ColTexte+"'>"+texte+"</FONT></TD></TR></TABLE></TD></TR></TABLE> ";
var finalposBulleX=posBulleX-xOffsetBulle+50;
if (finalposBulleX<0) finalposBulleX=0;
if (document.layers) {
document.layers["bulle"].document.write(contenu);
document.layers["bulle"].document.close();
document.layers["bulle"].top=posBulleY+yOffsetBulle;
document.layers["bulle"].left=finalposBulleX;
document.layers["bulle"].visibility="show";
}
if (document.all) {
bulle.innerHTML=contenu;
document.all["bulle"].style.top=posBulleY+yOffsetBulle;
document.all["bulle"].style.left=finalposBulleX;//f.x-xOffsetBulle;
document.all["bulle"].style.visibility="visible";
}
else if (document.getElementById) {
document.getElementById("bulle").innerHTML=contenu;
document.getElementById("bulle").style.top=posBulleY+yOffsetBulle;
document.getElementById("bulle").style.left=finalposBulleX;
document.getElementById("bulle").style.visibility="visible";
}
}}
function getMousePos(e) {
if (document.all) { posBulleX=event.x+document.body.scrollLeft; posBulleY=event.y+document.body.scrollTop; }
else { posBulleX=e.pageX; posBulleY=e.pageY; }
}
function HideBulle() {
if (document.layers) {document.layers["bulle"].visibility="hide";}
if (document.all) {document.all["bulle"].style.visibility="hidden";}
else if (document.getElementById){document.getElementById("bulle").style.visibility="hidden";}
}
function InitBulle(ColTexte,ColFond,ColContour,NbPixel) {
IB.ColTexte=ColTexte;IB.ColFond=ColFond;IB.ColContour=ColContour;IB.NbPixel=NbPixel;
if (document.layers) {
window.captureEvents(Event.MOUSEMOVE);window.onMouseMove=getMousePos;
document.write("<LAYER name='bulle' top=0 left=0 visibility='hide'></LAYER>");
}
if (document.all) {
document.write("<DIV id='bulle' style='position:absolute;top:0;left:0;visibility:hidden'></DIV>");
document.onmousemove=getMousePos;
}
else if (document.getElementById) {
document.onmousemove=getMousePos;
document.write("<DIV id='bulle' style='position:absolute;top:0;left:0;visibility:hidden'></DIV>");
}
}
// InitBulle("navy","#FFCC66","orange",1);
// InitBulle(couleur de texte, couleur de fond, couleur de contour taille contour)
function actuMenu(txt) {
sortie = new Array(); val=2;
sortie[sortie.length]=['Administration', '?page=admin'];
tmpe=txt.split(":|:");
for (var i=0; i<tmpe.length; i++) {
tmp=tmpe[i].split("|");
switch(tmp.length) {
case 4:
if(val==2) { sortie[sortie.length]=['Pages privées']; val=1; }
sortie[sortie.length]=tmp;
break;
case 2:
if(val) { sortie[sortie.length]=['Pages publiques']; val=0; }
sortie[sortie.length]=tmp;
break;
}
}
ssmItems=sortie; updateMenu();
}
function style() {
if(01) {
arrond = (ongletHorizontal=="yes")? "10px 10px 0 0; width:90px" : "10px 0 0 10px";
espace = (ongletHorizontal!="yes")? "0px 5px; width:20px" : "5px 0px";
document.write("<style>");
document.write("#master { position:absolute; top:0px; left:0px; }");
document.write("#masterVisu { position:absolute; top:"+(22*((ongletHorizontal=="yes")?1:0))+"px; left:"+(21*((ongletHorizontal!="yes")?1:0))+"px; bottom:4px; right:4px;}");
document.write("#masterVisu iframe { position:absolute; top:0px; left:0px; bottom:4px; right:4px;}");
document.write("#master table { border : ridge 0px black; border-collapse: separate; border-spacing:"+espace+"; }");
document.write("#master table td.def { background-color:none; border : ridge 2px black; -moz-border-radius : "+arrond+"; }");
document.write("#master table td.sel { background-color:white; border : ridge 2px black; -moz-border-radius : "+arrond+"; }");
document.write("#MenuTabAff a { color:black; text-decoration:none; }");
document.write("</style>");
}
}
Tipouic