웹마스터 팁

  2. Support
  3. 웹마스터 팁

특정위치에 떠있는 레이어 (슬라이딩 애드콘) - 노프레임홈에서의 문제해결

2004.05.03 05:12

검미르

특정위치에 떠있는 레이어 (슬라이딩 애드콘)

특정위치에 떠있는 메뉴나 아웃로그인 처럼 스크롤 하더라도 해당위치에 계속 떠있게 하는 소스입니다.

이 게시판에 이와 관련된 소스가 여럿 있었지만

제가 직면했던 두가지 문제를 해결하기 위해 이곳의 소스를 수정해 보았습니다.

1. 헤더와 풋터가 있는 제로보드 노프레임 홈페이지에서 스크립트 함수가 안먹던 문제...
2. 레이어가 절대적 위치(예를 들어 좌측상단, 우측상단 등)가 아닌 상대적 위치(예를 들어 우측하단)에  있을 경우

더욱 쉽게 구현하거나 하는 방법이 있을지도 모르지만..
어째든 저같은 초보들이 힘겨워하는 것을 돕고자 몇 자 적어봅니다.

------------------------------------------------------------
여기에서는 화면의 우측하단에 레이어가 위치하는 경우를 예로 들겠습니다. (20*20인 그림을 레이어위에 올립니다.)
홈페이지 폭이 800 정도 된다고 하고
레이어의 left는 802 로 하겠습니다.
레어어의 top은 익스플로러 높이에서 (레이어의 높이를 감안하여 )조금 뺀 값으로 하면 되겠죠...
여기서는 20*20인 그림이므로 익스플로러 높이 -25 하겠습니다.

1. 자바스크립트 소스

<script language="javascript">
        
        self.onError=null;
        currentX = currentY = 0;  
        whichIt = null;
        lastScrollX = 0; lastScrollY = 0;
        
        action = window.setInterval("MoveAdcon()",1); //애드콘 무빙함수 실행
        function MoveAdcon() {
        //애드콘 무빙함수
                diffY = document.body.scrollTop;
                diffX = 0;
                if (diffY != lastScrollY) {
                        percent = .2 * (diffY - lastScrollY);
                        if (percent > 0) {
                                percent = Math.ceil(percent);
                        } else {
                                percent = Math.floor(percent);
                        }
                        document.all.divMenu.style.pixelTop += percent;
        
                        lastScrollY = lastScrollY + percent;
                }
                if (diffX != lastScrollX) {
                        percent = .2 * (diffX - lastScrollX);
                        if (percent > 0) {
                                percent = Math.ceil(percent);
                        } else {
                                percent = Math.floor(percent);
                        }
                        document.all.divMenu.style.pixelLeft += percent;
        
                        lastScrollY = lastScrollY + percent;
                }        
        }        
        
        
        document.onfocusin=PosAdcon; //애드콘 초기위치지정함수 실행
        function PosAdcon() {
        //애드콘 초기위치, 폼 리사이즈시 위치
                divMenu.style.top = document.body.scrollTop + document.body.clientHeight - 25;
                divMenu.style.display = '';
                divMenu.style.visibility = "visible";
                
        }
        
</script>

[설명]
function PosAdcon() 부분은 레이어가 상대적 위치에 존재해야 하므로 문서가 열릴때나 익스플로러를 리사이즈한 경우의 위치를 지정해주는 함수입니다.
document.onfocusin=PosAdcon; 요거는 문서가 열릴때 PosAdcon 함수가 실행되도록....
노프레임홈에서 방명록형식 게시판이나 글보기 화면에서 BODY의 ONLOAD 이벤트가 안먹히더군요....그래서 document.onfocusin=PosAdcon;로 처리..

function MoveAdcon() 부분은 스크롤시 레이어를 움직여주는 함수입니다.
action = window.setInterval("MoveAdcon()",1); 폼에서 위함수를 계속 실행해주도록 처리
(기타 다른방식의 처리들은 노프레임홈에서 안먹히더군요)


2. 실제 화면에 출력되는 레이어 (여기서는 20*20의 그림입니다.)
<DIV id=divMenu style="LEFT: 802px; VISIBILITY: hidden; WIDTH: 20px; height: 20px; POSITION: absolute">
        <A href="#"><IMG  src="../img/img_top.gif" height=20 width=20 border=0></A>
</DIV>

3. 리사이즈시 PosAdcon 함수의 실행에 대한 처리
   화면 리사이즈시에 실행되야하므로 body 태그에 onresize이벤트 처리합니다. 즉,
<body onresize="PosAdcon();">        


조그만 고치시면 자신의 홈에 잘 맞게 사용하실 수 있을겁니다.

다음 주소는 저의 홈페이지인데, 20*20의 이미지가 우측 하단에 위치하는 예입니다. (x,y 좌표 모두 상대적 위치입니다.)
http://tou.zetyx.net/
(극히 개인적인 홈이므로 그냥 곁모양만 보세요.)

이 게시물을
수정 삭제
좋아요
목록
제목 글쓴이 날짜
로그인 후 그룹별로 다른 페이지로 가기 - 업데이트판 v1.5 [19] 무대포2 2009.06.24
로그인 페이지 만드는 방법 [5] 산토 2009.06.12
별도 페이지 로그인방법 cornet 2009.05.21
내가 작성 한 글에 대한 일괄 삭제/이동/복사 권한 주기 [2] file 개돌 2009.05.15
BNU님의 Planner XE 1.2 버젼(일정관리) [9] file 개돌 2009.04.21
다양한 언어로 홈페이지 서비스하기 - 무식한 방법 [4] 멀리서 2009.04.21
주민등록 입력 폼 1.2.0 [55] file 개돌 2009.04.10
요청하신 모듈을 찾을 수 없습니다 문제해결 방법 [2] 반도체맨 2009.04.09
클릭마다 조회수 올리기 [1.4.0] [12] file 지B 2009.04.04
특정그룹 멤버 표시 위젯에서 이름 순 정렬하기 [2] file 이재한744 2009.03.30
로그인 포인트 출력 위젯을 수정해보자 [花穗] 2009.03.27
제로보드의 아이콘을 내 맘대로 변경하기...(2) [2] file winter548 2009.03.23
브라우저 크기에 따라 본문 가로 크기 자동 조절 [1] 개돌 2009.03.18
첨부파일의 외부 무단 링크 차단하기(XE) 게시판설정 [7] file 왕초보왕따 2009.03.02
테스트용 아이디 탈퇴 막기 [1] SMaker 2009.02.26
게시판에서 사이트 관리자만 볼수있는 항목 만들기 [1] ☜ TeRy ☞ 2009.02.13
사이트 이전팁( files 폴더) [6] 샤이니라 2009.01.28
(재 수정) 제로보드 XE 신버젼에 Lavalic 2 설치하기 [4] 조성우371 2009.01.16
제로보드XE 쉽게 업데이트 하는 방법.. [13] 청개구리00 2009.01.12
로그인한 회원만 최근 게시글, 검색등 볼수 있도록 하기 [3] [_)s 2008.12.31
태그 쓰기