본문 바로가기

javascript

예쁘게 스크롤 되는 풍선 도움말(툴팁) 스크립트

풍선도움말이 한글자씩 타이핑 되며 나타나는 스크립트 입니다

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title> script </title>

<!---- [1단계] 아래 코드를 <HEAD> 와 <HEAD> 태그 사이에 붙여 넣으세요 --->


<script language=javaScript>
<!--
var tickerwidth=120 // 박스의 가로크기
var tickerheight=50 // 박스의 높이
var tickerpadding=5 // 박스의 안쪽여백
var borderwidth=1 // 박스의 테두리
var fnt="굴림" // 글꼴
var fntsize=10 // 글자의 크기
var fntsizelastletter=10 // 마지막 글자의 크기
var fntcolor="blue" // 글자색상
var fntcolorlastletter="red" // 마지막 글자의 색상
var fntweight=3
var backgroundcolor="F5F5F5" // 박스의 배경색
var standstill=2000
var speed=40 // 스피드 조절
var xdistance=20 // 링크텍스트와의 x-축 간격
var ydistance=10 // 링크텍스트와의 y-축 간격
var timer
var topposition=0
var leftposition=0
var x,y
var i_substring=0
var i_presubstring=0
var i_message=0
var message
var messagecontent=""
var messagebackground=""
var messagepresubstring=""
var messageaftersubstring=""
fntweight=fntweight*100

function getmessagebackground() {
                messagebackground="<table border="+borderwidth+" width="+tickerwidth+" height="+tickerheight+" cellspacing=0 cellpadding=0><tr><td valign=top bgcolor='"+backgroundcolor+"'>"
                messagebackground+=" </td></tr></table>"
}

function getmessagecontent() {        
                messagecontent="<table border=0 cellspacing=0 cellpadding="+tickerpadding+" width="+tickerwidth+" height="+tickerheight+"><tr><td valign=top>"
                messagecontent+="<span style='position:relative; font-family:"+fnt+";color:"+fntcolor+";font-size:"+fntsize+"pt;font-weight:"+fntweight+"'>"        
                messagecontent+="<font color='"+fntcolor+"'>"
                messagecontent+=messagepresubstring
                messagecontent+="</font>"
                messagecontent+="</span>"
                messagecontent+="<span style='position:relative; font-family:"+fnt+";color:"+fntcolor+";font-size:"+fntsizelastletter+"pt;font-weight:900'>"        
                messagecontent+="<font color='"+fntcolorlastletter+"'>"
                messagecontent+=messageaftersubstring
                messagecontent+="</font>"
                messagecontent+="</span>"
                messagecontent+="</td></tr></table>"
}

function showticker() {
        if (i_substring<=message.length-1) {
                        i_substring++
                        i_presubstring=i_substring-1
                        if (i_presubstring<0) {i_presubstring=0}
            messagepresubstring=message.substring(0,i_presubstring)
                messageaftersubstring=message.substring(i_presubstring,i_substring)
                        getmessagecontent()
                if (document.all) {
                        ticker.innerHTML=messagecontent
                        timer=setTimeout("showticker()", speed)
                }
                if (document.layers) {
                        document.ticker.document.write(messagecontent)
                        document.ticker.document.close()
                        timer=setTimeout("showticker()", speed)
                }
        }
        else {
                clearTimeout(timer)
        }
}

function hideticker() {
    clearTimeout(timer)
    i_substring=0
        i_presubstring=0
    if (document.all) {
            document.all.ticker.style.visibility="hidden"
        document.all.tickerbg.style.visibility="hidden"
        }
        if (document.layers) {
                document.ticker.visibility="hidden"
        document.tickerbg.visibility="hidden"
        }
}

function showmessage(linkmessage) {
    getmessagebackground()
    message=linkmessage
  
        i_substring=0
        i_presubstring=0
    leftposition=x+xdistance
    topposition=y+ydistance
        if (document.all) {        
                document.all.ticker.style.posLeft=leftposition
                document.all.ticker.style.posTop=topposition
                document.all.tickerbg.style.posLeft=leftposition
                document.all.tickerbg.style.posTop=topposition
                tickerbg.innerHTML=messagebackground
        document.all.ticker.style.visibility="visible"
        document.all.tickerbg.style.visibility="visible"
                showticker()
        }
        if (document.layers) {
        document.ticker.left=leftposition
                document.ticker.top=topposition
                document.tickerbg.left=leftposition
                document.tickerbg.top=topposition
                document.tickerbg.document.write(messagebackground)
                document.tickerbg.document.close()
        document.ticker.visibility="visible"
        document.tickerbg.visibility="visible"
                showticker()
        }
}

function handlerMM(e){
        x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX
        y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY
}

if (document.layers){
        document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = handlerMM;

//-->
</script>


<!------------------------- 여기까지 ------------------------------------>

</head>

<body>

<!---- [2단계] 아래의 방법으로 <BODY> 와 <BODY> 태그 사이에 붙여 넣으세요 --->

<div id="tickerbg" style="position:absolute;"></div>
<div id="ticker" style="position:absolute;"></div>

<a href="#" onMouseOver="showmessage('자바스크립트 소스뱅크 입니다')" onMouseOut="hideticker()" target="_blank">소스창고</a> |

<a href="#" onMouseOver="showmessage('인터넷 커뮤니테이션 포털')" onMouseOut="hideticker()" target="_blank">한메일 커뮤니케이션</a> |

<a href="#" onMouseOver="showmessage('네이버 검색엔진 페이지')" onMouseOut="hideticker()" target="_blank">네이버 홈페이지</a>


<!------------------------- 여기까지 ------------------------------------>

</body>
</html>