+++ 홈제작 바이블 +++
홈제작 바이블 이 사이트는 이영찬님의 사이트를 복원한 것입니다.
Untitled Document
Html
Dhtml
Css
Php
Asp
Cgi
Java Script
Java Applet
Multimedia
Win Tip
이미지를 항상 오른쪽 하단에 놓기
화면 하단 오른쪽에 항상 그림이 위치하게 하는 스크립트입니다. 보통 광고배너를 이곳에 놓고 광고효과를 노리는데 사용하죠? 많이 보신것입니다. 데모를 보세요.



Script Example

<html>
<head>
<title>항상 맨 아래 오른쪽 귀퉁이에 그림 고정시키기</title>
<script language = "Javascript">
var nAdCornerWidth = 75;
var nAdCornerHeight = 130;
var nAdCornerMarginX = 2;
var nAdCornerMarginY = 2;
var nScrollBarWidth = 16;
var nScrollBarHeight = 16;
var isMSIE = 0;
var nVersion = 3;
var nInterval = 200;
var isLoaded = 0;
function setup ()
{
nVersion = parseInt (navigator.appVersion);
if (navigator.appName == "Microsoft Internet Explorer")
{
isMSIE = 1;
if (navigator.userAgent.indexOf ("MSIE 5") != -1)
{
nVersion = 5;
}
}
else
{
isMSIE = 0;
if (nVersion >= 4)
{
window.captureEvents (Event.MOUSEMOVE);
}
}

if (nVersion >= 4)
{
window.setInterval ("AdCornerMove();", nInterval);
}
}

function AdCornerMove ()
{
if (isLoaded == 0)
{
return;
}
if (isMSIE)
{
nAdCornerOriginX = document.body.clientWidth - idAdCorner.width - nAdCornerMarginX;
nAdCornerOriginY = document.body.clientHeight - idAdCorner.height - nAdCornerMarginY;

nAdCornerOriginX += document.body.scrollLeft;
nAdCornerOriginY += document.body.scrollTop;

idAdCorner.style.pixelLeft = nAdCornerOriginX;
idAdCorner.style.pixelTop = nAdCornerOriginY;
}
else
{
nAdCornerOriginX = window.innerWidth + window.pageXOffset - nAdCornerWidth - nAdCornerMarginX;
nAdCornerOriginY = window.innerHeight + window.pageYOffset - nAdCornerHeight - nAdCornerMarginY;

if (window.scrollbars.visible == true)
{
nAdCornerOriginX -= nScrollBarWidth;
nAdCornerOriginY -= nScrollBarHeight;
}
document.layers["idAdCorner"].pageX = nAdCornerOriginX;
document.layers["idAdCorner"].pageY = nAdCornerOriginY;
}
}

</script></head>

<body>
<layer name="idAdCorner" zIndex=2 left=10 top=1000>
<img id="idAdCorner" border=0 src="./img/d15_work1.gif" style="position:absolute;left=10;top=1000;z-index:2;">
</layer>
<script LANGUAGE="JavaScript">
<!--
window.onload=setup;
isLoaded = 1;
//-->
</script>

오른쪽 하단에 그림이 고정됩니다.마우스로 옆에 스크롤바를 움직여도 항상 그곳에 가죠?
</body>
</html>


설명
예제에서 빨간색 부분이 원하는 이미지를 지정하는 곳입니다. 이곳에서 내가 원하는 이미지의 정확한 경로명과 이름을 적기만 하면 됩니다. 스크롤바를 이용해도 그림아 항상 내려가므로 스크롤바가 생기는 곳에서 적용해도 상관없습니다.
Update : 2000/12/19 [돌아가기]