따라다니는 배너광고

[Wildfree]

안녕하세요.

처음 글을 남겨보네요.

인터넷 하시다보면, 마우스 휠(위, 아래)의 움직임에 따라서 쫒아다니는

배너광고 보신적이 있으실 겁니다.

여기저기서 소스를 찾아서 만들어보니, 익스플로어에서는 되는데, 파이어 폭스

로 창을 띄우니, 그 자리에서 가만히 서서, 움직이질 않더군요.

해결방법 아시는 분이나, 소스 가지고 계신분 있으시면, 답글 달아주시면

감사하겠습니다.

[흑마법사]

광고... 라는 측면에서 사용되는건 좀 그렇습니다만...

저 같은 경우, site navigation을 위해 비슷한걸 구현하려고 찾아다닌 적이 있습니다. 아무래도 Back to top 버튼 같은건 항상 한 위치에 있는게 편한거 같더라구요.그때 어디서 구한건데 아쉽게도 출저가 어디였는지 까먹었군요. 재차 밝히지만 제가 짠 코드가 아닙니다.

이 코드로는 파폭, 익스에서 잘 구현 됩니다. 아마 오페라에서도 문제 없을거라고 생각합니다.

코드: 모두 선택

var logowidth=82 // 로고의 가로크기 
var logoheight=23 // 로고의 세로크기 
var logoimage=new Image(logowidth,logoheight) 

logoimage.src="image/top.gif" //탑 이미지의 경로 

var logolink="#attop" // 탑의 링크 

// 로고 이미지의 ALT 태그 
var alttext="화면위로 이동" 

// 로고가 보여질 시간 설정 (0=사라지지 않고 계속) 
var visibleduration=0 

var Hoffset=30 // 화면의 오른쪽 여백 
var Voffset=30 // 화면의 아래쪽 여백 

var ie=document.all&&navigator.userAgent.indexOf("Opera")==-1 

var watermark_obj=ie? document.all.top : document.getElementById? document.getElementById("top") : document.top 

function insertimage(){ 
if (ie||document.getElementById) 
watermark_obj.innerHTML='<a href="'+logolink+'"><img src="'+logoimage.src+'" width="'+logowidth+'" height="'+logoheight+'" alt="'+alttext+'"></a>' 
else if (document.layers){ 
watermark_obj.document.write('<a href="'+logolink+'"><img src="'+logoimage.src+'" width="'+logowidth+'" height="'+logoheight+'" alt="'+alttext+'"></a>') 
watermark_obj.document.close() 
} 
} 

function positionit(){ 
var dsocleft=ie? document.body.scrollLeft : pageXOffset 
var dsoctop=ie? document.body.scrollTop : pageYOffset 
var window_width=ie? document.body.clientWidth : window.innerWidth-20 
var window_height=ie? document.body.clientHeight : window.innerHeight 



if (ie||document.getElementById){ 
watermark_obj.style.left=parseInt(dsocleft)+parseInt(window_width)-logowidth-Hoffset 
watermark_obj.style.top=parseInt(dsoctop)+parseInt(window_height)-logoheight-Voffset 
} 
else if (document.layers){ 
watermark_obj.left=dsocleft+window_width-Hoffset-logowidth 
watermark_obj.top=dsoctop+window_height-logoheight-Voffset 
} 
} 

function hidewatermark(){ 
if (document.layers) 
watermark_obj.visibility="hide" 
else 
watermark_obj.style.visibility="hidden" 
clearInterval(watermarkinterval) 
} 

function beingwatermark(){ 
watermarkinterval=setInterval("positionit()",50) 
insertimage() 
if (visibleduration!=0) 
setTimeout("hidewatermark()",visibleduration*1000) 
} 

if (ie||document.getElementById||document.layers) 
window.onload=beingwatermark 

[corenet]

저희도 출처가 어디 인지는 잊었습니다.
원래는 IE에서만 되던것을 FF에서도 되도록 수정해서 사용중입니다.

코드: 모두 선택

<css>
#STATICMENU {position:absolute; width:15px; height:39px;left:950px;top:150px;display:none;}
</css>
<script>
var stmnLEFT = 950;
var stmnGAP1 = 10;
var stmnGAP2 = 165;
var stmnBASE = 80;
var stmnActivateSpeed = 200;
var stmnScrollSpeed = 10;
var IE = document.all;

