웹마스터 팁

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

이 게시물을
수정 삭제
좋아요
목록
제목 글쓴이 날짜
[re] 아래 행복한고니님의 할아버지 소스의 업글(?) 버젼입니다. [2] Mahican 2002.12.02
텍스트 폼에 커서가 미리 깜빡이도록... [8] 카리 2003.01.22
로그인과 로그아웃을 체크하는 방법입니다. [3] 이영호 2003.01.24
다음 로그인 폼 입니다... 로그인후 원하는 곳으로!! [3] 정성교 2003.03.05
크롬리스(Chromless) 웹어플리케이션 -5 [3] sundew 2003.05.28
[초간단 자바스크립트!] 홈페이지에 FTP 폼 넣기?! [10] ∑Ztxy 2003.09.29
[초간단 자바스크립트!] 자바로 로그인폼 만들기 [3] ∑Ztxy 2004.01.26
특정위치에 떠있는 레이어 (슬라이딩 애드콘) - 노프레임홈에서의 문제해결 [8] 검미르 2004.05.03
상위 셀렉트박스 값 변경시 하위셀렉트박스(다수)제어하기. [2] Xian 2005.02.19
{로그인}관리자 로그인 폼 간단함 [2] 김민환 2006.10.10
쿠키(cookie)의 활용 [44] zero 2000.03.06
PHP 인증 페이지를 만들자! - Lesson 3 수정본 #1 [3] ☺[폐]허접-_- 2002.01.24
대화방을 만들어보쟈~ [20] 해그리드짱!!! 2001.06.03
[추천 소스] phpMyAdmin 다중사용자용... [5] WOWpc 2001.11.29
파일시스템에서 비밀번호 생성/수정/인증 [7] 두기두바 2002.01.10
[OsE=] Session을 배워보자~ [#1] OsE= 2002.03.02
MYSQL에 접속하기..^^ [9] ZipShin 2002.05.20
[PHP]간단한 로그인페이지 만들기 [15] ZipShin 2002.07.09
꼭 알아야 하는 4가지 쿼리문 Mr. JH 2002.08.22
[PHP 초보에서 중수로 - 쿠키편] 1강 : 쿠키의 이해 [2] file TheMics 2002.08.31
태그 쓰기