웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
화면 오른쪽 아래부분에 떠있는 메뉴 레이어(마우스 오버시 부메뉴 펼쳐짐)
2003.12.30 11:42
중복되는게 있는지 뒤져보았더니 비슷한건 있지만 똑같은건 없더라고요...
소스가 좋아서 퍼왔으니 고수님들의 태클은 없었으면 좋겠습니다...
--------------------------------------------------------------------------------
예제보기 : http://www.jin-hyunji.com/layer.html
<head>와 </head>사이에 아래 소스를 붙여넣으세요....
<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Randy Bennett (rbennett@thezone.net) -->
<!-- Web Site: http://home.thezone.net/~rbennett/sitemap.htm -->
<!-- Begin
function setVariables() {
if (navigator.appName == "Netscape") {
v = ".top=";
h = ".left=";
dS = "document.";
sD = "";
y = "window.pageYOffset";
x = "window.pageXOffset";
iW = "window.innerWidth";
iH = "window.innerHeight";
}
else {
h = ".pixelLeft=";
v = ".pixelTop=";
dS = "";
sD = ".style";
y = "document.body.scrollTop";
x = "document.body.scrollLeft";
iW = "document.body.clientWidth";
iH = "document.body.clientHeight";
}
xyz = 500;
innerX = eval(iW) - 115; //숫자가 커질수록 왼쪽으로 이동
innerY = eval(iH) - 110; //숫자가 커질수록 위로 이동
object = "logo";
checkLocationA();
}
movex = 0;
movey = 0;
xdiff = 0;
ydiff = 0;
ystart = 0;
xstart = 0;
function checkLocation() {
yy = eval(y);
xx = eval(x);
ydiff = ystart - yy;
xdiff = xstart - xx;
if ((ydiff < (-1)) || (ydiff > (1))) movey = Math.round(ydiff / 10), ystart -= movey;
if ((xdiff < (-1)) || (xdiff > (1))) movex = Math.round(xdiff / 10), xstart -= movex;
eval(dS + object + sD + v + (ystart + innerY));
eval(dS + object + sD + h + (xstart + innerX));
setTimeout("checkLocation()", 10);
}
function checkLocationA() {
ystart = eval(y);
xstart=eval(x);
}
function switchLogo(abc) {
if (abc == "menu") {
eval(dS + object + sD + v + 0);
eval(dS + object + sD + h + (-200));
object = abc;
}
else xyz = setTimeout("delayLogo()", 2000)
}
function delayLogo() {
eval(dS + object + sD + v + 0);
eval(dS + object + sD + h + (-200));
object = 'logo';
}
// End -->
</script>
아래 소스를 <body>와 </body> 사이에 붙여 넣으세요...
<body OnLoad="setVariables();checkLocation()">
<div id="logo" style="position:absolute; visibility:show; left:0px; top:-200px; z-index:2">
<table border=0 cellspacing=10 cellpadding=0 width=100>
<tr>
<td>
<center><br><br><br>
<A href="javascript:void(0)"; onmouseover="switchLogo('menu')">
추천사이트 // 이 부분에 이미지를 넣어도 가능합니다...^^*
</A>
</center>
</td>
</tr>
</table>
</div>
<div id="menu" style="position:absolute; visibility:show; left:0px; top:-200px; z-index:2">
<table border=0 cellspacing=10 cellpadding=0 width=100>
<tr>
<td>
<center>
<a href="http://www.jin-hyunji.com/bbs/index.php"; onmouseover="clearTimeout(xyz)"; onmouseout="switchLogo('logo')">Main</a>
</center>
</td>
</tr>
<tr>
<td>
<center>
<a href="http://www.nzeo.com/" target="_new"; onmouseover="clearTimeout(xyz)"; onmouseout="switchLogo('logo')">Nzeo</a>
</center>
</td>
</tr>
<tr>
<td>
<center>
<a href="http://cartoon.daganda.com/" target="_new"; onmouseover="clearTimeout(xyz)"; onmouseout="switchLogo('logo')">Cartoon</a>
</center>
</td>
</tr>
</table>
</div>
예제보기 : http://www.jin-hyunji.com/layer.html
소스가 좋아서 퍼왔습니다...다시 한번 부탁드리지만 질문 및 태클은 사양합니다....
소스 원본이 있는 곳 : http://javascript.internet.com
소스가 좋아서 퍼왔으니 고수님들의 태클은 없었으면 좋겠습니다...
--------------------------------------------------------------------------------
예제보기 : http://www.jin-hyunji.com/layer.html
<head>와 </head>사이에 아래 소스를 붙여넣으세요....
<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Randy Bennett (rbennett@thezone.net) -->
<!-- Web Site: http://home.thezone.net/~rbennett/sitemap.htm -->
<!-- Begin
function setVariables() {
if (navigator.appName == "Netscape") {
v = ".top=";
h = ".left=";
dS = "document.";
sD = "";
y = "window.pageYOffset";
x = "window.pageXOffset";
iW = "window.innerWidth";
iH = "window.innerHeight";
}
else {
h = ".pixelLeft=";
v = ".pixelTop=";
dS = "";
sD = ".style";
y = "document.body.scrollTop";
x = "document.body.scrollLeft";
iW = "document.body.clientWidth";
iH = "document.body.clientHeight";
}
xyz = 500;
innerX = eval(iW) - 115; //숫자가 커질수록 왼쪽으로 이동
innerY = eval(iH) - 110; //숫자가 커질수록 위로 이동
object = "logo";
checkLocationA();
}
movex = 0;
movey = 0;
xdiff = 0;
ydiff = 0;
ystart = 0;
xstart = 0;
function checkLocation() {
yy = eval(y);
xx = eval(x);
ydiff = ystart - yy;
xdiff = xstart - xx;
if ((ydiff < (-1)) || (ydiff > (1))) movey = Math.round(ydiff / 10), ystart -= movey;
if ((xdiff < (-1)) || (xdiff > (1))) movex = Math.round(xdiff / 10), xstart -= movex;
eval(dS + object + sD + v + (ystart + innerY));
eval(dS + object + sD + h + (xstart + innerX));
setTimeout("checkLocation()", 10);
}
function checkLocationA() {
ystart = eval(y);
xstart=eval(x);
}
function switchLogo(abc) {
if (abc == "menu") {
eval(dS + object + sD + v + 0);
eval(dS + object + sD + h + (-200));
object = abc;
}
else xyz = setTimeout("delayLogo()", 2000)
}
function delayLogo() {
eval(dS + object + sD + v + 0);
eval(dS + object + sD + h + (-200));
object = 'logo';
}
// End -->
</script>
아래 소스를 <body>와 </body> 사이에 붙여 넣으세요...
<body OnLoad="setVariables();checkLocation()">
<div id="logo" style="position:absolute; visibility:show; left:0px; top:-200px; z-index:2">
<table border=0 cellspacing=10 cellpadding=0 width=100>
<tr>
<td>
<center><br><br><br>
<A href="javascript:void(0)"; onmouseover="switchLogo('menu')">
추천사이트 // 이 부분에 이미지를 넣어도 가능합니다...^^*
</A>
</center>
</td>
</tr>
</table>
</div>
<div id="menu" style="position:absolute; visibility:show; left:0px; top:-200px; z-index:2">
<table border=0 cellspacing=10 cellpadding=0 width=100>
<tr>
<td>
<center>
<a href="http://www.jin-hyunji.com/bbs/index.php"; onmouseover="clearTimeout(xyz)"; onmouseout="switchLogo('logo')">Main</a>
</center>
</td>
</tr>
<tr>
<td>
<center>
<a href="http://www.nzeo.com/" target="_new"; onmouseover="clearTimeout(xyz)"; onmouseout="switchLogo('logo')">Nzeo</a>
</center>
</td>
</tr>
<tr>
<td>
<center>
<a href="http://cartoon.daganda.com/" target="_new"; onmouseover="clearTimeout(xyz)"; onmouseout="switchLogo('logo')">Cartoon</a>
</center>
</td>
</tr>
</table>
</div>
예제보기 : http://www.jin-hyunji.com/layer.html
소스가 좋아서 퍼왔습니다...다시 한번 부탁드리지만 질문 및 태클은 사양합니다....
소스 원본이 있는 곳 : http://javascript.internet.com
댓글 7
제목 | 글쓴이 | 날짜 |
---|---|---|
트랙백 구현하기 - 2. 트랙백의 형식
![]() | TheMics | 2004.04.22 |
트랙백 구현하기 - 2. 트랙백의 형식
![]() | TheMics | 2004.04.22 |
PHP5 RC2 Released. [4] | 써니루루☆ | 2004.04.27 |
PHP 4에서 PHP 5로 이행 [5] | 이종현 | 2004.04.30 |
포털사이트 처럼 시스템 점검중 만들기 [3] | http://zentoo.com | 2004.05.14 |
팁 아닌 팁 한달전... | http://zentoo.com | 2004.05.15 |
[국밥PHP] 1-1(1). 개념정리 Break Time (Build 1) [7] | 9000㎒ | 2004.05.18 |
PHP로 구현하는 음악 감상실
[9]
![]() | 컴도미 | 2004.05.21 |
초간단 설문조사 소스 [3] | 이혁 | 2004.05.27 |
해당 ftp 파일 서버에서 다른곳의 ftp 파일 서버로 백업용도 및 전송하기.. [9] | 김동욱 | 2004.05.30 |
초간단 스팸방지 하면서 곧바로 메일 보내기 [3] | U2em | 2004.05.31 |
윈도우계정에서 현재 남은 용량과 DB 용량 알기
[6]
![]() | 지으니 | 2004.05.31 |
주식정보출력코드 [2] | 김재경 | 2004.06.01 |
1. 연산자 [2] | 티다 | 2004.06.02 |
2. array [5] | 티다 | 2004.06.02 |
게시판내용에 코멘트를 달자!! [3] | 헉스 | 2004.06.02 |
게시판내용에 코멘트를 달자!! -2- [1] | 헉스 | 2004.06.02 |
게시판내용에 코멘트를 달자!! -마지막- [2] | 이혁 | 2004.06.03 |
응용편 - BMI 측정 테스트 소스를 만들어보자 [5] | 티다 | 2004.06.04 |
3. if문 [13] | 티다 | 2004.06.05 |