웹마스터 팁

  2. Support
  3. 웹마스터 팁

레이어 3 - 메뉴판때기.

2004.07.04 14:26

미친개



레이어 세번째 얘긴 클립을 이용한 메뉴판때기입니다.
좌우로 긴 레이어에 네개의 테이블을 만들어 각각의 테이블에
아이프렘을 넣고 페이지를 불러옵니다.
그리고 이 레이어에 작은 구멍을 클립 속성으로 만들어주죠.

좌우로 긴 레이어를 왔다리 갔다리 하면서 원하는 페이지를
보여주는 메뉴판때기입니다.


레이어가 이동중에 다시 같은 방향을 클릭하면 속도가 두배가
됩니다. 이걸 방지하기 위해 일종의 flag 변수인 sliding 변수를
정의해줍니다.
소스는 그다지 어렵지 않습니다.

미리 보기 : http://allzza.net/xxx/aboard.php?id=pds&dbf=12&mode=source





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>레이어 이동 - 1 </title>

<SCRIPT LANGUAGE="JavaScript">
<!--


/**************************************
제작 : 미친개
수정과 사용, 재배포에서 자유롭습니다.
학습용으로 쓰시길 권합니다.
**************************************/



sliding = false;
function slide(posi) {
    key = posi;
    if(parseInt(document.all.maddog1.style.left) >(-1)*key) slideleft();
    else slideright();
    }

function slideleft()  {
  sliding = true;
  i = parseInt(document.all.maddog1.style.left);
        if (i > key*(-1)){
                i -= 10;
                document.all.maddog1.style.left = i;
                setTimeout("slideleft()",1);
        }
else sliding = false;
}

function slideright()  {
  sliding = true;
  i = parseInt(document.all.maddog1.style.left);
        if (i < key*(-1)){
                i += 10;
                document.all.maddog1.style.left = i;
                setTimeout("slideright()",1);
        }
else sliding = false;
}


//-->
</SCRIPT>
</head>

<BODY bgcolor=#9c9c9c scroll=no>



<div id='mylayer' style='position:absolute; left:110px; top:100px; width:614; hgight=410; clip:rect(0,616,420,0);layer-background-color:#000000';>
<DIV ID="maddog1" STYLE="position:absolute; left:0px; top:0px; width:3060px; height:420px;background-color:#000000;">


<DIV ID="home" STYLE="position:absolute; left:5px; top:5px; width:600px; height:400px;">
<table border=0>
<tr>
<td align=center bgcolor=#0000ff width=610 height=405>
<iframe src=http://nzeo.com width=600 height=400 scrolling=auto></iframe>
</td>
</tr></table>
</div>


<DIV ID="pds" STYLE="position:absolute; left:615px; top:5px; width:600px; height:400px;">
<table>
<tr>
<td bgcolor=#ff00ff width=600 height=400>
<iframe src=http://allzza.net width=600 height=400 scrolling=auto></iframe>
</td>
</tr></table>
</div>



<DIV ID="mds" STYLE="position:absolute; left:1225px; top:5px; width:600px; height:400px;">
<table border=0>
<tr>
<td bgcolor=#00ffff width=600 height=400>
<iframe src=http://tagmania.net width=600 height=400 scrolling=auto></iframe>
</td>
</tr></table>
</div>



<DIV ID="js" STYLE="position:absolute; left:1835px; top:5px; width:600px; height:400px;">
<table border=0>
<tr>
<td>
<iframe src=http://naver.com width=600 height=400 scrolling=auto></iframe>
</td>
</tr></table>
</div>


<DIV ID="board" STYLE="position:absolute; left:2445px; top:5px; width:600px; height:400px;">
<table border=0>
<tr>
<td>
<iframe src=http://kr.yahoo.com width=600 height=400 scrolling=auto></iframe>
</td></tr>
</table>
</DIV>

</div>
</div>


<div style='position:absolute;left:780;top:100;width:70;height:420;visibility:visible;'>
<table border=2 width=100% height=100% bordercolor=000000>
<tr><td>
<A HREF="javascript:if(!sliding) slide(0)">엔지오</A>
</td></tr>
<tr><td>
<A HREF="javascript:if(!sliding) slide(610)">알짜넷</A>
</td></tr>
<tr><td>
<A HREF="javascript:if(!sliding) slide(1220)">태그매니아</A>
</td></tr>
<tr><td>
<A HREF="javascript:if(!sliding) slide(1830)">네이버</A>
</td></tr>
<tr><td>
<A HREF="javascript:if(!sliding) slide(2440)">야후코리아</A>
</td></tr>
</table>
</div>




</body>
</html>
이 게시물을
수정 삭제
좋아요
목록
제목 글쓴이 날짜
[초보] 확장자 체크하는 매우 간단한 소스; [4] 에지 2003.09.29
인터넷 사이트 , MS 오피스로 관리하기 3 공시사항 나타내기 [5] file 한꼬마 2003.09.24
Whois를 이용해서 접속자가 사용하는 ISP출력(한국통신,하나로,두루넷 등등) [6] 김재경 2003.09.23
달력 만들기 [10] TheMics 2003.09.23
php+mysql>>공지사항|일기장 프로그램 1장:DB구조,schema 파일로 테이블생성하기! [2] 시루바 2003.09.23
인터넷 사이트, MS 오피스로 관리하기 2 공지사항 [4] file 한꼬마 2003.09.23
인터넷 사이트 , MS 오피스로 관리하기 [3] file 한꼬마 2003.09.22
임시적으로 php.ini 환경변수들 대처하기 [2] impre 2003.09.20
동적으로 Extensions(library) 로딩하기 impre 2003.09.20
include 할시에 주의사항..(경로설정관련) [10] 피너츠 2003.09.14
지정한만큼 암호화/해독 하기 [24] 뒹굴리스트 2003.09.10
모든파일을 리스트로 만들기; [10] 플로렐라 2003.09.10
군대간 친구 남은날짜 구하기 2(복무기간 단축에 따른 수정) [8] 신민경 2003.09.02
자료실에 쓸만한 자료용량 환산 [7] 한승진 2003.09.01
php 랜덤 이미지 디렉토리 검색으로 편하게.. [3] 꺼노 2003.08.28
웹디자이너와 프로그래머가 사이 좋게 코딩하는 방법 [50] 마이템플릿 2003.08.13
개판 오분전 정규식(1) 미친개 2003.08.07
개판 오분전 정규식(2) [5] 미친개 2003.08.07
개판 오분전 정규식(3) [2] 미친개 2003.08.07
개판 오분전 정규식(4) 미친개 2003.08.07
태그 쓰기