http://oxtag.com/html/ex/tooltip.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="content-type" content="text/html; charset=euc-kr">
<TITLE> </TITLE>
<style>
body,span,td,div {font-size:9pt;}
</style>
<!---- 아래의 소스코드를 <HEAD>와 </HEAD> 사이에 붙여 넣으세요 ---->
<SCRIPT>
var popWin = window.createPopup();
function callme()
{
if (event.srcElement.id=="first")
popWin.document.body.innerHTML = ofirst.innerHTML;
else if (event.srcElement.id=="second"){
popWin.document.body.innerHTML = osecond.innerHTML;}
var popupBody = popWin.document.body;
popWin.show(0, 0, 300, 50);
var realHeight = popupBody.scrollHeight;
popWin.hide();
popWin.show(0, 15 , 300, realHeight, event.srcElement);
}
</SCRIPT>
<!------------------------- 여기까지 ---------------------------------->
</HEAD>
<BODY>
<!---- 아래의 방법으로 원하는 위치에 복사 해 넣으세요. 마우스 오버시 나타나게 할려면 ONCLICK 대신 onmouseover를 사용. ------------------>
효과를 보시려면 <b><SPAN ID="first" ONCLICK="callme();" style=cursor:e-resize;>여기</SPAN></b> 나 <b><SPAN ID="second" ONCLICK="callme();" style=cursor:e-resize>여기</SPAN></b>를 클릭 하세요.
<DIV STYLE="display:none;">
<DIV ID="ofirst">
<DIV STYLE="background:#ffffcc; border:1px solid black; padding:4px; width:300px; font-family:verdana; font-size:70%; filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='yellowgreen', EndColorStr='#FFFFFF')">
<B>첫번째 풍선도움말</B>
<BR>
그라데이션 필터를 사용하였답니다
</DIV>
</DIV>
<DIV ID="osecond">
<DIV STYLE="background:#ffffcc; border:1px solid black; padding:4px; font-family:verdana; font-size:70%; width:300px; filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#0099FF', EndColorStr='#00FFFF')">
<B>두번째 풍선도움말</B>
<BR>
역시 그라데이션을 입혔네요<br>
여러가지 색상을 입혀 멋지게 꾸며 보세요<br>
빠빠이~!
</DIV>
</DIV>
</DIV>
<!------------------------- 여기까지 ---------------------------------->
</BODY>
</HTML>
'인터넷정보' 카테고리의 다른 글
| 앞으로, 뒤로 가기를 마우스 휠로. (0) | 2007.10.17 |
|---|---|
| 프레임 화면이 아닌 페이지 접근시 차단이나 다른 페이지로 이동 (0) | 2007.10.17 |
| 프레임 화면이 아닌 페이지 접근시 차단이나 다른 페이지로 이동 (0) | 2007.10.17 |
| 접속시마다 백그라운드 이미지 랜덤으로 바꾸기 (0) | 2007.10.17 |
| 접속시마다 백그라운드 이미지 랜덤으로 바꾸기 (0) | 2007.10.17 |
| 그라데이션 툴팁 만들기 (0) | 2007.10.17 |
| 공지용 하루에 한번씩 새창(?) 열기. (0) | 2007.10.17 |
| 공지용 하루에 한번씩 새창(?) 열기. (0) | 2007.10.17 |
| toggle(토글)... 숨겼다 보여줬다... (0) | 2007.10.17 |
| toggle(토글)... 숨겼다 보여줬다... (0) | 2007.10.17 |