깔끕하답니다. ^0^
by Anna 안나 2008. 3. 2. 16:44
필요하면 수정해서 쓰세요..^^
by Anna 안나 2008. 3. 2. 16:44
^^

'JS > 자바의심' 카테고리의 다른 글

깔끔한 메뉴  (0) 2008.03.02
툴팁이 나왔다사라지는 메뉴  (0) 2008.03.02
마우스로 옮길 수 있는 메뉴  (0) 2008.03.02
서브메뉴  (0) 2008.03.02
오른쪽 버턴클릭하면 나오는 메뉴  (0) 2008.03.02
마인드맵 형식의 메뉴  (0) 2008.03.02
간단한 설명과 이동이 가능한 메뉴  (0) 2008.03.02
메뉴에 마우스를 데면 메뉴배경이 이동해요.  (0) 2008.03.02
세로 서브 메뉴  (0) 2008.03.02
가로 서브 메뉴  (0) 2008.03.02
by Anna 안나 2008. 3. 2. 16:43
색도 마음에 들고 멋져요^^
by Anna 안나 2008. 3. 2. 16:42
소스가 좀 길지만.. -,-..
유용합니다.^^
by Anna 안나 2008. 3. 2. 16:41
이쁩니다~ㅎㅎ

'JS > 자바의심' 카테고리의 다른 글

깔끔한 메뉴  (0) 2008.03.02
툴팁이 나왔다사라지는 메뉴  (0) 2008.03.02
마우스로 옮길 수 있는 메뉴  (0) 2008.03.02
서브메뉴  (0) 2008.03.02
오른쪽 버턴클릭하면 나오는 메뉴  (0) 2008.03.02
마우스 대면 왼쪽에서 천천히 이동하는메뉴  (0) 2008.03.02
마인드맵 형식의 메뉴  (0) 2008.03.02
간단한 설명과 이동이 가능한 메뉴  (0) 2008.03.02
세로 서브 메뉴  (0) 2008.03.02
가로 서브 메뉴  (0) 2008.03.02
by Anna 안나 2008. 3. 2. 16:40
이전의 가로 서브 메뉴에 이어서 세로 서브 메뉴입니다.
by Anna 안나 2008. 3. 2. 16:40
종종 있었던 질문 같은데요.
설명 드리기가 조금 애매했습니다.
주메뉴가 몇개이냐에 따라서 스크립트에 신경을 써야 하니까요.

어렵지는 않은데요.. 제가 사용하고 있던 스크립트를 정리해서
제가 주석을 조금 달아 놓았습니다.
제가 만든 것은 아니지만.. 사용하시기 편하시라고 설명을 나름대로 적었는데요..
도움이 되셨으면 하네요.
제가 // 혹은 <!-- 이런 식으로 설명 달아 놓은 부분을 참고하시면
이해가 가지 않을까 싶네요.

멋진 홈페이지 만드시길 바랍니다.
by Anna 안나 2008. 3. 2. 16:38
-------자 이건일단 원본소스입니다.

