본문 바로가기
카테고리 없음

[자바스크립트] 툴팁 (풍선 도움말) 만들기

sophie™ 2010. 4. 25. 11:05
<body>와 </body>부분에 넣어줍니다.
*****************************************
<div style="position:absolute;z-index:1;visibility:hide" id="overDiv"></div>
<script language="JavaScript">
<!--
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
if (ie4) {
if (navigator.userAgent.indexOf('MSIE 5')>0) {
ie5 = true;
}
else {
ie5 = false;
}
}
else {
ie5 = false;
}
var x = 0;
var y = 0;
var snow = 0;
var sw = 0;
var cnt = 0;
var dir = 1;
if ( (ns4) || (ie4) ) {
if (ns4) over = document.overDiv
if (ie4) over = overDiv.style
document.onmousemove = mouseMove
if (ns4) document.captureEvents(Event.MOUSEMOVE)
}
function drc(text, title, osy) {
dtc(1, text, title, osy);
}
function dlc(text, title, osy) {
dtc(0, text, title, osy);
}
function dcc(text, title, osy) {
dtc(2, text, title, osy);
}
function nd() {
if ( cnt >= 1 ) { sw = 0 };
if ( (ns4) || (ie4) ) {
if ( sw == 0 ) {
snow = 0;
hideObject(over);
}
else {
cnt++;
}
}
}
function dtc(d, text, title, osy) {
txt = text
layerWrite(txt);
dir = d;
offsety = osy;
disp();
}
function disp() {
if ( (ns4) || (ie4) ) {
if (snow == 0) {
if (dir == 2) {
moveTo(over,x,y+10);
}
if (dir == 1) {
moveTo(over,x,y+10);
}
if (dir == 0) {
moveTo(over,x,y+10);
}
showObject(over);
snow = 1;
}
}
}
function mouseMove(e) {
if (ns4) {x=e.pageX; y=e.pageY;
}
if (ie4) {x=event.x; y=event.y;
}
if (ie5) {x=event.x+document.body.scrollLeft; y=event.y+document.body.scrollTop;
}
if (snow) {
if (dir == 2) {
moveTo(over,x,y+10);
}
if (dir == 1) {
moveTo(over,x,y+10);
}
if (dir == 0) {
moveTo(over,x,y+10);
}
}
}
function cClick() {
hideObject(over);
sw=0;
}
function layerWrite(txt) {
if (ns4) {
var lyr = document.overDiv.document
lyr.write(txt)
lyr.close()
}
else if (ie4) document.all["overDiv"].innerHTML = txt
}
function showObject(obj) {
if (ns4) obj.visibility = "show"
else if (ie4) obj.visibility = "visible"
}
function hideObject(obj) {
if (ns4) obj.visibility = "hide"
else if (ie4) obj.visibility = "hidden"
}
function moveTo(obj,xL,yL) {
obj.left = xL
obj.top = yL
}
//-->
</script>



[무테] - <body>이하에 넣어줍니다.
*****************************************
<a href="#" onmouseover="dcc('<div style=margin-left:10;margin-top:10>풍선 도움말</div>','','20')" onmouseout="nd()">무테 툴팁</a>

[Marquee] - <body>이하에 넣어줍니다.
*****************************************
<a href="#" onMouseOver="dcc('<div style=margin-left:10;margin-top:10><table border=1 cellspacing=0 cellpadding=3 width=150 bordercolor=navy bgcolor=#ffffff><tr><td><marquee behavior=alternate width=250>안녕하세요~</marquee></td></tr></table></div>','','20')" onMouseOut="nd()">Marquee 툴팁</a>

[테두리] - <body>이하에 넣어줍니다.
*****************************************
<a href="#" onMouseOver="dcc('<div style=margin-left:10;margin-top:10><table border=1 cellspacing=0 cellpadding=3 width=150 bordercolor=navy bgcolor=#ffffff><tr><td>테두리툴팁?</td></tr></table></div>','','20')" onMouseOut="nd()">테두리 툴팁</a>

  

'전체' Related Articles

티스토리툴바