인터넷정보

그라데이션 툴팁 만들기

알 수 없는 사용자 2007. 10. 17. 18:02


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>

반응형