인터넷정보

마우스 오버시 툴팁 - 풍선 도움말

알 수 없는 사용자 2007. 10. 18. 13:59
<script>
/* 마우스 이동 이벤트 등록*/
document.onmousemove = mouse_move
/**************************/

//사용 예시 : onMouseOver=\"visible_tooltip('하하히하하');\" onMouseOut=\"hidden_tooltip();\"

var mouse_x;
var mouse_y;
var tooltip_visible_flag;
var tooltip_text;

document.write("<div id=tooltip_layer style='position:absolute; visibility: hidden; left:0px; top:0px; z-index:1'>");
document.write("<table border=0 cellspacing=0 cellpadding=0 align=center style='border:1px #999999 solid' bgcolor=FFFFFF>");
document.write("<tr><td colspan=3></td></tr>");
document.write("<tr height=20><td width=10></td><td bgcolor=FFFFFF><font size=2 id=tooltip_text></font></td><td width=10></td></tr>");
document.write("<tr><td colspan=3></td></tr>");
document.write("</table>");
document.write("</div>");


/*
document.write("<table border=0 cellspacing=0 cellpadding=0 align=center>");
document.write("<tr height=9><td valign=bottom><img src=http://inc-image.muz.co.kr/tool_tip/left_top.gif></td><td background=http://inc-image.muz.co.kr/tool_tip/center_top.gif></td><td width=14 background=http://inc-image.muz.co.kr/tool_tip/center_top.gif></td><td valign=bottom><img src=http://inc-image.muz.co.kr/tool_tip/right_top.gif></td></tr>");
document.write("<tr height=2><td background=http://inc-image.muz.co.kr/tool_tip/left_left.gif></td><td bgcolor=FFFFFF></td><td width=14 bgcolor=FFFFFF></td><td background=http://inc-image.muz.co.kr/tool_tip/right_right.gif></td></tr>");
document.write("<tr height=20><td background=http://inc-image.muz.co.kr/tool_tip/left_left.gif></td><td bgcolor=FFFFFF><font size=2 id=tooltip_text></font></td><td width=14 bgcolor=FFFFFF></td><td background=http://inc-image.muz.co.kr/tool_tip/right_right.gif></td></tr>");
document.write("<tr height=9><td><img src=http://inc-image.muz.co.kr/tool_tip/left_bottom.gif></td><td background=http://inc-image.muz.co.kr/tool_tip/center_bottom.gif></td><td width=14 background=http://inc-image.muz.co.kr/tool_tip/center_bottom.gif></td><td valign=top><img src=http://inc-image.muz.co.kr/tool_tip/right_bottom.gif></td></tr>");
document.write("</table>");*/


function move_tooltip()
{
        document.all.tooltip_layer.style.left = mouse_x-14;
        document.all.tooltip_layer.style.top = mouse_y-35;        
}

function visible_tooltip(str,mode)
{
        if(mode=='chart')        return;
       
        move_tooltip();
               
        document.all.tooltip_text.innerHTML=str;        
        document.all.tooltip_layer.style.visibility='visible';        
       
        tooltip_visible_flag=1;
        tooltip_text=str;
}

function hidden_tooltip()
{
        document.all.tooltip_layer.style.visibility='hidden';
       
        tooltip_visible_flag=0;
}

function mouse_move(E)
{        
        mouse_x=event.x+document.body.scrollLeft;
        mouse_y=event.y+document.body.scrollTop;        
        //if(tooltip_visible_flag) move_tooltip();
}
</script>


<img src=http://www.muz.co.kr/inc/images/music_button07_30s.gif width=18 height=18 border=0 onMouseOver="visible_tooltip('30초 듣기');" onMouseOut="hidden_tooltip();">
반응형