다양한 기능이 지원되는 풍선도움말 스크립트

이 스크립트는 다양한 기능이 지원되는 풍선도움말 스크립트이다.

간혹 소스실행하기 에서는 풍선도움말의 폭이 작게 나오는 경우가 있음으로 만일 풍선도움말의 폭이 작게 나오는 경우 자신의 PC로 소스코드를 복사 후 사용하면 된다.

브라우저: 인터넷 익스플로러 & 넷스케이프 4.0 이상
라이센스: freeware
사용언어: Javascript

<HTML><HEAD><center>▶ <a href="http://korea.internet.com/channel/list.asp?cid=189&zid=12">코리아인터넷닷컴 자바스크립트 소스/예제 모음</a></center> <SCRIPT LANGUAGE="JavaScript">if (document.layers) {navigator.family = "nn4"}if (document.all) {navigator.family = "ie4"}if (window.navigator.userAgent.toLowerCase().match("gecko")) {navigator.family = "gecko"}descarray = new Array("Welcome to korea.internet.com","이 풍선 도움말은 브라우저의 폭만큼의 길이의 문자열이 지원됩니다.","HTML Tag 역시 지원 됩니다. 줄바꿈도 가능합니다.","IMAGE 역시 삽입이 가능합니다. <img src=http://korea.internet.com/images/title_web.gif>","매우 긴문자열도 신의 기호에 맞도록 편집이 가능하여 편리하게 쓰실수 있습니다.","</center>링크역시 지원이 됩니다. <a href='http://korea.internet.com/'>korea.internet.com</a> <a href='http://korea.internet.com/'>korea.internet.com</a> <a href='http://korea.internet.com/'>korea.internet.com</a>");overdiv="0";function popLayer(a){if(!descarray[a]){descarray[a]="This popup (#"+a+") isn't setup correctly - needs description";}if (navigator.family == "gecko") {pad="0"; bord="1 bordercolor=black";}else {pad="1"; bord="0";}desc = "<table cellspacing=0 cellpadding="+pad+" border="+bord+" bgcolor=000000><tr><td>\n" +"<table cellspacing=0 cellpadding=3 border=0 width=100%><tr><td bgcolor=ffffdd><center>\n" +descarray[a] +"\n</td></tr></table>\n" +"</td></tr></table>";if(navigator.family =="nn4") { document.object1.document.write(desc); document.object1.document.close(); document.object1.left=x+15; document.object1.top=y-5; }else if(navigator.family =="ie4"){ object1.innerHTML=desc; object1.style.pixelLeft=x+15; object1.style.pixelTop=y-5; }else if(navigator.family =="gecko"){ document.getElementById("object1").innerHTML=desc; document.getElementById("object1").style.left=x+15; document.getElementById("object1").style.top=y-5; }}function hideLayer(){if (overdiv == "0") { if(navigator.family =="nn4") {eval(document.object1.top="-500");} else if(navigator.family =="ie4"){object1.innerHTML="";} else if(navigator.family =="gecko") {document.getElementById("object1").style.top="-500";} }}var isNav = (navigator.appName.indexOf("Netscape") !=-1);function handlerMM(e){x = (isNav) ? e.pageX : event.clientX + document.body.scrollLeft;y = (isNav) ? e.pageY : event.clientY + document.body.scrollTop;}if (isNav){document.captureEvents(Event.MOUSEMOVE);}document.onmousemove = handlerMM;// End --></script><div id="object1" style="position:absolute; background-color:FFFFDD;color:black;border-color:black;border-width:20; visibility:show; left:25px; top:-100px; z-index:+1" onmouseover="overdiv=1;" onmouseout="overdiv=0; setTimeout('hideLayer()',1000)">pop up description layer</div><a href="http://korea.internet.com" onMouseOver="popLayer(0)" onMouseOut="hideLayer()">korea.internet.com</a> <a href="#" onMouseOver="popLayer(1)" onMouseOut="hideLayer()">프라우저 폭만큼의 문자열 길이지원</a> <a href="#" onMouseOver="popLayer(2)" onMouseOut="hideLayer()">HTML 지원</a> <a href="#" onMouseOver="popLayer(3)" onMouseOut="hideLayer()">IMAGE 삽입가능</a> <a href="#" onMouseOver="popLayer(4)" onMouseOut="hideLayer()">기호에 맞은 편집가능</a> <a href="#" onMouseOver="popLayer(5)" onMouseOut="setTimeout('hideLayer()',2000)">LINK 지원</a>  <a href="/channel/content.asp?kid=13&nid=19528#test"><img src="/images/w_list3.gif" border="0"></a></body></html>

UX : 노트필기

다양한 기능이 지원되는 풍선도움말 스크립트

티스토리툴바

다양한 기능이 지원되는 풍선도움말 스크립트

'paran/[ Script ]' Related Articles

티스토리툴바