묻고답하기
풍선도움말 스크립트 호환성에 대해서...
2003.03.29 20:54
http://myhome.hanafos.com/~birdy78/tooltip.htm풍선도움말 스크립트를 다음과 같이 만들어봤습니다.
그런데 넷스케이프 7.0이상에서 보니 에러가 나더군요...
넷스케이프와 호환되도록 조언 부탁드립니다.
또한 그밖에 문법상 오류도 지적바랍니다.
<!--예제 시작-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<style type="text/css">
<!--
//-->
</style>
<title></title>
</head>
<body>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<div onmouseover="ToolTip('<s>메롱</s>이당~<br><b style='color:blue;'>연습</b>입니다.<br><u>팝업스크립트</u>입니다.')">마우스를 올려보세요</div><br>
<div onmouseover="ToolTip('테스트중입니다.')">테스트중...</div>
<br><br><br><br><br><br><br><br><br>
<script type="text/javascript">
<!--
/////////////////////////////////////////////////////////////////
/* 환경설정 콘솔 시작 */
/////////////////////////////////////////////////////////////////
Width = ""; // 가로크기
Height = ""; // 세로크기
BorderSize = "1px"; // 테두리굵기
BorderType = "solid"; // 테두리모양(none/dotted/dashed/solid/double/groove/ridge/inset/outset)
BorderColor = "rgb(82,156,255)"; // 테두리색상
Font = "ttche,webfont,verdana,굴림"; // 글꼴종류
FontSize = "9pt"; // 글꼴크기
FontColor = "rgb(82,156,255)"; // 글꼴색상
BackgroundColor = "rgb(181,231,247)"; // 배경색상
Cellpadding = "1px 2px 1px 2px"; // 여백크기(상,우,하,좌)
Align = "left"; // 수평정렬방식(left/center/right)
Valign = "middle"; // 수직정렬방식(top/middle/bottom)
Filter = "90"; // 투명도(0~100)
Xposition = 5; // 커서와의 거리(X축)
Yposition = 20; // 커서와의 거리(Y축)
BoxShadow = "off"; // 그림자효과(on/off)
/////////////////////////////////////////////////////////////////
/* 환경설정 콘솔 종료 */
/////////////////////////////////////////////////////////////////
/* 아랫부분은 수정하지 마세요. */
var ShaSee = (BoxShadow=="on") ? "filter:progid:DXImageTransform.Microsoft.Shadow(color=#777777, Direction=135, Strength=3)" : "";
document.write("<div id='insertLayer' style='"+ShaSee+"; z-index:777; position:absolute; display:none; ! important;'></div>");
var wid = Width; var heg = Height;
var bordersize = BorderSize; var bodercolor = BorderColor; var bordertype = BorderType;
var size = FontSize; var fon = FontColor; var f_ = Font;
var bak = BackgroundColor;
var pad = Cellpadding;
var ali = Align; var vali = Valign;
var filter_ = Filter;
var Xmargin = Xposition; var Ymargin = Yposition;
var IE = (document.all) ? true:false;
var NN4 = (document.layers) ? true:false;
var NN6 = (!document.all && document.getElementById) ? true:false;
var skn = (IE) ? document.all('insertLayer').style : (NN6) ? document.getElementById('insertLayer').style : document.layers['insertLayer'];
document.onmousemove = Get_Mouse; document.onmouseout = Hide_Layer;
if (NN4) { document.captureEvents(Event.MOUSEMOVE | Event.MOUSEOUT); window.onmousemove = Get_Mouse; window.onmouseout = Hide_Layer; }
function Get_Mouse(e)
{
if (IE)
{
if (window.event.clientX + insertLayer.offsetWidth + Xmargin < document.body.clientWidth)
skn.left = window.event.clientX + document.body.scrollLeft + Xmargin + "px";
else skn.left = window.event.clientX + document.body.scrollLeft - Xmargin - insertLayer.offsetWidth + "px";
if (window.event.clientY + insertLayer.offsetHeight + Ymargin < document.body.clientHeight)
skn.top = window.event.clientY + document.body.scrollTop + Ymargin + "px";
else skn.top = window.event.clientY + document.body.scrollTop - insertLayer.offsetHeight - Ymargin + "px";
}
else if (NN4 || NN6)
{
if (e.pageX + insertLayer.document.width + Xmargin < window.innerWidth)
skn.left = e.pageX + Xmargin + "px";
else skn.left = e.pageX - Xmargin - insertLayer.document.width + "px";
if (e.pageY + insertLayer.document.height + Ymargin < window.innerHeight)
skn.top = e.pageY + Ymargin + "px";
else skn.top = e.pageY - insertLayer.document.height - Ymargin + "px";
}
}
function ToolTip(msg)
{
var cOnTeNt ="<TABLE STYLE='width:"+wid+"; height:"+heg+"; background-color:"+bak+"; border:"+bordersize+" "+bordertype+" "+bodercolor+"; filter:alpha(Opacity="+filter_+");table-layout:auto; ! important;' CELLPADDING='0'+ '+ ' CELLSPACING='0' BORDER='0'><TR><TD STYLE='color:"+fon+"; font:"+size+" "+f_+"; padding:"+pad+"; text-align:"+ali+"; vertical-align:"+vali+"; white-space:nowrap; ! important;'>"+msg+"</TD></TR></TABLE>";
if (IE)
{
document.all('insertLayer').innerHTML = cOnTeNt;
skn.display = "block";
// skn.visibility = "visible";
}
else if (NN6)
{
document.getElementById('insertLayer').innerHTML = cOnTeNt;
skn.display = "block";
// skn.visibility = "visible";
}
else if (NN4)
{
skn.document.open();
skn.document.write(cOnTeNt);
skn.display = "block";
// skn.visibility = "show";
skn.document.close();
}
Get_Mouse();
}
function Hide_Layer()
{
if (IE || NN6)
{
skn.display = "none";
// skn.visibility = "hidden";
}
else if (NN4)
{
skn.display = "none";
// skn.visibility = "hide";
}
}
/////////////////////////////
/* Tooltip script v1.2b */
/* http://birdy.na.fm/ */
/* birdy@birdy.na.fm */
/* Designed by BIRDY™ */
/////////////////////////////
//-->
</script>
</body>
</html>
<!--예제 종료-->
그런데 넷스케이프 7.0이상에서 보니 에러가 나더군요...
넷스케이프와 호환되도록 조언 부탁드립니다.
또한 그밖에 문법상 오류도 지적바랍니다.
<!--예제 시작-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<style type="text/css">
<!--
//-->
</style>
<title></title>
</head>
<body>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<div onmouseover="ToolTip('<s>메롱</s>이당~<br><b style='color:blue;'>연습</b>입니다.<br><u>팝업스크립트</u>입니다.')">마우스를 올려보세요</div><br>
<div onmouseover="ToolTip('테스트중입니다.')">테스트중...</div>
<br><br><br><br><br><br><br><br><br>
<script type="text/javascript">
<!--
/////////////////////////////////////////////////////////////////
/* 환경설정 콘솔 시작 */
/////////////////////////////////////////////////////////////////
Width = ""; // 가로크기
Height = ""; // 세로크기
BorderSize = "1px"; // 테두리굵기
BorderType = "solid"; // 테두리모양(none/dotted/dashed/solid/double/groove/ridge/inset/outset)
BorderColor = "rgb(82,156,255)"; // 테두리색상
Font = "ttche,webfont,verdana,굴림"; // 글꼴종류
FontSize = "9pt"; // 글꼴크기
FontColor = "rgb(82,156,255)"; // 글꼴색상
BackgroundColor = "rgb(181,231,247)"; // 배경색상
Cellpadding = "1px 2px 1px 2px"; // 여백크기(상,우,하,좌)
Align = "left"; // 수평정렬방식(left/center/right)
Valign = "middle"; // 수직정렬방식(top/middle/bottom)
Filter = "90"; // 투명도(0~100)
Xposition = 5; // 커서와의 거리(X축)
Yposition = 20; // 커서와의 거리(Y축)
BoxShadow = "off"; // 그림자효과(on/off)
/////////////////////////////////////////////////////////////////
/* 환경설정 콘솔 종료 */
/////////////////////////////////////////////////////////////////
/* 아랫부분은 수정하지 마세요. */
var ShaSee = (BoxShadow=="on") ? "filter:progid:DXImageTransform.Microsoft.Shadow(color=#777777, Direction=135, Strength=3)" : "";
document.write("<div id='insertLayer' style='"+ShaSee+"; z-index:777; position:absolute; display:none; ! important;'></div>");
var wid = Width; var heg = Height;
var bordersize = BorderSize; var bodercolor = BorderColor; var bordertype = BorderType;
var size = FontSize; var fon = FontColor; var f_ = Font;
var bak = BackgroundColor;
var pad = Cellpadding;
var ali = Align; var vali = Valign;
var filter_ = Filter;
var Xmargin = Xposition; var Ymargin = Yposition;
var IE = (document.all) ? true:false;
var NN4 = (document.layers) ? true:false;
var NN6 = (!document.all && document.getElementById) ? true:false;
var skn = (IE) ? document.all('insertLayer').style : (NN6) ? document.getElementById('insertLayer').style : document.layers['insertLayer'];
document.onmousemove = Get_Mouse; document.onmouseout = Hide_Layer;
if (NN4) { document.captureEvents(Event.MOUSEMOVE | Event.MOUSEOUT); window.onmousemove = Get_Mouse; window.onmouseout = Hide_Layer; }
function Get_Mouse(e)
{
if (IE)
{
if (window.event.clientX + insertLayer.offsetWidth + Xmargin < document.body.clientWidth)
skn.left = window.event.clientX + document.body.scrollLeft + Xmargin + "px";
else skn.left = window.event.clientX + document.body.scrollLeft - Xmargin - insertLayer.offsetWidth + "px";
if (window.event.clientY + insertLayer.offsetHeight + Ymargin < document.body.clientHeight)
skn.top = window.event.clientY + document.body.scrollTop + Ymargin + "px";
else skn.top = window.event.clientY + document.body.scrollTop - insertLayer.offsetHeight - Ymargin + "px";
}
else if (NN4 || NN6)
{
if (e.pageX + insertLayer.document.width + Xmargin < window.innerWidth)
skn.left = e.pageX + Xmargin + "px";
else skn.left = e.pageX - Xmargin - insertLayer.document.width + "px";
if (e.pageY + insertLayer.document.height + Ymargin < window.innerHeight)
skn.top = e.pageY + Ymargin + "px";
else skn.top = e.pageY - insertLayer.document.height - Ymargin + "px";
}
}
function ToolTip(msg)
{
var cOnTeNt ="<TABLE STYLE='width:"+wid+"; height:"+heg+"; background-color:"+bak+"; border:"+bordersize+" "+bordertype+" "+bodercolor+"; filter:alpha(Opacity="+filter_+");table-layout:auto; ! important;' CELLPADDING='0'+ '+ ' CELLSPACING='0' BORDER='0'><TR><TD STYLE='color:"+fon+"; font:"+size+" "+f_+"; padding:"+pad+"; text-align:"+ali+"; vertical-align:"+vali+"; white-space:nowrap; ! important;'>"+msg+"</TD></TR></TABLE>";
if (IE)
{
document.all('insertLayer').innerHTML = cOnTeNt;
skn.display = "block";
// skn.visibility = "visible";
}
else if (NN6)
{
document.getElementById('insertLayer').innerHTML = cOnTeNt;
skn.display = "block";
// skn.visibility = "visible";
}
else if (NN4)
{
skn.document.open();
skn.document.write(cOnTeNt);
skn.display = "block";
// skn.visibility = "show";
skn.document.close();
}
Get_Mouse();
}
function Hide_Layer()
{
if (IE || NN6)
{
skn.display = "none";
// skn.visibility = "hidden";
}
else if (NN4)
{
skn.display = "none";
// skn.visibility = "hide";
}
}
/////////////////////////////
/* Tooltip script v1.2b */
/* http://birdy.na.fm/ */
/* birdy@birdy.na.fm */
/* Designed by BIRDY™ */
/////////////////////////////
//-->
</script>
</body>
</html>
<!--예제 종료-->