var stmnTimer;
function RefreshStaticMenu() {
var stmnStartPoint, stmnEndPoint, stmnRefreshTimer;

stmnStartPoint = parseInt(document.getElementById("STATICMENU").style.top, 10);
stmnEndPoint = (IE? document.documentElement.scrollTop : window.pageYOffset) + stmnGAP2;
if (stmnEndPoint < stmnGAP1) stmnEndPoint = stmnGAP1;

stmnRefreshTimer = stmnActivateSpeed;

if ( stmnStartPoint != stmnEndPoint ) {
	stmnScrollAmount = Math.ceil( Math.abs( stmnEndPoint - stmnStartPoint ) / 15 );
	document.getElementById("STATICMENU").style.top = parseInt(document.getElementById("STATICMENU").style.top, 10) + ( ( stmnEndPoint<stmnStartPoint ) ? -stmnScrollAmount : stmnScrollAmount ) + 'px';
	stmnRefreshTimer = stmnScrollSpeed;
}
stmnTimer = setTimeout ("RefreshStaticMenu();", stmnRefreshTimer);
}

function InitializeStaticMenu() {
document.writeln('<a name="top"></a>');
document.getElementById("STATICMENU").style.left = stmnLEFT;
document.getElementById("STATICMENU").style.display = 'block';
RefreshStaticMenu();
}

InitializeStaticMenu();
</script>
<div id="STATICMENU"]
  <a href="#"><img src="/images/include/top_img.gif" border="0" alt="move page top"></a>
</div>

하단에 div 태그에서 ]라고 되어 있는것은 수정해서 사용하셔야 합니다.
이곳에 올리면... 해당 부분이 임의로 바뀌어서 올라 가네요..

[dece24]

아래와 같은 코드를 이용하면 CSS 만으로도 가능합니다. 테스트 해보세요.

코드: 모두 선택

<DOCTYPE>
<html>
<head>
<meta>
<title>Fixed Quick Link</title>
<style>
#quickLink { position:fixed; _position:absolute; left:800px; top:200px; width:100px; height:300px; background:#CCC;}
</style>
</head>

<body>
<div>Content for  class "quickLink" Goes Here</div>
<p>--</p>
<p>--</p>
<p>--</p>
<p>--</p>
<p>--</p>
<p>--</p>
<p>--</p>
<p>--</p>
<p>--</p>
<p>--</p>
<p>--</p>
<p>--</p>
<p>--</p>
<p>--</p>
<p>--</p>
<p>--</p>
<p>--</p>
<p>--</p>
<p>--</p>
<p>--</p>
<p>--</p>
<p>--</p>
<p>--</p>
<p>--</p>
<p>--</p>
<p>--</p>
<p>--</p>
</body>
</html>

FF, OP, SF 브라우저와 IE 7.x 도 이것을 지원합니다. 단, IE6.x 에서는 position:fixed 라는 표준속성을 지원하지 않기 때문에에 underscore hack(_)을 사용하였고 그것은 IE 6.x 이하의 버전에서는 position:absolute 방식으로 표현된다는 것을 의미합니다. 즉, IE 6.x 이하의 버전에서는 문서의 내용에 고정되고 나머지 브라우저에서는 문서와는 별개로 창에 고정되어 따라다니는 것처럼 보입니다.

장점은 자바스크립트를 사용하는 것보다 시스템리소스를 덜 잡아먹으며 코드가 줄고 간결해진다는점 이겠지요. 단점은 IE 6.x 브라우저에서만 다르게 렌더링 된다는 점. 하지만 이것이 큰 문제가 되지는 않죠. 저같은 경우는 클라이언트를 설득합니다. 자바스크립트 써서 페이지 로딩속도에 지장주지 말고 웹 표준으로 깔끔하게 처리하자구요. 실제로 있었던 일입니다.

[hyeonseok]

저도 이 기능 넣어달라는 프로젝트가 있어서, 브라우저 호환성 향상시키고 상단, 하단 위치 제한을 걸은 코드를 만든적이 있습니다.

http://hyeonseok.com/pmwiki/index.php/J ... ovingLayer

[흑마법사]

오호 dece24님, 이거 괜찮네요. ㅎㅎ 좋은 정보 감사합니다. ^^

[steelheart]

corenet님... 이..... 이건!!!
제가 웹표준에 대한 개념이 없는 몇년전에
제로보드 사이트에 올린 거네요...
요즘도 서핑하다가 가끔 쓰이는 곳을 보긴 합니다만,
지금 보면 부끄러운 코드입니다;;