http://oxtag.com/html/ex/flylayer.html
<html>
<head>
<title>♡ 카멜롯™의 소스천국 태그피아 ♡</title>
<meta http-equiv="Content-Type" content="text/html; charset=" kr">
<meta name="description" content="Oxtag는 홈페이지 제작용 태그 및 대화방에서 사용될 수 있는 태그와 슬라이딩메뉴, 자바스크립트 예제, 스타일 시트, 각종 무료정보를 제공하고 있습니다.또한 자바스크립트는 디자인관련, 기능관련 예제로 제공하고 있으며 체계적인 태그강의를 통한 초보에서 진정한 태그강자가 될수 있도록 쉽고 자세하게 태그에 대해서 기술하고있습니다.">
<meta name="keywords" content="태그, oxtag, OXTAG, html, tag, TAG, HTML, 자바스크립트, 자바, javascript, java, JAVASCRIPT, JAVA, 스타일시트, stylesheet, STYLESHEET, 슬라이딩 메뉴, sliding menu, SLIDIG MENU무료, 공짜, 대화방태그, 대화방, 홈페이지제작, 예제, 폭, 퍽, 채팅태그, 채팅, homepage, 정보, 대화방태그, 채팅태그, tip, TIP, 등록, 웹디자인, 웹제작, 웹페이지, 초보, 홈페이지">
<!---------------------- 여기서부터는 head내에 삽입하세요. ------------------------------->
<script language="JavaScript">
<!--
function fly_init_float_layers()
{
var name;
var layer;
var i;
var j;
j = 0;
document._float_layers = new Array(Math.max(1, fly_init_float_layers.arguments.length/2));
for (i = 0; i < fly_init_float_layers.arguments.length; i += 2) {
name = fly_init_float_layers.arguments[i];
if (name == '')
return;
if (navigator.appName == 'Netscape') {
layer = document.layers[name];
layer._fl_pos_left = layer.left;
layer._fl_pos_top = layer.top;
} else {
layer = document.all[name];
layer._fl_pos_left = layer.style.pixelLeft;
layer._fl_pos_top = layer.style.pixelTop;
}
layer._fl_pos = fly_init_float_layers.arguments[i+1];
if (layer)
document._float_layers[j++] = layer;
}
if (navigator.appName == 'Netscape')
document._fl_interval = setInterval('fly_process_float_layers()', 20);
else
fly_process_float_layers();
}
function fly_page_width()
{
return (navigator.appName == 'Netscape') ? innerWidth : document.body.clientWidth;
}
function fly_page_height()
{
return (navigator.appName == 'Netscape') ? innerHeight : document.body.clientHeight;
}
function fly_process_float_layers()
{
if (document._float_layers) {
var i;
var layer;
for (i = 0; i < document._float_layers.length; i++) {
layer = document._float_layers[i];
if (navigator.appName == 'Netscape') {
if (layer._fl_pos == 1)
layer.left = layer._fl_pos_left + window.pageXOffset;
else if (layer._fl_pos == 2 || layer._fl_pos == 5)
layer.left = window.pageXOffset;
else if (layer._fl_pos == 3 || layer._fl_pos == 6)
layer.left = window.pageXOffset + (fly_page_width() - layer.clip.width)/2;
else
layer.left = window.pageXOffset + fly_page_width() - layer.clip.width - 16;
if (layer._fl_pos == 1)
layer.top = layer._fl_pos_top + window.pageYOffset;
else if (layer._fl_pos == 2 || layer._fl_pos == 3 || layer._fl_pos == 4)
layer.top = window.pageYOffset;
else
layer.top = window.pageYOffset + fly_page_height() - layer.clip.height;
} else {
if (layer._fl_pos == 1)
layer.style.pixelLeft = layer._fl_pos_left + document.body.scrollLeft;
else if (layer._fl_pos == 2 || layer._fl_pos == 5)
layer.style.pixelLeft = document.body.scrollLeft;
else if (layer._fl_pos == 3 || layer._fl_pos == 6)
layer.style.pixelLeft = document.body.scrollLeft + (fly_page_width() - layer.style.pixelWidth)/2;
else
layer.style.pixelLeft = document.body.scrollLeft + fly_page_width() - layer.style.pixelWidth;
if (layer._fl_pos == 1)
layer.style.pixelTop = layer._fl_pos_top + document.body.scrollTop;
else if (layer._fl_pos == 2 || layer._fl_pos == 3 || layer._fl_pos == 4)
layer.style.pixelTop = document.body.scrollTop;
else
layer.style.pixelTop = document.body.scrollTop + fly_page_height() - layer.style.pixelHeight;
}
}
}
}
// -->
</script>
<!------------- 요기까징 head안에 삽입하는 부분입니다. 고치시지 마시고 그대로 넣으시기 바랍니다.------------------->
</head>
<body bgcolor=black OnLoad="fly_init_float_layers('layer1', 2, 'layer2', 3, 'layer3', 4, 'layer4', 5, 'layer5', 6, 'layer6', 7);" OnResize="fly_process_float_layers();" OnScroll="fly_process_float_layers();">
<!-------- 아래의 삽입하고자하는 위치의 소스만 복사하셔서 이미지의 주소만 바꿔서 쓰시기 바랍니다. 소스 설명은 간단하게 하겠습니다.
(이미지에 링크를 거셔도 됩니다.)
만약에 이미지가 아래 이미지보다 크기가 크거나 작을 경우 약간의 포지션 위치가 변하는데 width & height 이부분만 고치시면 될겁니다.
그리고 젤 중요한게 있는데 위의 body의 시작 부분인데 여길 보시면
OnLoad의 ( ) 괄호 여기만 고치시면 됩니다. 예를 들어보면
layer1은 떠있는 레이어의 고유 이름입니다. 그래서 오른쪽 상단에 이미지를
위치 시킬려면 onload=="fly_init_float_layers('layer1', 4);" 이렇게 해주시면
되는거죠. 뒷 부분은 물론 그대로 쓰셔야합니다. 간단하게 말해서 layer1은
하나만 할경우에 layer바로뒤에 1을 써주고 두개를 하실려면 위처럼 layer1뒤에
layer2를 넣으시고 "layer1," 콤마뒤의 숫자는 레이어 위치입니다.
2는 왼쪽상단, 3은 중앙상단, 4는 오른쪽 상단, 5는 왼쪽하단, 6은 중앙하단, 7은 오른쪽 하단입니다.
알맞은 레이어 위치의 숫자를 써넣으시기바랍니다. 이걸 보시고 안돼시면 질문과 답변에 글 남기시기 바랍니다.-->
<!-- 왼쪽 상 -->
<div id="layer1" style="width:96px; height:95px; position:absolute; left:81px; top:25px; z-index:1;">
<p><img src="../img/angel2.gif" border="0"></p>
</div>
<!-- 중앙 상 -->
<div id="layer2" style="width:96px; height:95px; position:absolute; left:50px; top:25px; z-index:1; left:81px;">
<p><a href="http://oxtag.com" target="_blank"><img src="../img/angel2.gif" border="0"></a></p>
</div>
<!-- 오른쪽 상 -->
<div id="layer3" style="width:96px; height:95px; position:absolute; left:50px; top:25px; z-index:1; left:81px;">
<p><a href="http://oxtag.com" target="_blank"><img src="../img/angel.gif" border="0"></a></p>
</div>
<!-- 왼쪽 하 -->
<div id="layer4" style="width:96px; height:95px; position:absolute; left:50px; top:25px; z-index:1; left:81px;">
<p><a href="http://oxtag.com" target="_blank"><img src="../img/angel2.gif" border="0"></a></p>
</div>
<!-- 중앙 하 -->
<div id="layer5" style="width:96px; height:95px; position:absolute; left:50px; top:25px; z-index:1; left:81px;">
<p><a href="http://oxtag.com" target="_blank"><img src="../img/angel2.gif" border="0"></a></p>
</div>
<!-- 오른쪽 하 -->
<div id="layer6" style="width:96px; height:95px; position:absolute; left:50px; top:25px; z-index:1; left:81px;">
<p><a href="http://oxtag.com" target="_blank"><img src="../img/angel.gif" border="0"></a></p>
</div>
<br><br><br><br><br><br>
<!-- 여기서 부터는 예제를 보기위한 부분입니다. 여러분은 본문이나 글을 넣으시면 되겠죠....^---------^( -->
<font color=red size=2><b>마우스를 아래로 스크롤해보세요. <br>
그리고 상단의 타이틀바를 더블 <br>
클릭하셔서 창크기를 최대화 해보세요.<br>
이미지의 포지션은 변하지 안죠.<br>
소스는 밑으로 내려가서 소스보기<br>
클릭하시면 됩니다.<br><br><br><br></b></font>
<font color=teal size=5 face=휴먼매직체><b>사랑하는 이에대한 그리움</b></font><br><p><br>
<font color=ff00ff size=3 face=휴먼매직체>
사람의 인연에는 우연이란 없다고 합니다. <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><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>
생각나지 않듯이 그렇게... <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>
낙엽도... 아낌없이 자기를 다 희생한다는 것을... </font><br><br><br><br>
</body>
</html>
'인터넷정보' 카테고리의 다른 글
하단의 상태바에 깜박이는 효과 주기 (0) | 2007.10.17 |
---|---|
하단의 상태바에 깜박이는 효과 주기 (0) | 2007.10.17 |
하단의 상태바에 메세지가 타이핑 되는 소스 (0) | 2007.10.17 |
하단의 상태바에 메세지가 타이핑 되는 소스 (0) | 2007.10.17 |
떠있는 레이어 이미지 (0) | 2007.10.17 |
엔터키 제어하기 (0) | 2007.10.17 |
엔터키 제어하기 (0) | 2007.10.17 |
네온사인 테이블 만들기 (0) | 2007.10.17 |
네온사인 테이블 만들기 (0) | 2007.10.17 |
페이지 로딩시 공지창 띄우기 (0) | 2007.10.17 |