미리보기 : http://oxtag.com/html/ex/tool_tip2.html
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<style>
v\:*{behavior:url(#default#VML);}
td{font-size:9pt}
</style>
<script language=javascript>
function tipshow(k){
var t=new Array();
t[0]="툴팁1의 내용";
t[1]="툴팁2의 내용";
t[2]="툴팁3의 내용";
txt.innerText=t[k];
tip.style.pixelTop=event.y + document.body.scrollTop- 50;//툴팁의 y위치
tip.style.pixelLeft=event.x + document.body.scrollLeft - 10;//툴팁의 x
//위치
//document.body.scrollTop 과 document.body.scrollLeft 는 문서가 스크롤 된 상태에
//서는 반드시 필요한 값입니다. 문서에 스크롤바가 나타나지 않는다면 두속성은 쓰지
//않아도 됩니다.
tip.style.visibility='visible';
}
function tiphide(){
tip.style.visibility='hidden';
}
</script>
</head>
<body>
<br><br><br><br>
<span onmouseover=tipshow(0) onmouseout=tiphide() style='cursor:hand'>툴팁1</span>
<br><br><br>
<span onmouseover=tipshow(1) onmouseout=tiphide() style='cursor:hand'>툴팁2</span>
<br><br><br>
<span onmouseover=tipshow(2) onmouseout=tiphide() style='cursor:hand'>툴팁3</span>
<!--
4개의 타원의 위치는 div 의 상단 왼쪽을 기준으로 정하는 위치입니다
타원들이 모두 div 내에 있으므로 타원들간의 위치는 고정되어있습니다
-->
<div id="tip" style="position:absolute;visibility:hidden;width:200;height:50;">
<v:oval fillcolor="#cc9999" style="position:absolute;top:0;left:50;z-index:1;width:150;height:40"> <!-- 네번째 타원형 툴팁이 출력되는 부분 (배경등의 컬러를 여기서 수정) -->
<v:textbox id=txt style="font-size:12px;font-family:verdana;"></v:textbox>
</v:oval>
<v:oval fillcolor="#cccc99" style="position:absolute;top:30;left:40;z-index:2;width:50;height:20"> <!-- 세번째 작은 타원형 (배경등의 컬러를 여기서 수정) -->
</v:oval>
<v:oval style="position:absolute;top:40;left:30;z-index:3;width:20;height:10"> <!-- 두번째 작은 타원형 (배경등의 컬러를 여기서 수정) -->
</v:oval>
<v:oval style="position:absolute;top:45;left:25;z-index:4;width:10;height:5"> <!-- 제일 작은 타원형 (배경등의 컬러를 여기서 수정) -->
</v:oval>
</div>
<br><br><br>
vml을 이용해서 타원형의 풍선도움말을 만들수있습니다<br><br>
물론 이미지를 써도 되지만 코드로만 이것을 해보고 싶은사람에게는 <br><br>
괞찬을 것 같아서리...<br><br>
코드는 소스 보기를 하셔서 보시기 바랍니다. <br><br>
단 익스플로러 5.0 이상 에서만 가능합니다<br><br>
물론 아래에서 툴팁의 내용뿐만아니라 풍선도움말의 배경색도 배열로 처리해서<br><br>
각각 다른색을 사용할수도 있습니다<br><br>
관심이 있으시다면 소스코드를 한번 복사해서 실행시켜보세요<br><br>
모양을 더 예쁘게 꾸미는것은 각자의 몫이라고 봅니다.
</body>
</html>
'인터넷관련' 카테고리의 다른 글
| gd 추가하기 (0) | 2008.01.18 |
|---|---|
| PHP로 사용용량, 남은용량 알아내기 (0) | 2008.01.18 |
| PHP로 DB 사용용량, 남은용량 알아내기. (0) | 2008.01.18 |
| 마퀴태그를 이용해서 텍스트 멋지게 꾸미기 (0) | 2008.01.18 |
| dotted 이미지 없이 링크에 점선 밑줄 나타내는 태그 (0) | 2008.01.18 |
| 음악 플레이 멈춤 기능 (0) | 2008.01.18 |
| 파일업로드 삭제 클래스 (0) | 2008.01.18 |
| 디렉토리..class.sh_dir_cls.inc (0) | 2008.01.18 |
