JavaScript下拉式功能表(1)

// JavaScript Document
//--------------- 主導航條內容 ------------//
var mainLayer = new Array("Home","About US","Our Service","News","Online Service","Online Quote","Customer","Link Info","Contact US","Employee");
var mainLayerImg = new Array(
               new Array("<img src=\"images/button_black_01.gif\" name=\"Image3\" border=\"0\">"),
               new Array("<img src=\"images/button_black_02.gif\" name=\"Image4\" border=\"0\">"),
               new Array("<img src=\"images/button_black_03.gif\" name=\"Image5\" border=\"0\">"),
               new Array("<img src=\"images/button_black_04.gif\" name=\"Image6\" border=\"0\">"),
               new Array("<img src=\"images/button_black_05.gif\" name=\"Image7\" border=\"0\">"),
               new Array("<img src=\"images/Online Quote.GIF\" name=\"Image12\" border=\"0\">"),
               new Array("<img src=\"images/button_black_06.gif\" name=\"Image8\" border=\"0\">"),
               new Array("<img src=\"images/button_black_07.gif\" name=\"Image9\" border=\"0\">"),
               new Array("<img src=\"images/button_black_08.gif\" name=\"Image10\" border=\"0\">"),
               new Array("<img src=\"images/Employee.GIF\" name=\"Image11\" border=\"0\">")
               );
var mainLayerHttp = new Array("index.jsp","about.jsp","#","news.jsp","http://220.228.203.222:8099/VMI/index.jsp","#","#","#","cu.jsp","#");
var mainLayerTarget = new Array("","","","","_blank","","","","","");
var mainLayerOnMouseOver = new Array(
                   new Array("MM_swapImage('Image3','','images/button_blue_01.gif',1)"),
                   new Array("MM_swapImage('Image4','','images/button_blue_02.gif',1)"),
                   new Array("MM_swapImage('Image5','','images/button_blue_03.gif',1)"),
                   new Array("MM_swapImage('Image6','','images/button_blue_04.gif',1)"),
                   new Array("MM_swapImage('Image7','','images/button_blue_05.gif',1)"),
                   new Array("MM_swapImage('Image12','','images/Online Quote-blue.GIF',1)"),
                   new Array("MM_swapImage('Image8','','images/button_blue_06.gif',1)"),
                   new Array("MM_swapImage('Image9','','images/button_blue_07.gif',1)"),
                   new Array("MM_swapImage('Image10','','images/button_blue_08.gif',1)"),
                   new Array("MM_swapImage('Image11','','images/Employee-blue.GIF',1)")
                   );
var mainTableTdWidth = new Array(64,93,115,70,126,122,102,63,102,102);

//--------------- 次導航條內容 ------------//
var subLayer0 = new Array();
var subLayerHttp0 = new Array();
var subLayerTarget0 = new Array();
var subLayer1 = new Array();
var subLayerHttp1 = new Array();
var subLayerTarget1 = new Array();
var subLayer2 = new Array("Air Export","Air Import","Sea Freight","Domestic","Logistics","Hub");
var subLayerHttp2 = new Array(
               new Array("sos.jsp?part=AirExport"),
               new Array("sos.jsp?part=AirImport"),
               new Array("sos.jsp?part=SeaFreight"),
               new Array("sos.jsp?part=Domestic"),
               new Array("sos.jsp?part=Logistics"),
               new Array("sos.jsp?part=Hub")
               );
var subLayerTarget2 = new Array();
var subLayer3 = new Array();
var subLayerHttp3 = new Array();
var subLayerTarget3 = new Array();
var subLayer4 = new Array();
var subLayerHttp4 = new Array();
var subLayerTarget4 = new Array();
var subLayer5 = new Array();
var subLayerHttp5 = new Array();
var subLayerTarget5 = new Array();
var subLayer6 = new Array("VMI","Tracking");
var subLayerHttp6 = new Array("http://220.228.203.222:8099/VMI/Login.htm","http://www.lsphub.com/symaton_top/tracking.jsp");
var subLayerTarget6 = new Array("_blank","_blank");
var subLayer7 = new Array();
var subLayerHttp7 = new Array();
var subLayerTarget7 = new Array();
var subLayer8 = new Array("Taipei","Taichung","Tainan","Kaohsiung","HongKong","Fuzhou","Xiamen","Guangzhou","Shanghai","Quanzhou","Toronto");
var subLayerHttp8 = new Array();
for (var i = 0;i <subLayer8.length;i++){
 subLayerHttp8[i] = "cu.jsp?part=" + encodeURIComponent(subLayer8[i]);
}
var subLayerTarget8 = new Array();
var subLayer9 = new Array("Opinion","Bulletin");
var subLayerHttp9 = new Array("#","#");
var subLayerTarget9 = new Array();
//--------------- 主導航條Table參數調整 ------------//
//var mainTableTdWidth=100; //每個TD的寬度，調整主導航內容間距
var mainTableBorder=0; //調整主導航表格邊框寬度
var mainTableCellspacing=0; //調整主導航表格Cellspacing
var mainTableCellpadding=0; //調整主導航表格Cellpadding
var mainTableBgcolor="#000000"; //調整主導航表格背景色
var mainTableBordercolor=""; //調整主導航表格編框顏色
var mainTableBackgroundImg=""; //調整主導航表格背景圖片url地址
var mainTableHrefClassName="link" //調整url風格樣式
var mainTableTdBgcolor="#999999"; //調整主導航表格Td色

