http://www.da21.net이번에 새로 입사한 회사(뭐 회사라 해봐야 아는 형들하고 ㅎㅎ;) 홈페이지를 시안중에 있습니다.

미리보기는 http://www.da21.net 여기 가시면 되구요..
말로 설명하기 어려우니 한번 봐주세요. ㅜㅜ

밑으로 소스 나갑니다.

<script language="JavaScript" type="text/javascript">
<!--
var IconPos = 100;         // 처음 페이지 로딩시 메뉴 밑의 슬라이딩 아이콘의 위치정의
var ReImage = 85;        //        "             "            "            넓이정의
//-->
</script>



<script language='javascript' type='text/javascript'>

<!--

function MM_preloadImages() { //v3.0        // 이미지를 모두 로딩후 페이지 표시
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function Fade(_id,_visibility) {             // blendtrans효과를 위한 함수
document.all[_id].style.filter="blendTrans(duration=1)";
if(document.all[_id].filters.blendTrans.status != 1){
  document.all[_id].filters.blendTrans.apply();
  document.all[_id].style.visibility=_visibility;
  document.all[_id].filters.blendTrans.play();
}
}


// 메뉴아이콘의 슬라이딩
var isRun = 0;
var Loop3 = null;
var MovingSpe = null;
var Speed1 = 4             /// 속도 입니다. 낮은 숫자일수록 빨리 움직입니다.
function MovingIcon(value){
isRun = 1;
if(Loop3)clearTimeout(Loop3);
var _id = "menu_mouse";
var Tmpvalue = value;
var Tmpvalue2 = value;
if(document.all[_id].style.pixelLeft <= Tmpvalue){
  MovingSpd = Math.round((Tmpvalue-document.all[_id].style.pixelLeft)/Speed1);
        if(MovingSpd == 0){
         if(document.all[_id].style.pixelLeft < Tmpvalue){
          MovingSpd = 1;
         }
        }
  document.all[_id].style.pixelLeft += MovingSpd;
        Loop3 = setTimeout("MovingIcon("+Tmpvalue+")",1);
}else if(document.all[_id].style.pixelLeft >= Tmpvalue2){
  MovingSpd = Math.round((document.all[_id].style.pixelLeft-Tmpvalue2)/Speed1);
        if(MovingSpd == 0){
         if(document.all[_id].style.pixelLeft > Tmpvalue2){
          MovingSpd = 1;
         }
        }
  document.all[_id].style.pixelLeft -= MovingSpd;
        Loop3 = setTimeout("MovingIcon("+Tmpvalue2+")",1);
}else clearTimeout(Loop3);
}


// Menu button의 등장
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
var ArrDivs = new Array("menu_1","menu_2","menu_3","menu_4","menu_5","menu_6");     //---- 메뉴의 갯수에 따라 배열값을 늘려주세요 ("menu_1",......"menu_10");
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
var ArrCounts = 0;
var tmp = null;
function ShowDiv2(){
clearTimeout(Loop);
//if(ArrCounts==ArrDivs.length){if(isRun==0){MovingIcon(IconPos);ResizeImage(ReImage);}}
if(ArrCounts<ArrDivs.length){
Fade(ArrDivs[ArrCounts],'visible');
ArrCounts++;
tmp = setTimeout("ShowDiv2()",150);
}else{if(tmp)clearTimeout(tmp);
if(isRun==0){
setTimeout("MovingIcon("+IconPos+")",1200);
setTimeout("ResizeImage("+ReImage+")",1200);
}
}
}

// Image 리사이즈
var Loop4 = null;

function ResizeImage(Size){
clearTimeout(Loop4);
var Resize = 2;
if(document.MenuIconImage.width>Size){
  if(document.MenuIconImage.width-Size<2) Resize = 1;
        else Resize = 2;
  document.MenuIconImage.width -= Resize;
  document.MenuIconImage.height = 4;
  Loop4 = setTimeout("ResizeImage("+Size+")",1);
}else if(document.MenuIconImage.width<Size){
  if(Size-document.MenuIconImage.width<2) Resize = 1;
        else Resize = 2;
  document.MenuIconImage.width += Resize;
  document.MenuIconImage.height = 4;
  Loop4 = setTimeout("ResizeImage("+Size+")",1);
}else clearTimeout(Loop4);
}

var Loop = setTimeout("ShowDiv2()",500);

-->
</script>


<!--
   상자에서의 설정은 이렇습니다.
    img 태그에 name이라는 속성이 있습니다. 화면에 표시된 순서대로 왼쪽부터 menu_1 menu_2.....menu_10 이렇식으로 td 추가시 써주셔야하구요
    img 태그에 onMouseOver 이벤트가 들어있습니다. 이곳에들어가는 함수호출명령도 수정하셔야 할겁니다.
    MovingIcon(이곳에 아이콘이 가야할 위치를 정해줍니다. 좌표값이죠.);ResizeImage(이곳에 아이콘의 넓이를 정해줍니다.)
    이두가지 호출명령에 적절한값을 넣어서 사용하시면 됩니다.
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*******************************************************
기본적으로 메뉴는 다음과같이 나열되있습니다.
<td>여기서~ 이것하나가 메뉴의 버튼 한개를 나타냅니다. ~여기까지<td>
아래처럼 복사하셔서 메뉴를 늘리실것이라면 아래의 태그를 밑에 더 써넣어주시구요
<img 태그 안에는 onMouseOver와 name을 수정하시면 됩니다.
onMouseOver는
- MovingIcon(이곳에 슬라이딩바가 가야할 위치를 정해줍니다. 좌표값이죠.);ResizeImage(이곳에 슬라이딩바의 넓이를 정해줍니다.)
   위처럼 수정하시면 되구요
name은
- menu_1 menu_2.....menu_10 순서대로 넣어주시면 됨니다.
**********************************************************
<td width='46'><a href='#'><img src='image/menu_5.gif' alt='' onMouseOver="MovingIcon(638);ResizeImage(36)" name='menu_5' style='position:abolute;visibility:hidden' border='0'></a></td>
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-->
<!-- 메뉴 상자 -->
<div id='menu_obj'>
<table border='0' style='border:0px solid #272727;border-bottom-color:#313131' cellpadding='0' cellspacing='0'>
        <tr>
                <td width='100'></td>
                <td><a href='#'><img src='image/menu_company.gif' alt='' onMouseOver="MovingIcon(100)" name='menu_1' style='position:abolute;visibility:hidden' border='0'></a></td>
                <td><a href='#'+ '+ '><img src='image/menu_domain.gif' alt='' onMouseOver="MovingIcon(185)" name='menu_2' style='position:abolute;visibility:hidden' border='0'></a></td>
                <td><a href='#'><img src='image/menu_webhosting.gif' alt='' onMouseOver="MovingIcon(270)" name='menu_3' style='position:abolute;visibility:hidden' border='0'></a></td>
                <td><a href='#'><img src='image/menu_homepage.gif' alt='' onMouseOver="MovingIcon(355)" name='menu_4' style='position:abolute;visibility:hidden' border='0'></a></td>
                <td><a href='#'><img src='image/menu_portfolio.gif' alt=''+ ' onMouseOver="MovingIcon(440)" name='menu_5' style='position:abolute;visibility:hidden' border='0'></a></td>
                <td><a href='#'><img src='image/menu_webbbs.gif' alt='' onMouseOver="MovingIcon(522)" name='menu_6' style='position:abolute;visibility:hidden' border='0'></a></td>
        </tr>
</table>

</div>
<div id='menu_mouse' style='position:relative;left:100;top:-15'><img src='image/box.gif' style='border:0px solid #272727;border-top:0px;border-bottom:0px' alt='' name='MenuIconImage' border='0'></div>



--- 소스 끝 ---


중요한건 각 메뉴마다 링크가 걸려야 하는데 움직이는 박스가 이미지 이다 보니 메뉴 위로 박스가 씌어서 클릭이 안된다는 겁니다. 이것도 설명이 어렵네요 ㅜㅜ

미리보기 페이지에서 각 버튼마다 링크가 걸려있는데 움직이는 박스 이미지(투명이미지라 보이는 겁니다) 에 덮어져서 클릭이 안된다는 겁니다.

ㅜㅜ 이거 어떻게 해결할 방법 없을까요?

참.. 그리고 처음에 화면이 뜨면 메뉴에 마우스를 가져갔을때 박스가 한번 왔다리 갔다리 하는데
이것도 수정좀 부탁드립니다.