<br><br><br><br><br><br><br><br><br>
<a href="javascript://" ommouseover='cnj_show()' ommouseout='cnj_hide()'>링크에 레이어 툴팁 효과 => CGI 와 JavaScript가 만났을 때 = C.n.J</a>
<div id="cnj_str" style="width:200px; height:200px; position:absolute; left:30px; top:19px; z-index:1; visibility:hidden;">
<table width="187" cellpadding="5" cellspacing="1" border="0" bgcolor="#cccccc">
<tr><td width="168" bgcolor="white">
링크에 레이어 툴팁 효과<br>
CGI 와 JavaScript가 만났을 때 = C.n.J<br>
http://www.CginJs.Com<br>
</td></tr>
</table>
</div>
<script language='JavaScript'>
<!-- //////////////////////////////////////////////////////////////
//*****************************************************************
// Web Site: http://www.CginJs.Com
// CGI 와 JavaScript가 만났을 때 = C.n.J ☞ http://www.CginJs.Com
// CGI 와 JavaScript가 만났을 때 = C.n.J ☞ webmaster@CginJs.Com
// C.n.J 자바스크립트 자동 생성 마법사 ☞ http://www.CginJs.Com
// C.n.J 자바스크립트(JavaScript) 가이드 ☞ http://www.CginJs.Com
// C.n.J CSS(Cascading Style Sheet) 가이드 ☞ http://www.CginJs.Com
// Editer : Web Site: http://www.CginJs.Com
//*****************************************************************
/////////////////////////////////////////////////////////////// -->
d0cument.write('<st'+'yle>');
d0cument.write('td {font-size:12px; font-family:굴림; text-decoration:none; }');
d0cument.write('A:link,A:active,A:visited{text-decoration:none;font-size:12PX;color:#333333;}');
d0cument.write('A:hover {text-decoration:none; color:ff9900}');
d0cument.write('font { font-size: 9pt; }');
d0cument.write('.cnj_input {background-color:rgb(240,240,240);border-width:1pt; height:16pt;cursor:hand;}');
d0cument.write('.cnj_input2 {border-width:1; border-color:rgb(204,204,204); border-style:solid;cursor:hand;}');
d0cument.write('.cnj_input3 { border-width:1; border-style:solid; border-color:#000000; color:#0084D4; background-color:white;cursor:hand;}');
d0cument.write('.cnj_input4 { scrollbar-face-color: #FFCC33;scrollbar-shadow-color: #ffffff;scrollbar-highlight-color: #F3f3f3;scrollbar-3dlight-color: #ffffff;scrollbar-darkshadow-color: #F3f3f3;scrollbar-track-color: #ffffff;scrollbar-arrow-color: #f9f9f9;cursor:hand; }');
d0cument.write('</st'+'yle>');
<a href="javascript://" ommouseover='cnj_show()' ommouseout='cnj_hide()'>링크에 레이어 툴팁 효과 => CGI 와 JavaScript가 만났을 때 = C.n.J</a>
<div id="cnj_str" style="width:200px; height:200px; position:absolute; left:30px; top:19px; z-index:1; visibility:hidden;">
<table width="187" cellpadding="5" cellspacing="1" border="0" bgcolor="#cccccc">
<tr><td width="168" bgcolor="white">
링크에 레이어 툴팁 효과<br>
CGI 와 JavaScript가 만났을 때 = C.n.J<br>
http://www.CginJs.Com<br>
</td></tr>
</table>
</div>
<script language='JavaScript'>
<!-- //////////////////////////////////////////////////////////////
//*****************************************************************
// Web Site: http://www.CginJs.Com
// CGI 와 JavaScript가 만났을 때 = C.n.J ☞ http://www.CginJs.Com
// CGI 와 JavaScript가 만났을 때 = C.n.J ☞ webmaster@CginJs.Com
// C.n.J 자바스크립트 자동 생성 마법사 ☞ http://www.CginJs.Com
// C.n.J 자바스크립트(JavaScript) 가이드 ☞ http://www.CginJs.Com
// C.n.J CSS(Cascading Style Sheet) 가이드 ☞ http://www.CginJs.Com
// Editer : Web Site: http://www.CginJs.Com
//*****************************************************************
/////////////////////////////////////////////////////////////// -->
d0cument.write('<st'+'yle>');
d0cument.write('td {font-size:12px; font-family:굴림; text-decoration:none; }');
d0cument.write('A:link,A:active,A:visited{text-decoration:none;font-size:12PX;color:#333333;}');
d0cument.write('A:hover {text-decoration:none; color:ff9900}');
d0cument.write('font { font-size: 9pt; }');
d0cument.write('.cnj_input {background-color:rgb(240,240,240);border-width:1pt; height:16pt;cursor:hand;}');
d0cument.write('.cnj_input2 {border-width:1; border-color:rgb(204,204,204); border-style:solid;cursor:hand;}');
d0cument.write('.cnj_input3 { border-width:1; border-style:solid; border-color:#000000; color:#0084D4; background-color:white;cursor:hand;}');
d0cument.write('.cnj_input4 { scrollbar-face-color: #FFCC33;scrollbar-shadow-color: #ffffff;scrollbar-highlight-color: #F3f3f3;scrollbar-3dlight-color: #ffffff;scrollbar-darkshadow-color: #F3f3f3;scrollbar-track-color: #ffffff;scrollbar-arrow-color: #f9f9f9;cursor:hand; }');
d0cument.write('</st'+'yle>');
var cnj_obj = d0cument.all.cnj_str.style;
var wx=0, wy=0;
function cnj_move() {
// wx 와 wy 뒤에 - 이면 마우스포인터의 툴팁내용이 상단에 위치
// wx 와 wy 뒤에 + 이면 마우스포인터의 툴팁내용이 하단에 위치
cnj_obj.pixelLeft = wx-150; // 마우스포인터와 레이어와의 가로 간격
cnj_obj.pixelTop = wy-150; // 마우스포인터와 레이어와의 세로 간격
cnj_obj.pixelLeft += d0cument.body.scrollLeft;
cnj_obj.pixelTop += d0cument.body.scrollTop;
}
function cnj_show() {
if(cnj_obj.visibility != "hidden")
return;
cnj_move();
cnj_obj.visibility = 'visible';
}
function cnj_hide() {
cnj_obj.visibility = 'hidden';
}
function dragIt(evt) {
wx = event.x;
wy = event.y;
if(cnj_obj.visibility == "visible")
cnj_move();
}
d0cument.onmousemove = dragIt;
</script>
var wx=0, wy=0;
function cnj_move() {
// wx 와 wy 뒤에 - 이면 마우스포인터의 툴팁내용이 상단에 위치
// wx 와 wy 뒤에 + 이면 마우스포인터의 툴팁내용이 하단에 위치
cnj_obj.pixelLeft = wx-150; // 마우스포인터와 레이어와의 가로 간격
cnj_obj.pixelTop = wy-150; // 마우스포인터와 레이어와의 세로 간격
cnj_obj.pixelLeft += d0cument.body.scrollLeft;
cnj_obj.pixelTop += d0cument.body.scrollTop;
}
function cnj_show() {
if(cnj_obj.visibility != "hidden")
return;
cnj_move();
cnj_obj.visibility = 'visible';
}
function cnj_hide() {
cnj_obj.visibility = 'hidden';
}
function dragIt(evt) {
wx = event.x;
wy = event.y;
if(cnj_obj.visibility == "visible")
cnj_move();
}
d0cument.onmousemove = dragIt;
</script>
## 출처 : http://www.cginjs.com/index.php3
'JavaScript' 카테고리의 다른 글
자바스크립트로 한글 , 초성 중성 종성 분리 (음소분리) (0) | 2009.01.09 |
---|---|
IE와 파폭의 스크립트 문제 해결법 (0) | 2009.01.02 |
ASP.NET 개발자들을 위한 JavaScript Tips - Part 2 (0) | 2009.01.02 |
ASP.NET 개발자들을 위한 JavaScript Tips - Part 1 (0) | 2009.01.02 |
자바스크립트로 구성된 이미지 슬라이더입니다. (0) | 2009.01.02 |