//--------------- 次導航條Table參數調整 ------------//
var subTableBorder=0; //調整次導航條表格邊框寬度
var subTableCellspacing=0; //調整次導航條表格Cellspacing
var subTableCellpadding=1; //調整次導航條表格Cellpadding
var subTableBgcolor="#000000"; //調整次導航條表格背景色
var subTableBordercolor=""; //次導航條表格編框顏色
var subTableBackgroundImg=""; //次導航條表格背景圖片url地址
var subTableTdBgcolor="#CCCCCC"; //調整次導航表格Td色
var subTableTop=30; //次導航表格上下微調
var subTableLeft=-1; //次導航表格左右微調
var subTableHrefClassName = "L-gray-12-03";

//--------------- 系統參數*請勿調整 ------------//
var layerMax=mainLayer.length+10;
var layerName="index";

//--------------- 產生下拉式功能表 ------------//
function createMainLayer(){
 document.write("<table border=0 cellspacing=0 cellpadding=0><tr><td><div id='wall' onmouseout=layervib('visible','"+layerMax+"') style='position:relative; left:0px; top:0px; width:100%; z-index:1' ><table width="+mainLayer.length*mainTableTdWidth+" border='"+mainTableBorder+"' cellspacing='"+mainTableCellpadding+"' cellpadding='"+mainTableCellpadding+"' bgcolor='"+mainTableBgcolor+"' bordercolor='"+mainTableBordercolor+"' background='"+mainTableBackgroundImg+"'><tr>");
 for(i=0;i<mainLayer.length;i++){
  document.write("<td nowrap width='"+mainTableTdWidth[i]+"' bgcolor='"+mainTableTdBgcolor+"' class='"+mainTableHrefClassName+"' onmouseover=layervib('visible','"+i+"')><a href='"+mainLayerHttp[i]+"' target='"+mainLayerTarget[i]+"' onMouseOut=\"MM_swapImgRestore()\" onMouseOver=\""+mainLayerOnMouseOver[i]+"\" title=\""+mainLayer[i]+"\">"+mainLayerImg[i]+"</a></td>");
 }
 document.write("</tr></table>");

 for(j=0;j<mainLayer.length;j++){
  createSubLayer(j);
 }
 document.write("</div></td></tr></table>");
}

//--------------- 產生每項下拉式功能表內容 ------------//
function createSubLayer(num){
 var subLayerName= layerName +num;
 var subLayerLeftTotal = 0;
 for (var j = 0;j < num;j++){
  subLayerLeftTotal += mainTableTdWidth[j];
 }
 var subLayerLeft=subLayerLeftTotal+mainTableCellpadding+mainTableBorder;
 var subLayerList=eval("subLayer"+num);
 var subLayerHttpList=eval("subLayerHttp"+num);
 var subLayerTargetList=eval("subLayerTarget"+num);
 var target;
 document.write("<div id='"+subLayerName+"' style='position:absolute; left:"+(subLayerLeft+subTableLeft)+"px; top:"+((mainTableBorder+mainTableCellspacing+mainTableCellpadding)*2+subTableTop)+"px; z-index:2; height: 24px; visibility: hidden' onmouseover=layervib('visible','"+num+"') onmouseout=layervib('visible','"+layerMax+"')>");
 if(subLayerList.length!=0){
  document.write("<table width='"+mainTableTdWidth[num]+"' border='"+subTableBorder+"' cellspacing='"+subTableCellpadding+"' cellpadding='"+subTableCellpadding+"' bgcolor='"+subTableBgcolor+"' bordercolor='"+subTableBordercolor+"' background='"+subTableBackgroundImg+"'")
  for(h=0;h<subLayerList.length;h++){
   target = subLayerTargetList[h];
   target = target==null?"_self":target;
   document.write("<tr><td bgColor='"+subTableTdBgcolor+"' width='100%' class='link' align='left' onMouseOver='this.bgColor=\"#3399FF\"' onMouseOut='this.bgColor=\""+subTableTdBgcolor+"\"'>&nbsp;<a href='"+ subLayerHttpList[h]+"' class='"+subTableHrefClassName+"' target='"+target+"'>"+subLayerList[h]+"</a>&nbsp;</td></tr>");
  }
  document.write("</table>");
 }
 document.write("</div>");
}

//------------------------------次菜單顯隱控制--------------------------//
function layervib(type,num){
 var H=type;
 var temp=(H='visible'?'hidden':'visible')
 for(var i=0;i<mainLayer.length;i++){
  var E=eval('document.all.index'+i+'.style');
  var H=eval(i);
  if(i==num){
   E.visibility=type
  }
  else{
   E.visibility=temp
  };
 }
}