일상 기록 창고

ToolTip ( 말풍선 ) 만들기 본문

프로그래밍/자바스크립트

ToolTip ( 말풍선 ) 만들기

Crazy_Kong 2007. 4. 13. 16:25

실로 오래간만의 업데이트 ㅡ_ㅡ;;
외국 사이트에서 툴팁 만든 걸 보고 함 만들어 봤다.
그 소스 너무 길어서 분석의 귀차니즘으로 대충 만들어 봤다 ㅡㅡ;
/*    
    작동되게만 한 것이니 발생한 모든 문제는 사용자에게 ㅡ_ㅡ;;
*/

<br>
<script type="text/javascript">
 var img_name = null;
 function doTooltip(e){
  document.onmousemove=doTooltip;
  var mouseX, mouseY, table;
  var IeNe = navigator.appVersion.indexOf("MSIE") > -1 ? true : false;

  mouseX = (IeNe)? window.event.clientX : e.pageX;
  mouseY = (IeNe)? window.event.clientY : e.pageY;

  table = '<div class="tooltip">' + img_name + '</div>'

  document.getElementById("viewer").style.left = mouseX + 10;
  document.getElementById("viewer").style.top = mouseY + 10;
  document.getElementById("viewer").innerHTML = table;
 }

 function tool(e, val){
  img_name = val;
  doTooltip(e);
 }

 function hideTip(){
  document.onmousemove=null;
  document.getElementById("viewer").innerHTML = '';
 }
</script>

<div id="viewer" style="position: absolute; top: 0pt; left: 0pt;"></div>
<a href="#" onMouseOver="tool(event, 'good')" onMouseOut="hideTip()">Link 1</a>
<a href="#" onMouseOver="tool(event, 'good11')" onMouseOut="hideTip()">Link 2</a>


위 소스 그대로 사용만 하시면 별 문제는 없지만, 프레임으로 나눈 경우 위치가 잘 안 맞는 문제 발생
통 프레임에선 별 문제 없음..

'프로그래밍 > 자바스크립트' 카테고리의 다른 글

체크 박스 체크 유무 확인.  (0) 2007.09.11
테이블에 row 추가 하기  (0) 2007.09.04
동적 셀렉트 박스 추가 버전.. (생성, 삭제)  (0) 2006.05.17
ul, dl 태그  (0) 2006.04.27
파일 확장자 구하기  (0) 2006.04.27