<html><head><meta http-equiv="content-type" content="text/html; charset=euc-kr">
<title>스크롤바따라다니는,TOP</title>
<style type="text/css"><!--
BODY,p,li,TD,SELECT,input,DIV,form,TEXTAREA,option,td,fieldset {font-size:9pt; font-family:verdana;color:D4D0C8;
line-height:120%; margin-top:0; margin-bottom:0; scrollbar-face-color:2B2A2A; scrollbar-shadow-color:2B2A2A; scrollbar-highlight-color:2B2A2A; scrollbar-3dlight-color:2B2A2A; scrollbar-darkshadow-color:2B2A2A; scrollbar-track-color:434343; scrollbar-arrow-color:EFFFFD}
A:link {color:#47F8FF;text-decoration:none;font-weight: bold}
A:visited {color:#47F8FF;text-decoration:none;font-weight: bold}
A:hover{color:#FCFF7A;text-decoration:underline;font-weight: bold)
--></style>
<SCRIPT LANGUAGE="JavaScript">
<!--
function fix(){
var a=document.body.scrollTop+0
bar.style.top = a
}
-->
</SCRIPT>
</head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red" onScroll="fix();">
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<span id="bar" style="Z-INDEX: 1; RIGHT: 0px; VISIBILITY: visible; POSITION: absolute; TOP: 0px"><script language="JavaScript">
document.write("<input type='button' value='TOP-1000' onClick='self.scrollBy(0,-1000)' style='font-weight:bold; color:CC6699;'>")
</script></span> </body> </html>




---자, 그리고 수정된소스를 봅시다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<script language="javascript">
function fix() {
var imgH = 18; // 이미지 사이즈에 맞게 수정 (이미지 높이)
var imgW = 44; // 이미지 사이즈에 맞게 수정 (이미지 너비)
var posTop = document.body.clientHeight - imgH;
var posLeft = document.body.clientWidth - imgW;
bar.style.top = document.body.scrollTop + posTop;
bar.style.left = document.body.scrollLeft + posLeft;
} function neuladen() {window.location.reload()}
window.onresize = neuladen; window.onscroll = fix;
//window.onresize = fix;
window.onload = fix;
</script>
</HEAD> <BODY background="img/bg_patten.gif" bgproperties="fixed"> <!--
밑에 3가지 중에서 선택해서 사용하시면 될 듯 합니다.
1. 이미지
2. 테이블
3. 버튼
-->
<!--<span id="bar" style="position:absolute; z-index:1"><a href="#top"><img src="top.gif" border=0></a></span>-->
<!--<span id="bar" style="position:absolute; z-index:1"><table bgcolor=#CCCCCC width=44 height=18 cellpadding=0 cellspacing=0><tr><td align=center><a href="#top">TOP</a></td></tr></table></span>-->
<span id="bar" style="position:absolute; z-index:1"><input type='button' value='TOP' onClick="window.location='#top'"></span> <TABLE CELLSPACING=0 CELLPADDING=1 WIDTH="100%" BGCOLOR="#336699">
<TR><TD>
<B><FONT COLOR="#FFFFFF" face=돋움>당구 유머</FONT></B>
</TD></TR>
</TABLE><br> <table border=0 width=100%><tr><td width=23></td><td>
<table width=95% cellpadding=1><tr>
<td width=25% align=center bgcolor="#339966" onMouseOver="style.background='#AA1002'" onMouseOut="style.background='#339966'"><a href="#당구와sex"><font color=white><b>당구와sex</b></font></a></td>
<td width=25% align=center bgcolor="#DDAD08" onMouseOver="style.background='#AA1002'" onMouseOut="style.background='#DDAD08'"><a href="#당구찬양시"><font color=white><b>당구찬양시</b></font></a></td>
<td width=25% align=center bgcolor="#339966" onMouseOver="style.background='#AA1002'" onMouseOut="style.background='#339966'"><a href="#정치인당구인"><font color=white><b>정치인당구인</b></font></a></td>
<td width=25% align=center bgcolor="#DDAD08" onMouseOver="style.background='#AA1002'" onMouseOut="style.background='#DDAD08'"><a href="#당구같이"><font color=white><b>당구같이</b></font></a></td>
</tr></table>
</td></tr></table><br> <a name="당구와sex"></a>
<table border=0 width=100%><tr><td width=23></td><td>
<table border=0 cellspacing=0 cellpadding=1 width="95%">
<tr><td BGCOLOR="#339966"><font color=white><b>당구와 sex 공통점30선</b></font></td></tr>
<tr><td style="line-height:20pt;font-size:10pt">
1. 예전에는 대학교때 시작했는데 요즘은 고등학교, 중학교때 처음 시작한다.<br>
2. 혼자서 연습하는것은 공짜지만 항상 눈치를 보게 된다. <br>
3. 혼자서도 연습을 많이하면 실력이 늘어난다.<br>
4. 실력이 늘어나면 자세가 바뀐다.<br>
5. 초보는 힘으로밀어 부치지만 고수는 테크닉으로 끝낸다.<br>
6. 초보나 고수나 벗기기는 항상 힘이든다.<br>
7. 초보는 무조건 빠는 것을 좋아하지만 고수는 필요한 만큼만 빤다.<br>
8. 어려운 포지션은 허리를 잘쓰면 해결된다.<br>
9. 반 듯하면 (큐대일수록) 정확하게 들어간다.<br>
10. 세게 찍어치면 다이가 찢어질 위험이 있다.<br>
11. 보통 한게임에 일이십분 걸린다.<br>
12. 항상 한게임으로 끝내지는 않는다.<br>
13. 술마시고 하는 경우에는 시간만 오래 걸리고 대부분 진다.<br>
14. 끝난후에는 꼭 씻는다.<br>
15. 몰아치면 더 빨리 끝낼수도 있지만 재미가 없다.<br>
16. 계속해서 오랜시간을 하다보면 다리가 후들거린다.<br>
17. 하다보면 밤을 세울때가 많다.<br>
18. 처음만난 사람과는 긴장된 마음으로, 오래된 사람과는 편안한 마음으로....<br>
19. 초보는 엉뚱한데다 겨냥을 한다.<br>
20. 교본이 많이 있긴하지만 실전이 제일 중요하다.<br>
21. 자기것 안치고 남의 것을 치면 죽는다.<br>
22. 개인큐는 남이 못쓰게 잘 보관한다.<br>
23. 한번 맛들이면 하루도 안빠지고 하고 싶다.<br>
24. 요즘은 비디오 교본도 나온다.<br>
25. 같이 할 사람만 있으면 밤낮없이 할 수 있다.<br>
26. 큐대가 크고 무겁다고 잘치는 것은 아니다.<br>
27. 자세가 중요하다는 건 고수가 되야 안다.<br>
28. 군발이들이 휴가나 외박을 나오면 단체로 하고 들어간다.<br>
29. 외국의것은(당구대)우리나라 것보다 크다.<br>
30. 사오십대가 되면 한달에 한번 칠까 말까 한다.<br>
</td></tr></table>
</td></tr></table><br>
<a name="당구찬양시"></a>
<table border=0 width=100%><tr><td width=23></td><td>
<table border=0 cellspacing=0 cellpadding=1 width="95%">
<tr><td BGCOLOR="#DDAD08"><font color=white><b>당구 찬양시</b></font></td></tr>
<tr><td style="line-height:20pt;font-size:10pt"> 테마 유머::스포츠<br>
당구 찬양시(撞介)<br>
거룩한 우라는<br>
예술구보다도 깊고<br>
불붙는 맛세이는<br>
게임비보다도 값지다.<br>
<br>
아! 강낭콩보다도 더 푸른<br>
그 다이 위에<br>
양귀비꽃보다도 더 붉은<br>
그 적구 굴러라.<br>
아리땁던 그 큐대<br>
곧게 뻗어나가며<br>
그 석류 속 같은 적구<br>
두개를 다 맞추었네!<br>
아! 강낭콩보다도 더 푸른<br>
그 다이 위에<br>
양귀비꽃보다도 더 붉은<br>
그 적구 굴러라<br>
<br>
구르는 적구는<br>
길이길이 모이리니<br>
그대의 꽃다운 다마수<br>
어이 아니 오르랴.<br>
아! 강낭콩보다도 더 푸른<br>
그 다이 위에<br>
양귀비꽃보다도 더 붉은<br>
그 적구 굴러라<br><br>
<br>
<작품 해설><br>
<br>
평생 당구만을 위해 모든 것을 바치친 전설적인 인물 '당개 (撞介)'를 화려한<br>
색채 대비를 이용하여 묘사하고 있다.<br>
<br>
*당개 (撞介:190?-194?)<br>
<br>
암울했던 일제 시대 때 이 땅에 당구를 보급하기 위하여 자신의 모든 것을 다 바쳤던 인물.<br>
당시 총독부 사령관 '하오마루'와 죽방을 쳤으나 크게 물리게 되자 그를 껴안고 <br>
3층 당구장에서 뛰어내려 같이 즉사하였다 함. <br> </td></tr></table>
</td></tr></table><br>
<a name="정치인당구인"></a>
<table border=0 width=100%><tr><td width=23></td><td>
<table border=0 cellspacing=0 cellpadding=1 width="95%">
<tr><td BGCOLOR="#339966"><font color=white><b>정치인과 당구인공통점</b></font></td></tr>
<tr><td style="line-height:20pt;font-size:10pt"> 1. 경력과 실력이 다가 아니다. 누가 뒤통수를 칠지 모른다. 다크호스는 항상 존재한다. <br>
2. 상대방 까대기를 절라 잘한다. 가끔 얼굴 붉어져 치고받고 싸운다. <br>
3. 우기는넘이 짱이다. 되던 안되던 목소리높여 우기고 봐야한다. <br>
4. 승리를 위해 담합을 하기도 한다. 뒤에서 절라 욕하면서도 눈치봐서 자기도 한다. <br>
5. 가끔 승리하면 돈을 긁어오기도 한다. 언제나 남은것은 없다고 우긴다. <br>
6. 상승세를 타면 막을 수 없다. 그러나 한번 꼬이면 바로 끝이다. <br>
7. 폼만 그럴싸한 허접이들이 대다수이다. <br>
8. 자기 이익에만 급급하게 된다. 매너 황인넘들이 많다. <br>
9. 상대방이 실수하면 절라 좋아한다. 그러나 자기가 실수 해서 상대방이 좋아하면
예의라고는 눈꼽만큼도 없다고 지랄한다. <br>
10. 자기 전용터가 있다. 다른곳은 꺼린다. <br>
11. 상대방이 이기면 절라 화내면서 짜증부린다. <br>
12. 똑같이 여가를 활용해서 참여한다. <br>
<br>
(당구맨 본업 : 학생 또는 사회인 정치인 본업 : 국가가 인정한 사기꾼 <br>
그래도 당구는 보는사람은 재미있지만 정치인 봐도 재미없다. 그냥 화가 날 뿐이다. <br>
<br>
천리안 by 윌리 <br>
< 퍼가실땐, http://humorvista.co.kr/ 을 적어주세요 T.T > <br>
</td></tr></table>
</td></tr></table><br> <a name="당구같이"></a>
<table border=0 width=100%><tr><td width=23></td><td>
<table border=0 cellspacing=0 cellpadding=1 width="95%">
<tr><td BGCOLOR="#DDAD08"><font color=white><b>당구같이 못칠놈</b></font></td></tr>
<tr><td style="line-height:20pt;font-size:10pt">
<p>10위- "먹는거에 초연한 놈." </p> 대단한 집중력이다. 먹는거보다 당구가 중요하다니...고개가 숙여진다.
<p>9위- "전화와도 안 받는 놈" </p> 악바리다. 안 물리려고.. 지극 정성이다. 내가 이겨도 돈 내줘야 될거 같다.
<p>8위- "시작하기 전 연습 다마때 잘 치는 놈" </p> 시작하기 전, 은근한 연습다마 싸움.
마치 농구 연습할때 골대 앞에서 시합보다 더 치열하게 리바운드 다툼 하듯이,
당구 칠 때도 시작하기 전에 서로 공한번 건드려 보려고 난리인데,
그런 혼잡한 상황 속에서도 잘 치는 놈이라면 엄청난 실력자이다.
<p>7위- "시간 한참 지나도 아무 동요 없이 치는 놈" </p> 게임이 길어질 수록 아줌마 눈치 봐가면서,"야, 니가 눌러." "니가 눌러 이새끼야." 이런 식으로 신경을 쓰게 마련인데...
그 와중에도 전혀 동요 없이 치는 놈들이 있다. 이긴다는 확신이 있는, 아주 무서운 놈들이다.
<p>6위- "뽀록치고 깍듯하게 인사하는 놈" </p> 고수다. 당구장 벽에 써 붙여있는 당구 10계를 지키는 고수다.
그냥 이런 사람과 같이 친다는 걸 영광으로 알아야 한다.
<p>5위- "3년째 계속 150인 놈." </p>
진짜 무서운 놈이다. 150 이면 칠건 다친다.
게다가 다마수도 300~500 등 고다마에 비하면 훨씬 적어서 맘만 먹으면 후다닥 빼고 나간다.
<p>4위- "최근에 만나는 여자 없는 놈" </p> 절대 잡생각이 안난다.
여자 친구나 쫓아다니는 여자 있는 일반인들은 승부가 극한 상황으로 치닿으면, 꼭 여자 생각을 하게 마련이다.
바로 여기서 일반인들과 이런 놈들의 집중력의 차이가 생겨난다.
<p>3위- "하늘이 돕는 놈" </p> 절묘한 순간마다 뽀록이 터져준다. 반면에 그 상대방은 짤 들어가게 친 공도 야리하게 새고, 싸대기 맞고...난리난다.
정말 말이 안 된다. 근데 보면 늘 똑같은 놈이 그런다. 이젠 아예 뽀록이 당연한건 줄 안다.
심해지면, 뽀록 치고도 노리고 쳤다는 식의 덤덤한 표정을 짓는다. 그럴땐 진짜 초크 묻은 손으로 싸대기 때려주고 싶다.
<p>2위- "쓰레빠 갈아신고 치는 놈" </p> 쓰레빠는 산전수전 다 겪은 베테랑을 상징한다.
바로 쫄아주어야 한다. 이런 사람이랑은 웬만하면 이길 생각 말고 배운다는 생각으로 쳐야한다.
그래도 이겨보겠다고 따라서 어설프게 쓰레빠 꺼내서 신고 쳤다가,
나중에 돈은 돈대로 물리고, 열받아서 홧김에 집에 오다가 현관문에서 쓰레빠를 신고 있는 자신을 발견하게 된다.
<p>1위- "집에서 낮잠 자다가 나온 놈" </p> 정말 컨디션 만빵이다.
수능 시험도 충분한 수면을 취해야 잘 치듯이 당구도 마찬가지인 것이다.
자는 놈을 깨워서 당구 치자고 한 놈이 죽일 놈이다.
대낮 부터 낮잠 자는애 깨워서 당구 쳐봤자 결국 자기가 물리게 된다. <p>나우누리 by lingo<br> < 퍼가실땐 , http://humorvista.co.kr/ 을 적어주세요 T.T ></p>
</td></tr></table>
</td></tr></table><br>

</body>
</HTML>




차이점이요..?
그냥.. 조금소스가 간단해졌을 뿐입니다.^^
잘쓰세요..
by Anna 안나 2008. 2. 26. 14:53
JAVA Script Source 새 창의 링크로 부모창에 결과출력하고 새 창은 닫기 <script language="JavaScript">
function Go1(){
opener.parent.location='연결할 주소';
window.close();
}
function Go2(){
opener.parent.location='연결할 주소';
window.close();
}
</script>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="64"><a href="javascript:Go1();" target="_parent">바로갈 곳 링크</a></td>
</tr>
<tr>
<td height="121"><a href="javascript:Go2();" target="_parent">바로갈 곳 링크</a></td>
</tr>
</table> * 출처 : 해피스크립트닷컴(http://www.happyscript.com)
by Anna 안나 2008. 2. 26. 14:37
JAVA Script Source 스크롤바를 따라다니는 메뉴 1 에 비해 미끄러지는 듯한 느낌이 들면서 보다 부드럽게 따라다닙니다. 레이어 안을 텍스트, 이미지, 테이블 등으로 채워 보조메뉴로 활용하기 좋습니다. 1. <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> ---------------------------------------------------------------------------------------- 2. </body>의 바로 앞, 즉 본문의 맨 끝에 아래 소스를 넣습니다. ---------------------------------------------------------------------------------------- <div id=floater style="left:0; top:150; width:119; height:53; z-index:10">내용</div> ---------------------------------------------------------------------------------------- left:0; top150 은 레이어의 위치입니다. left:0 은 왼쪽0, 위 150의 위치에 레이어가 위치하게 합니다. 따라서 왼쪽에 딱 달라붙고 위로부터 150만큼 떨어진 곳에서 레이어가 스크롤바를 따라다니게 된거죠. 만약 left값과 top값을 모두 0으로 한다면 왼쪽 맨 위 구석에서 따라다니게 되고, right값과 top값을 모두 0으로 한다면, 오른쪽 맨 위 구석에서 따라다니게 됩니다. width:119, height:53은 레이어의 사이즈입니다. 레이어 안에 들어가는 내용에 맞춰 사이즈를 조절해주시면 됩니다. 119은 레이어의 폭(가로사이즈), 53은 레이어의 높이(세로사이즈)입니다. 예제에 사용된 레이어는 가로 119, 세로 53짜리의 이미지 하나만 레이어 안에 들어갔으므로 width:119, height:53 이 됐습니다. 레이어 안에 들어가는 내용 부분에는 간단한 이미지 하나만 넣으셔도 되고, 텍스트만 넣어도 됩니다. 테이블을 넣어도 되구요.
by Anna 안나 2008. 2. 26. 14:35
JAVA Script Source 레이어의 내용이 화면이 스크롤되는것에따라 이동이 됩니다. 위치는 임의로 지정이 가능합니다. 레이어 안에는 텍스트 뿐 아니라, 이미지, 테이블 등도 넣어서 꾸밀 수 있기 때문에, 간이메뉴로 사용하기 좋습니다. 1. <head>와 </head>사이에 아래의 소스를 넣습니다. ---------------------------------------------------------------------------------------- <style type="text/css">
<!--
#watermark {position:absolute}
-->
</style> ---------------------------------------------------------------------------------------- 2. <body>와 </body>사이에 스크롤바를 따라다니게할 부분을 <div>태그로 감싸줍니다. ---------------------------------------------------------------------------------------- <div id="waterMark" style="z-index:10">내용</div> ---------------------------------------------------------------------------------------- 이 부분이 스크롤바를 따라다니는 레이어입니다. 내용은 텍스트, 이미지, 테이블 등으로 이용해 취향에 맞게 꾸밀 수 있습니다. 3. </body>의 바로 앞(본문의 맨 끝)에 아래 소스를 넣습니다. ---------------------------------------------------------------------------------------- <script language="JavaScript1.2">
<!-- markW = 62;
markH = 47;
markX = 100;
markY = 100;
markRefresh = 10; if (!document.all) document.all = document;
if (!document.all.waterMark.style) document.all.waterMark.style = document.all.waterMark; wMark = document.all.waterMark.style;
wMark.width = markW;
wMark.height = markH;
navDOM = window.innerHeight; function setVals() {
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> ---------------------------------------------------------------------------------------- markW = 62; 에서 62 는 레이어의 폭
markH = 47; 에서 47 은 레이어의 높이
markX = 100; 에서 100 은 레이어의 X축 좌표 (퍼센트값입니다. 따라서 가로 100%를 의미하므로 오른쪽 끝)
markY = 100; 에서 100 은 레이어의 Y축 좌표 (퍼센트값입니다. 따라서 세로 100%를 의미하므로 맨 아래) ((-------IMAGE-------)) * 출처 : 신의키스(http://www.kissofgod.net) * 개인참고용으로 가져온 관계로 일부 수정된 내용이 있습니다. * 정확한 정보를 얻고자 하시는분은 출처인 신의키스님 사이트를 방문바랍니다.
by Anna 안나 2008. 2. 26. 14:34
| 1 2 3 4 5 |