• 프리카운터
  • 플래시북
  • 프리보드
  • 전광판
  • 웹공부방
  • 커뮤니티
스크롤바 따라다니는 이미지(top버튼)
▶ 스크롤바를 항상 따라다니는 이미지
<html>
<head>
<script language="JavaScript1.2">
<!--
markW = 200; // 이미지 폭(픽셀)
markH = 20; // 이미지 높이(픽셀)
markX = 100; // 오른쪽 여백 비율
markY = 100; // 하단 여백 비율
markRefresh = 10; // 리프레쉬 시간(밀리세컨즈)

var wMark;

function setVals() {
// 브라우저 버전에 따라 해당 DIV ID에 해당하는 객체를 얻어 온다
wMark=document.getElementById?document.getElementById("waterMark")
:document.all?document.all["waterMark"]:document.layers?document.waterMark:null;

if (wMark.style) wMark=wMark.style;
wMark.width = markW;
wMark.height = markH;
navDOM = window.innerHeight; // 넷스케이프는 이 값이 0이다.

barW = 0;
barH = 0;
if (navDOM) {
if (document.height > innerHeight) barW = 20;
if (document.width > innerWidth) barH = 20;
}
else {
innerWidth = document.body.clientWidth;
innerHeight = document.body.clientHeight;
}
posX = ((innerWidth - markW)-barW) * (markX/100);
posY = ((innerHeight - markH)-barH) * (markY/100);
}

function wRefresh() {
wMark.left = posX + (navDOM?pageXOffset:document.body.scrollLeft);
wMark.top = posY + (navDOM?pageYOffset:document.body.scrollTop);
}

function markMe() {
setVals();
window.onresize=setVals;
markID = setInterval ("wRefresh()",markRefresh);
}

window.onload=markMe;
//-->
</script>
</head>
<body>
스크롤바를 움직여도 아래부분의 이미지는 계속 고정되어 있다.
<div id="waterMark" style="position:absolute">
<a href="#"><img src="이미지파일" border=0></a>
</div>
</body>
</html>


▶ 스크롤바가 있을때만 생기는 top버튼 이미지
<html>
<head>
<script language="javascript">
<!--
// 이미지의 오른쪽과 아래쪽 여백
var nimgTopMarginX = 30;
var nimgTopMarginY = 15;
// 세로스크롤바의 폭과 가로스크롤바의 높이
var nScrollBarWidth = 16;
var nScrollBarHeight = 16;
// 브라우저 버전
var nVersion = 3;
// 이미지를 리프레시하는 간격
var nInterval = 100;
function SetUp()
{
// 브라우저의 버전을 정수로 변환
nVersion = parseInt(navigator.appVersion);
if (nVersion >= 4 )
{
//브라우저가 Microsoft Internet Explorer일 때
if (navigator.appName == "Microsoft Internet Explorer")
{
window.setInterval ("imgTopMove_Explorer();", nInterval);
}
//브라우저가 Netscape Navigator일 때
else
{
layerTop = document.layers["lyrTop"];
window.setInterval ("imgTopMove_Navigator();", nInterval);
}
}
}
function imgTopMove_Explorer()
{
//스크롤하지 않았을 때는 이미지가 보이지 않게 위치시킨다.
if (document.body.scrollLeft == 0 && document.body.scrollTop == 0)
{
imgTop.style.pixelTop = -100;
}
//스크롤했을 때는 이미지의 위치를 셋팅한다.
else
{
nimgTopOriginX = document.body.clientWidth + document.body.scrollLeft - imgTop.width - nimgTopMarginX;
nimgTopOriginY = document.body.clientHeight + document.body.scrollTop - imgTop.height - nimgTopMarginY;

imgTop.style.pixelLeft = nimgTopOriginX; //이미지의 X좌표(왼쪽 여백)을 설정
imgTop.style.pixelTop = nimgTopOriginY; //이미지의 Y좌표(위쪽 여백)을 설정
}
}
function imgTopMove_Navigator()
{
//스크롤하지 않았을 때는 이미지가 보이지 않게 위치시킨다.
if (window.pageXOffset == 0 && window.pageYOffset == 0)
{
layerTop.top = -100
}
//스크롤했을 때는 이미지의 위치를 셋팅한다.
else
{
nimgTopOriginX = window.innerWidth + window.pageXOffset - layerTop.clip.width - nimgTopMarginX;
nimgTopOriginY = window.innerHeight + window.pageYOffset - layerTop.clip.height - nimgTopMarginY;
//윈도우에 스크롤바가 있을 경우
if (window.scrollbars)
{
nimgTopOriginX -= nScrollBarWidth;
nimgTopOriginY -= nScrollBarHeight;
}
layerTop.left = nimgTopOriginX; //레이어의 X좌표(왼쪽 여백)을 설정
layerTop.top = nimgTopOriginY; //레이어의 Y좌표(위쪽 여백)을 설정
}
}
-->
</script>
</head>
<body onLoad="SetUp()">

document.body.clientWidth : 윈도우에서 문서가 표시되는 영역의 가로 크기
document.body.clientHeight : 윈도우에서 문서가 표시되는 영역의 세로 크기
document.body.scrollLeft : 윈도우에서 가로 스크롤바를 오른쪽으로 움직인 정도
document.body.scrollTop : 윈도우에서 세로 스크롤바를 아래로 움직인 정도
imgTop.width : 이미지의 가로 크기(imgTop은 이미지의 id)
imgTop.height : 이미지의 세로 크기(imgTop은 이미지의 id)
nimgTopMarginX : 전역 변수(이미지의 오른쪽 여백의 크기, 예제에서는 30으로 할당)
nimgTopMarginY : 전역 변수(이미지의 아래쪽 여백의 크기, 예제에서는 15로 할당)
window.innerWidth : 문서가 표시되는 영역과 세로 스크롤바의 폭을 포함한 가로 크기
window.innerHeight : 문서가 표시되는 영역과 가로 스크롤바의 높이를 포함한 세로 크기
window.pageXOffset : 윈도우에서 가로스크롤바를 오른쪽으로 움직인 정도
window.pageYOffset : 윈도우에서 세로스크롤바를 아래로 움직인 정도
layerTop.clip.width : 보여지는 레이어의 가로 크기(layerTop은 사용한 레이어)
layerTop.clip.height : 보여지는 레이어의 세로 크기(layerTop은 사용한 레이어)
nimgTopMarginX : 전역 변수(이미지의 오른쪽 여백의 크기, 예제에서는 30으로 할당)
nimgTopMarginY : 전역 변수(이미지의 아래쪽 여백의 크기, 예제에서는 15로 할당)

<LAYER name="lyrTop" z-Index="2" right="230" top="-100">
<a href="#">
<img id="imgTop" src="top.gif" border=0
style="position:absolute;right=230;top=-100;z-index:2;"></a>
</LAYER>

</body>
</html>


내알 FREECOUNT.NET 프카넷 생긴날 2003.12.20 홈 | 카운터 | 플래시북 | 프리보드 | 전광판 | 웹공부방 | 커뮤니티 | 쪽지함