일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
- 리플리케이션 오류
- xcache
- 날짜계산
- openfire
- node 이미지 저장
- 태권브이
- 이미지주소추출
- 재귀쿼리
- set foreign_key
- 외래키
- php
- 특정 패키지 업데이트 중지 / 해제
- 앞으로 가기
- 워드프레스한글팩
- 훼인
- php-fpm
- security.limit_extensions
- mongodb
- ssmtp
- no key alg
- 쁘띠프랑스
- node.js
- MySQL
- simplexml_load_filesimplexml
- 태권v
- quota
- strtotime
- 중독 게임
- 뒤로 가기
- rsync
- Today
- Total
일상 기록 창고
ToolTip ( 말풍선 ) 만들기 본문
실로 오래간만의 업데이트 ㅡ_ㅡ;;
외국 사이트에서 툴팁 만든 걸 보고 함 만들어 봤다.
그 소스 너무 길어서 분석의 귀차니즘으로 대충 만들어 봤다 ㅡㅡ;
/*
작동되게만 한 것이니 발생한 모든 문제는 사용자에게 ㅡ_ㅡ;;
*/
<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 |