타이틀과 내용을 지정가능한 풍선도움말 happycgi

회원가입

출석체크

마이페이지

CGIMALL

jquery , CSS , PHP , Javascript , 무료폰트 , ASP

홈 > JAVASCRIPT > javascript 소스창고 > 마우스효과 > 타이틀과 내용을 지정가능한 풍선도움말 상세정보

클라우드태그

Javascript

PHP

asp

CSS

html

mysql

jquery

image

Mobile

API

slide

게시판

메뉴

현재접속자 명

타이틀과 내용을 지정가능한 풍선도움말

해피팀

네티즌

소스분류

마우스효과

다운로드 횟수

707 회

간단설명

타이틀과 내용을 지정하여 해당 링크된텍스트에 마우스오버하면 지정한내용이 풍선도움말에 나타납니다.

평가하기

<html>
<head>
    <title>http://www.blueb.co.kr</title>
</head>
<body>

<DIV ID="topdeck" style="position : absolute;visibility : hidden;">&nbsp;</DIV>

<SCRIPT>
var nav = (document.layers); 
var iex = (document.all);
var skn = (nav) ? document.topdeck : topdeck.style;
if (nav) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = get_mouse;

function pop(msg,bak,width,titlemsg) {
var content ="<TABLE WIDTH="+width+" BORDER=0 CELLPADDING=1 CELLSPACING=0 BGCOLOR=#505050><TR><TD>"+
             "<TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=0><TR align=center height=22><TD><B><font color=white>"+titlemsg+"</B></TD></TR></TABLE>"+
             "<TABLE WIDTH=100% BORDER=0 CELLPADDING=5 CELLSPACING=0 BGCOLOR="+bak+"><TR><TD><FONT COLOR=#000000>"+msg+"</FONT></TD></TR></TABLE></TD></TR></TABLE>";

  if (nav) { 
    skn.document.write(content); 
      skn.document.close();
      skn.visibility = "visible";
  }
    else if (iex) {
      document.all("topdeck").innerHTML = content;
      skn.visibility = "visible";  
  }
}

function get_mouse(e) {
    var x = (nav) ? e.pageX : event.x+document.body.scrollLeft; 
    var y = (nav) ? e.pageY : event.y+document.body.scrollTop;
    skn.left = x - 0;
    skn.top  = y+20;
}

function kill() {
  skn.visibility = "hidden";
}
</SCRIPT>

옵션내용은 ONMOUSEOVER="pop('1','2','3','4')";
<ol>
<li>풍선도움말 내용을 입력
<li>풍선도움말 배경 색상 지정
<li>풍선도움말 가로사이즈 지정
<li>풍선도움말 타이틀 내용
</ol>

<a href="http://wsabstract.com" ONMOUSEOVER="pop('여기에 풍선도움말 내용을 입력하세요.','lightgreen','200','title1')"; ONMOUSEOUT="kill()">풍선도움말 1</a>
<a href="http://webmonkey.com" ONMOUSEOVER="pop('여기에 풍선도움말 내용을 입력하세요.','lightblue','300','title2')"; ONMOUSEOUT="kill()">풍선도움말 2</a>

</head>
</body>