인터넷정보

마우스 오버시 풍선 도움말(툴팁)

알 수 없는 사용자 2007. 10. 17. 13:54

http://oxtag.com/html/ex/tool_tip.html


<html>
<head>
<title>♡ 카멜롯™의 소스천국 태그피아 ♡</title>

<!-- 아래는 풍선 도움말의 환경 설정 부분입니다. 원하시는 것으로 수정해서 사용하세요. -->
<style type="text/css">
<!--
.tipElm {
 cursor:help;
 text-decoration:underline;
 font-size:9pt;
 font-family:돋움;
 color: darkblue;
}
BODY {
 font-size:9pt;
 font-family:굴림;

.box {
 font-size:9pt;
 font-family:돋움;
 color:black;
 border:1 black solid;
 background:#FBC84D;
 padding:5 5;
}
 
-->
</style>


<!-- 함수 부분 -->
<script language="JavaScript">
<!-- 
var n = (document.layers) ? 1:0;
var ie = (document.all) ? 1:0;

function overTip(boxObj) {
 if (ie) {
         boxObj.style.visibility = "visible";
         boxObj.filters.item(0).stop();
 }         
}
function outTip(boxObj) {
 if (ie) {
  boxObj.style.visibility = "visible";
  boxObj.filters.item(0).transition = 12;
  boxObj.filters.item(0).apply();
  boxObj.style.visibility = "hidden";
  boxObj.filters.item(0).play();
 }
}
//-->
</script>
</head>
<body>

<font color=teal size=2>
마우스를 아래 글자에 올려보세요.<br>
오른 클릭해서 소스 퍼가세요.<br><br></font>

<!--
    아래는 마우스 오버시 나오는 풍선 도움말을 넣는 것입니다.
    현재 span 태그에 넣었지만 링크 태그인 a로 해두 됩니당.
    span을 a href=링크주소로 바꿔주시구요. 이줄 끝의 </span>을 </a>로 바꾸시면 되요.
    <span class="tipElm" onMouseOver="overTip(css)" onMouseOut="outTip(css)">카멜롯™의 실체</span> 요걸 아래처럼
    <a href="링크주소나 문서의 URL" class="tipElm" onMouseOver="overTip(css)" onMouseOut="outTip(css)">카멜롯™의 실체</a>
-->
   
<span class="tipElm" onMouseOver="overTip(css)" onMouseOut="outTip(css)">카멜롯™의 실체</span>

<div id="css" class="box" style="position:absolute; z-index:20; width:410; filter:revealTrans(duration=1); visibility:hidden;">
<font color=teal>Camelot™</font>은? 태그에 대해서 무자게 허접이라는 사실을 숨기구 고수인양 행새를 하는 넘이라 할 수 있다. 하지만 자신이 아는 한도내에서는
모든 것을 아낌없이 주려고 노력한다. 한마디루 말하면 <font color=red>차칸넘</font>이라 정의 할 수 있는 꽤 괜찮은 녀석이다
.......................아닌가??? 퍽!.....................^^*
</div>            



</body>
</html>

반응형