웹마스터 팁
화면 오른쪽 아래부분에 떠있는 메뉴 레이어(마우스 오버시 부메뉴 펼쳐짐)
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
-
Zective
2003.12.30 20:13
-
Name
2003.12.30 23:11
오른쪽 하단에 메뉴 보이는군요. 그리고..
상식적으로 봤을때 광고목적으로 예제주소를 올린게 아니라는건 아실것 같구요....
같은 글이라도 어떻게 적느냐에 따라서 상대의 반응은 달라진다고 생각합니다.
뒹굴리스트님의 게시판관리자로서의 코멘트는 조금은 공격적이라 생각되는군요. -
봉팀장
2003.12.30 23:38
Name님//감사합니다...
뒹굴리스트님//관리자로서 한 말씀 달게 받았습니다..
화면 해상도를 1024*768로 해서 보시구요...
오른쪽 하단에 추천사이트라는 글자가 보이실 겁니다..
추천사이트에 마우스오버하시면 메인/Nzeo/Cartoon이라는 부메뉴도 있구요..
제 PC에서는 잘 보이는데 왜 안보인다 하는지 알수가 없네요..ㅜ.ㅜ
잘 보이시라구 이미지로 바꾸었으니 그래도 홈광고 목적이라 생각하면 삭제하세요. -
봉팀장
2003.12.31 00:38
예제를 이미지로 만들어 적용해 보았습니다..참고하시고요..
innerX = eval(iW) - 115; //숫자가 커질수록 왼쪽으로 이동
innerY = eval(iH) - 110; //숫자가 커질수록 위로 이동
위 수치를 잘 활용하시면 유용하게 써먹을 수 있을것 같습니다...
여러분 새해 복 많이 받으세요...^^* -
Zective
2003.12.31 08:03
물론 홈 광고 목적이 아니라는 것은 저도 잘 알고 있죠... :)
우선 초면에 쓴 소리 드린 것 죄송합니다^^; -
수기
2004.01.31 11:42
잘쓰겠습니다...^^ -
귀연곰팅v
2004.10.11 10:25
나모에서 적용했더니 페이지가 빈페이지로 뜨네요ㅜ_ㅠa
| 제목 | 글쓴이 | 날짜 |
|---|---|---|
MS홈에 쓰이는 오른쪽메뉴 툴바
[13]
 | Kortion | 2003.02.22 |
| 슬라이딩 Layer ( 옆에 메뉴 보이시죠, 비슷꾸리한거 ) [8] | 이남두 | 2003.02.26 |
| 엔지오식 좌측이동메뉴 레이어 가운데기준정렬 [11] | 스티치 | 2003.03.29 |
| 간단한 점프메뉴(selecter) [14] | 박재현 | 2003.04.14 |
| 메뉴이동입니다. [5] | 데빌스텔스 | 2003.04.20 |
| 메뉴 옆에서 화살표가 스크롤되는.. [2] | 힘찬연못 | 2003.05.29 |
| [스크립트]오른쪽 버튼 누르면 메뉴나오기^^ [1] | 처절초보 | 2003.06.16 |
| [스크립트] 메뉴에 마우슬 데면 서브 메뉴가 나온다 [2] | 처절초보 | 2003.06.16 |
| 마우스 오른쪽 버튼 누르면 원하는 메뉴 뜨게 만들기(다른사이트) [3] | 김주형 | 2003.07.03 |
| [수정]롤오버 메뉴에 하위 부메뉴 레이어..(아웃시 하위메뉴사라짐) [24] | 미니 | 2003.08.18 |
| 플레쉬 메뉴를 표방한..=ㅁ= 자바스크립트의 수작 버튼 밑으로 스크롤 되는 아이콘입니다. [47] | beMax | 2003.09.14 |
| 플래시느낌의 유동적인 메뉴 [9] | jabusim | 2003.11.13 |
|
오른버튼 누를때 메뉴 뜨게하기(깔끔버전)
[5]
| 럽 | 2003.12.09 |
| 화면 오른쪽 아래부분에 떠있는 메뉴 레이어(마우스 오버시 부메뉴 펼쳐짐) [7] | 봉팀장 | 2003.12.30 |
| [초간단 자바스크립트!] 색깔바뀌는 메뉴 [3] | ∑Ztxy | 2004.01.19 |
| [초간단 자바스크립트!] 서브메뉴 만들기...~ [11] | ∑Ztxy | 2004.03.10 |
|
허접한 풀다운 메뉴 소스입니다. (유용한 팁 일지는 모르겠네요.)
[9]
| tintintm | 2004.03.23 |
| 클릭하거나, 바탕을 더블클릭하면 나타나는 작은(크기조절가능) 메뉴 | ☺심심 | 2004.05.17 |
| [StylishJAVA]레이어를 이용한 슬라이드 메뉴 [5] | ∑Ztxy | 2004.06.05 |
| 레이어 3 - 메뉴판때기. [1] | 미친개 | 2004.07.04 |
예제보기 페이지에서 뭐가 이 소스의 예제인지 알 수가 없군요.
(홈페이지 광고 목적으로 예제 주소를 정하신 것은 아니시겠지요...?)
이 소스가 예제보기 화면에서 어떤 효과의 소스인지 최소한의 설명이라도 해 주셨으면 합니다.
(막연히 소스 등록하시고 질문 사양한다고 하시면...)
그리고 위의 소스를 HTML 저장할 시, 페이지 상으로는 아무것도 나타나지 않습니다.