웹마스터 팁

  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/
(극히 개인적인 홈이므로 그냥 곁모양만 보세요.)

이 게시물을
수정 삭제
좋아요
목록
제목 글쓴이 날짜
{주목} CodeRed 아파치로그파일 지우기 [2] skyel 2001.08.22
MySQL 관리 첫걸음 [5] 앤디(andy) 2001.04.18
APC(Alternativ PHP Cache) 사용법( php 캐쉬 플러그인 ) [1] file 김도한 2002.01.29
아파치 웹서버 속도 빠르게 하기 위한 최적화 팁 [14] 차카게살자 2002.01.27
[APM자동설치] APM_Setup 3 ( Apache, PHP4, MySQL, Perl, Tomcat ) [6] 근땅e 2002.02.06
커널 버전 알아내기 [1] 오픈소스 2002.02.21
vi 편집기 사용시 비프음 제어 오픈소스 2002.02.21
에러페이지를 서버관리자가 지정한 페이지로. [1] teenteenv 2002.02.21
[리눅스]proftp 에서 사용자가 상위 폴더로 이동을 못하게... [3] teenteenv 2002.02.22
[강좌1탄]와우리눅스7.0을 서버로 두고 인터넷공유 [1] RealComty 2002.02.23
[강좌2탄]와우리눅스7.0을 서버로 두고 인터넷공유 [1] RealComty 2002.02.23
[강좌3탄]와우리눅스7.0을 서버로 두고 인터넷공유 [4] RealComty 2002.02.23
[re] [강좌4탄]와우리눅스7.0을 서버로 두고 인터넷공유 [2] 주영명 2002.02.27
[강좌4탄]와우리눅스7.0을 서버로 두고 인터넷공유 [2] RealComty 2002.02.23
[강좌끝이다~!]와우리눅스7.0을 서버로 두고 인터넷공유 [8] RealComty 2002.02.23
메모리 절약하기 - 리눅스 오픈소스 2002.02.24
wuftp에서 proftp로...그리고, proftp 설정하기 [1] 쇠물택 2002.02.24
[sapzils서버세팅] A+P+M 소스 설치 [4] 쇠물택 2002.02.24
텔넷 사용자 관리... 쇠물택 2002.02.24
리눅스 시스템에서 시간 맞추기 [2] 쇠물택 2002.02.24
태그 쓰기