묻고답하기
메뉴가 스크롤바 따라다니는거 질문요
2002.08.24 23:12
메뉴가 스크롤바 따라다니는거 스타일시트 하려는데요.
못 하겠어요......엔지오 홈 로그인폼 스크롤바 따라다니는거 요....
제 홈 소스 알려드리께요. 메뉴 스크볼바 따라다니기 적용좀 해주세요 소스에........먼저 메뉴가 스크롤바 따라다니는 소스 그 다음소스는 제 홈 소스
먼저 제 홈페이지: http://ooto.xwow.net/~fox/bbs/zboard.php?id=ngcran
여기 가면요 로그인폼있는데요. 거기 테이블에 맞게 스크롤바 따라다니게 사이즈좀 맞춰서 설치해주세요....
메뉴 스크롤바 따라다니는 것
우선 <head></head> 사이에 아래 내용을 넣습니다.
<style type="text/css">
<!--
#floater {position:absolute; visibility:visible}
-->
</style>
<script language="JavaScript">
<!--
self.onError=null;
currentX = currentY = 0;
whichIt = null;
lastScrollX = 0; lastScrollY = 0;
NS = (document.layers) ? 1 : 0;
IE = (document.all) ? 1: 0;
<!-- STALKER CODE -->
function heartBeat() {
if(IE) {
diffY = document.body.scrollTop;
diffX = 0;
}
if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; }
if(diffY != lastScrollY) {
percent = .1 * (diffY - lastScrollY);
if(percent > 0) percent = Math.ceil(percent);
else percent = Math.floor(percent);
if(IE) document.all.floater.style.pixelTop += percent;
if(NS) document.floater.top += percent;
lastScrollY = lastScrollY + percent;
}
if(diffX != lastScrollX) {
percent = .1 * (diffX - lastScrollX);
if(percent > 0) percent = Math.ceil(percent);
else percent = Math.floor(percent);
if(IE) document.all.floater.style.pixelLeft += percent;
if(NS) document.floater.top += percent;
lastScrollY = lastScrollY + percent;
}
}
if(NS || IE) action = window.setInterval("heartBeat()",1);
//-->
</script>
그 다음 <body></body> 사이에 아래의 소스를 넣습니다.
<div id=floater style="left:0; top:150; width:119; height:53; z-index:10">내용</div>
간단한 설명을 말 하자면(신의 키스님 홈 내용 인용)
스크롤바를 따라다니는 것은 <div>로 둘러쌓인 레이어입니다.
left:0; top150 은 레이어의 위치입니다. left:0 은 왼쪽0, 위 150의 위치에 레이어가 위치하게 합니다. 따라서 왼쪽에 딱 달라붙고 위로부터 150만큼 떨어진 곳에서 레이어가 스크롤바를 따라다니게 된거죠.
만약 left값과 top값을 모두 0으로 한다면 왼쪽 맨 위 구석에서 따라다니게 되고, right값과 top값을 모두 0으로 한다면, 오른쪽 맨 위 구석에서 따라다니게 됩니다.
width:100, height:50은 레이어의 사이즈입니다. 레이어 안에 들어가는 내용에 맞춰 사이즈를 조절해주시면 됩니다. 119은 레이어의 폭(가로사이즈), 53은 레이어의 높이(세로사이즈)입니다. 예제에 사용된 레이어는 가로 119, 세로 53짜리의 이미지 하나만 레이어 안에 들어갔으므로 width:100, height:50 가 됐습니다.
레이어 안에 들어가는 내용 부분에는 간단한 이미지 하나만 넣으셔도 되고, 텍스트만 넣어도 됩니다. 테이블을 넣어도 되구요.
제 홈페이지 소스 제발 적용좀 해주세요.
<?
$_zb_url = "http://ooto.xwow.net/~fox/bbs/";
$_zb_path = "c:/apm_setup/users/fox/bbs/";
include $_zb_path."outlogin_avata.php";
?>
<html>
<head>
<script language="JavaScript">
<!--
function runClock() {
theTime = window.setTimeout("runClock()", 1000);
var today = new Date();
var display= today.toLocaleString();
status=display;
}
// -->
</script>
</head>
<body bgcolor="white" body onLoad="runClock();">
<table border="1" width="660" align="center" valign="top" cellspacing="0" bordercolor="#000099" bordercolordark="white" bordercolorlight="#000099">
<tr>
<td width="654" height="160" colspan="2" align="center" valign="center">
<p align="center"><img src="menew.jpg" width="705" height="160" border="0" usemap="#ImageMap1"></p>
</td>
</tr>
<tr>
<td width="139" height="150" valign="top">
<p align="center"><? print_outlogin("kyu_avata",1,10); ?></p>
</td>
<td width="511" height="450" align="center" valign="top">
<map name="ImageMap1">
<area shape="rect" coords="2, 15, 704, 133" href="http://ooto.xwow.net/~fox/bbs/zboard.php?id=goto">
<area shape="rect" coords="1, 137, 61, 159" href="http://ooto.xwow.net/~fox/bbs/zboard.php?id=ngcran">
<area shape="rect" coords="61, 138, 129, 159" href="http://ooto.xwow.net/~fox/bbs/zboard.php?id=japdam">
<area shape="rect" coords="128, 138, 196, 159" href="http://ooto.xwow.net/~fox/bbs/zboard.php?id=jilmun">
<area shape="rect" coords="195, 138, 264, 159" href="http://ooto.xwow.net/~fox/bbs/zboard.php?id=gongrak">
<area shape="rect" coords="263, 139, 331, 159" href="http://ooto.xwow.net/~fox/bbs/zboard.php?id=bigi">
<area shape="rect" coords="329, 136, 396, 159" href="http://ooto.xwow.net/~fox/bbs/zboard.php?id=sogam">
<area shape="rect" coords="395, 138, 465, 158" href="http://ooto.xwow.net/~fox/bbs/zboard.php?id=toron">
<area shape="rect" coords="465, 137, 578, 158" href="http://ooto.xwow.net/~fox/bbs/zboard.php?id=balme">
<area shape="rect" coords="578, 134, 650, 159" href="http://ooto.xwow.net/~fox/bbs/zboard.php?id=sulmun">
<area shape="rect" coords="651, 136, 703, 159" href="http://kim87923.cafe24.com">
</map>
못 하겠어요......엔지오 홈 로그인폼 스크롤바 따라다니는거 요....
제 홈 소스 알려드리께요. 메뉴 스크볼바 따라다니기 적용좀 해주세요 소스에........먼저 메뉴가 스크롤바 따라다니는 소스 그 다음소스는 제 홈 소스
먼저 제 홈페이지: http://ooto.xwow.net/~fox/bbs/zboard.php?id=ngcran
여기 가면요 로그인폼있는데요. 거기 테이블에 맞게 스크롤바 따라다니게 사이즈좀 맞춰서 설치해주세요....
메뉴 스크롤바 따라다니는 것
우선 <head></head> 사이에 아래 내용을 넣습니다.
<style type="text/css">
<!--
#floater {position:absolute; visibility:visible}
-->
</style>
<script language="JavaScript">
<!--
self.onError=null;
currentX = currentY = 0;
whichIt = null;
lastScrollX = 0; lastScrollY = 0;
NS = (document.layers) ? 1 : 0;
IE = (document.all) ? 1: 0;
<!-- STALKER CODE -->
function heartBeat() {
if(IE) {
diffY = document.body.scrollTop;
diffX = 0;
}
if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; }
if(diffY != lastScrollY) {
percent = .1 * (diffY - lastScrollY);
if(percent > 0) percent = Math.ceil(percent);
else percent = Math.floor(percent);
if(IE) document.all.floater.style.pixelTop += percent;
if(NS) document.floater.top += percent;
lastScrollY = lastScrollY + percent;
}
if(diffX != lastScrollX) {
percent = .1 * (diffX - lastScrollX);
if(percent > 0) percent = Math.ceil(percent);
else percent = Math.floor(percent);
if(IE) document.all.floater.style.pixelLeft += percent;
if(NS) document.floater.top += percent;
lastScrollY = lastScrollY + percent;
}
}
if(NS || IE) action = window.setInterval("heartBeat()",1);
//-->
</script>
그 다음 <body></body> 사이에 아래의 소스를 넣습니다.
<div id=floater style="left:0; top:150; width:119; height:53; z-index:10">내용</div>
간단한 설명을 말 하자면(신의 키스님 홈 내용 인용)
스크롤바를 따라다니는 것은 <div>로 둘러쌓인 레이어입니다.
left:0; top150 은 레이어의 위치입니다. left:0 은 왼쪽0, 위 150의 위치에 레이어가 위치하게 합니다. 따라서 왼쪽에 딱 달라붙고 위로부터 150만큼 떨어진 곳에서 레이어가 스크롤바를 따라다니게 된거죠.
만약 left값과 top값을 모두 0으로 한다면 왼쪽 맨 위 구석에서 따라다니게 되고, right값과 top값을 모두 0으로 한다면, 오른쪽 맨 위 구석에서 따라다니게 됩니다.
width:100, height:50은 레이어의 사이즈입니다. 레이어 안에 들어가는 내용에 맞춰 사이즈를 조절해주시면 됩니다. 119은 레이어의 폭(가로사이즈), 53은 레이어의 높이(세로사이즈)입니다. 예제에 사용된 레이어는 가로 119, 세로 53짜리의 이미지 하나만 레이어 안에 들어갔으므로 width:100, height:50 가 됐습니다.
레이어 안에 들어가는 내용 부분에는 간단한 이미지 하나만 넣으셔도 되고, 텍스트만 넣어도 됩니다. 테이블을 넣어도 되구요.
제 홈페이지 소스 제발 적용좀 해주세요.
<?
$_zb_url = "http://ooto.xwow.net/~fox/bbs/";
$_zb_path = "c:/apm_setup/users/fox/bbs/";
include $_zb_path."outlogin_avata.php";
?>
<html>
<head>
<script language="JavaScript">
<!--
function runClock() {
theTime = window.setTimeout("runClock()", 1000);
var today = new Date();
var display= today.toLocaleString();
status=display;
}
// -->
</script>
</head>
<body bgcolor="white" body onLoad="runClock();">
<table border="1" width="660" align="center" valign="top" cellspacing="0" bordercolor="#000099" bordercolordark="white" bordercolorlight="#000099">
<tr>
<td width="654" height="160" colspan="2" align="center" valign="center">
<p align="center"><img src="menew.jpg" width="705" height="160" border="0" usemap="#ImageMap1"></p>
</td>
</tr>
<tr>
<td width="139" height="150" valign="top">
<p align="center"><? print_outlogin("kyu_avata",1,10); ?></p>
</td>
<td width="511" height="450" align="center" valign="top">
<map name="ImageMap1">
<area shape="rect" coords="2, 15, 704, 133" href="http://ooto.xwow.net/~fox/bbs/zboard.php?id=goto">
<area shape="rect" coords="1, 137, 61, 159" href="http://ooto.xwow.net/~fox/bbs/zboard.php?id=ngcran">
<area shape="rect" coords="61, 138, 129, 159" href="http://ooto.xwow.net/~fox/bbs/zboard.php?id=japdam">
<area shape="rect" coords="128, 138, 196, 159" href="http://ooto.xwow.net/~fox/bbs/zboard.php?id=jilmun">
<area shape="rect" coords="195, 138, 264, 159" href="http://ooto.xwow.net/~fox/bbs/zboard.php?id=gongrak">
<area shape="rect" coords="263, 139, 331, 159" href="http://ooto.xwow.net/~fox/bbs/zboard.php?id=bigi">
<area shape="rect" coords="329, 136, 396, 159" href="http://ooto.xwow.net/~fox/bbs/zboard.php?id=sogam">
<area shape="rect" coords="395, 138, 465, 158" href="http://ooto.xwow.net/~fox/bbs/zboard.php?id=toron">
<area shape="rect" coords="465, 137, 578, 158" href="http://ooto.xwow.net/~fox/bbs/zboard.php?id=balme">
<area shape="rect" coords="578, 134, 650, 159" href="http://ooto.xwow.net/~fox/bbs/zboard.php?id=sulmun">
<area shape="rect" coords="651, 136, 703, 159" href="http://kim87923.cafe24.com">
</map>