입체감 있는 라이트 메뉴
관리자 05-01-22 04:55
 active.html (3.7K), DOWN:16
<html>
<head>
<title>입체감있는 라이트 메뉴</title>
<style type="text/css">
.mnuTD{font-family:lucida console;font-size:10pt;filter:blendTrans(duration=1) Light();text-align:center;color:white;
border-top:buttonhighlight 3 solid;border-left:buttonhighlight 3 solid;border-right:buttonshadow 3 solid;border-bottom:buttonshadow 3 solid;
cursor:hand;font-weight:bolder;}
</style>
<script>
///////////////////////////////////////////////////////////////////////
// author : Kim D.H
// http://my.dreamwiz.com/jsreference
///////////////////////////////////////////////////////////////////////////////
//--------사용자 설정부분 시작 -----------------------------
var color1=new Array("#CC99FF","#CC9999","#FFCC66","#66CCCC","#66FF99"); //연한색 마우스올리기전

var light1R=new Array(204,204,255,102,102);
var light1G=new Array(153,153,204,204,255);
var light1B=new Array(255,153,102,204,153);

var color2=new Array("#CC33FF","#CC6666","#FF9933","#6699CC","#66CC99"); //진한색 마우스 올림

var light2R=new Array(204,204,255,102,102);
var light2G=new Array(51,102,153,153,204);
var light2B=new Array(255,102,51,204,153);

var menu=new Array("Company","Product","Data","Source","Board"); // 메뉴텍스트
var menuLink=new Array("http://www.yahoo.co.kr","http://www.daum.net","http://www.netian.com","http://www.ggame.net","http://www.naver.com"); //메뉴링크
var linkTarget="toIframe"; //링크타겟(아이프레임으로걸때 toIframe,새창으로 띄울때 toWindow,프레임으로 걸때 toFrame),

var menuWidth=80; //메뉴폭
var menuHeight=50; //메뉴높이
//--------사용자 설정부분 끝 -------------------------------




var containerWidth=parseInt(menuWidth) * parseInt(menu.length);

window.onload=fnInit;
function fnInit(){
  for(i=0;i<menu.length;i++){
  oDiv.rows(0).cells(i).filters.light.addCone(2,2,15,80,50,light2R[i],light2G[i],light2B[i],10,120);
  }
}


function trans1(idx){
with(event.srcElement){
filters(0).apply();
//filters.light.changeColor(0,light1R[idx],light1G[idx],light1B[idx],true);
filters.light.changeStrength(0,30,true);
//style.background=color2[idx];
style.color='black';
style.borderTop="#333333 3 solid";
style.borderLeft="#333333 3 solid";
style.borderBottom=color2[idx] +" 3 solid";
style.borderRight=color2[idx] +" 3 solid";
filters(0).play();
}
}
function trans2(idx){
with(event.srcElement){
filters(0).apply();
//filters.light.changeColor(0,light2R[idx],light2G[idx],light2B[idx],true);
filters.light.changeStrength(0,10,true);
//style.background=color1[idx];
style.color='white';
style.borderTop="buttonhighlight 3 solid";
style.borderLeft="buttonhighlight 3 solid";
style.borderBottom="buttonshadow 3 solid";
style.borderRight="buttonshadow 3 solid";
filters(0).play();
}
}
function goLink(idx){
if(linkTarget=="toIframe"){
ifr.location.href=menuLink[idx];
}
if(linkTarget=="toWindow"){
window.open(menuLink[idx],"mywin","");
}
if(linkTarget=="toFrame"){
parent.frameName.location.href=menuLink[idx];
}

}

</script>
</head>

<body bgcolor="#FFFFFF" text="#000000" style="font-family:lucida console;font-size:9pt;">
<script>
//--- 메뉴 바디 스크립트 시작
document.write("<table id='oDiv' width='"+ containerWidth +"' border='0' cellspacing='0' cellpadding='0' style='border:black 1 solid'>");
document.write("<tr>");
for(i=0;i<menu.length;i++){
  document.write("<td  onclick='goLink("+ i +")'  class='mnuTD' height="+ menuHeight +" width="+ menuWidth +" bgcolor='"+ color1[i] +"' onmouseover='trans1("+ i +")' onmouseout='trans2("+ i +")'>"+  menu[i] +"</td>");
}
document.write("</tr>");
document.write("</table>");
//--- 메뉴 바디 스크립트 끝
</script>
<br>
<iframe name="ifr" src="about:blank" width=500 height=300>
</iframe>


</body>
</html>