스크롤바를 따라 다니는 배너 광고 쉽게 만들기

이 스크립트는 스크롤바를 따라 다니는 배너 광고를 쉽게 만들 수 있는 스크립트이다.

브라우저 : 넷스케이프 및 인터넷 익스플로러 4 이상에서 동작
라이센스: freeware
사용언어: Javascript

<HTML><HEAD><center>▶ <a href="http://korea.internet.com/channel/list.asp?cid=189&zid=12">코리아인터넷닷컴 자바스크립트 소스/예제 모음</a></center><SCRIPT>//============ 아래 변수 값은 변경할 수 있습니다 ===============imageSource = "http://korea.internet.com/images/han.gif" imageWidth = 100 imageHeight = 70 imageAlign = "topright" //topright, topleft, bottomright, bottomleftlinkTo = "http://korea.internet.com/etc/banner_log.asp?bid=1&btype=G" //============ DO NOT EDIT THE CODES BELOW ============n = (document.layers) ? 1:0ie = (document.all) ? 1:0function init() {if (n || ie) { // initialize objects createLayer("watermark",null,0,0,imageWidth,imageHeight,"<A HREF=\'" + linkTo + "\'><IMG SRC=\'" + imageSource + "\' BORDER=0></A>") mark = new dynLayer("watermark") setInterval("wtrmark()",100) }}function dynLayer(id,nestref) { if (n) { this.css = document.layers[id] } else if (ie) { this.css = document.all[id].style } this.moveBy = dynLayerMoveBy this.moveTo = dynLayerMoveTo}function dynLayerMoveBy(x,y) { this.x += x this.css.left = this.x this.y += y this.css.top = this.y}function dynLayerMoveTo(x,y) { this.x = x this.css.left = this.x this.y = y this.css.top = this.y}function wtrmark() {if (n) { windowWidth = window.innerWidth-17 windowHeight = window.innerHeight-17 if (imageAlign == "topleft") mark.moveTo(window.pageXOffset,window.pageYOffset) if (imageAlign == "topright") mark.moveTo(windowWidth-imageWidth+window.pageXOffset,window.pageYOffset) if (imageAlign == "bottomleft") mark.moveTo(window.pageXOffset,windowHeight-imageHeight+window.pageYOffset) if (imageAlign == "bottomright")mark.moveTo(windowWidth-imageWidth+window.pageXOffset,windowHeight-imageHeight+window.pageYOffset) }else if (ie) { windowWidth = document.body.clientWidth windowHeight = document.body.clientHeight if (imageAlign == "topleft") mark.moveTo(document.body.scrollLeft,document.body.scrollTop) if (imageAlign == "topright") mark.moveTo(windowWidth-imageWidth+document.body.scrollLeft,document.body.scrollTop) if (imageAlign == "bottomleft") mark.moveTo(document.body.scrollLeft,windowHeight-imageHeight+document.body.scrollTop) if (imageAlign == "bottomright")mark.moveTo(windowWidth-imageWidth+document.body.scrollLeft,windowHeight-imageHeight+document.body.scrollTop) }}function createLayer(id,nestref,left,top,width,height,content,bgColor,visibility,zIndex) { if (n) { if (nestref) { var lyr = eval("document."+nestref+".document."+id+" = new Layer(width, document."+nestref+")") } else { var lyr = document.layers[id] = new Layer(width) eval("document."+id+" = lyr") } lyr.name = id lyr.left = left lyr.top = top if (height!=null) lyr.clip.height = height if (bgColor!=null) lyr.bgColor = bgColor lyr.visibility = (visibility=='hidden')? 'hide' : 'show' if (zIndex!=null) lyr.zIndex = zIndex if (content) { lyr.document.open() lyr.document.write(content) lyr.document.close() } } else if (ie) { var str = '\n<DIV id='+id+' style="position:absolute; left:'+left+'; top:'+top+'; width:'+width if (height!=null) { str += '; height:'+height str += '; clip:rect(0,'+width+','+height+',0)' } if (bgColor!=null) str += '; background-color:'+bgColor if (zIndex!=null) str += '; z-index:'+zIndex if (visibility) str += '; visibility:'+visibility str += ';">'+((content)?content:'')+'</DIV>' if (nestref) { index = nestref.lastIndexOf(".") var nestlyr = (index != -1)? nestref.substr(index+1) : nestref document.all[nestlyr].insertAdjacentHTML("BeforeEnd",str); } else { document.body.insertAdjacentHTML("BeforeEnd",str) } } }</SCRIPT></HEAD><BODY ONLOAD="init()"><a href="/channel/content.asp?kid=13&nid=14826#test"><img src="/images/w_list3.gif" border="0"></a>스크롤바를 따라 다니는 배너 광고입니다.여기서는 우측 상단에 광고 배너가 있습니다.이 스크립트에 imageAlign이란 변수의 값이 "topright"로 되어 있어서배너 광고가 우측에 나타나는 것입니다.만일 이 변수의 값을 topright, topleft, bottomright, bottomleft으로바꿔가며 테스트 해보면 원하는 위치에 스크롤바를 따라다니는배너 광고를 쉽게 만들 수 있습니다.아래 내용은 스크롤바를 생성하기 위한 것입니다................................................................................................................................................................................................................................................................................</BODY></HTML>

UX : 노트필기

스크롤바를 따라 다니는 배너 광고 쉽게 만들기

티스토리툴바

스크롤바를 따라 다니는 배너 광고 쉽게 만들기

'paran/[ Script ]' Related Articles

티스토리툴바