우연히 검색 도중 알아내게 된 툴 팁 기능.
javascript 로 되어 있네요 - -
좀 신기한 감이 있고, 디자인도 훨~~~~~ 씬 이뻐 보여서 당장 가져 왔숨다 ㅎㅎㅎ
다음과 같은 기능을 내는 효과 입니다. 툴팁을 보여줍니다 하고 된 부분에 가져다 대면 툴팁정보 경유지 정보, 기타메모 이러한 것들이 나오네요~ ^^ 이뿌죠?! 우후훗-
* 결과 result
* source 입니다.
긁어서 사용하시면 됩니다 - 0 -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script language="javascript">
var n = (document.layers) ? 1:0;
var ie = (document.all) ? 1:0;
function overTip(boxObj,ytop,xleft) {
javascript 로 되어 있네요 - -
좀 신기한 감이 있고, 디자인도 훨~~~~~ 씬 이뻐 보여서 당장 가져 왔숨다 ㅎㅎㅎ
다음과 같은 기능을 내는 효과 입니다. 툴팁을 보여줍니다 하고 된 부분에 가져다 대면 툴팁정보 경유지 정보, 기타메모 이러한 것들이 나오네요~ ^^ 이뿌죠?! 우후훗-
* 결과 result
* source 입니다.
긁어서 사용하시면 됩니다 - 0 -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script language="javascript">
var n = (document.layers) ? 1:0;
var ie = (document.all) ? 1:0;
function overTip(boxObj,ytop,xleft) {
if (ie) {
boxObj.style.visibility = 'visible';
boxObj.style.top = ytop;
boxObj.style.left = xleft+10;
boxObj.filters.item(0).stop();
boxObj.style.top = ytop;
boxObj.style.left = xleft+10;
boxObj.filters.item(0).stop();
}
}
/*
파라미터
1)boxObj:툴팁박스를 만드는 div
2)txt:툴팁에 보여줄 내용
3)ytop:마우스 y 좌포
4)xleft:마우스 x 좌표
*/
function overTipTxt(boxObj,txt,ytop,xleft) {
/*
파라미터
1)boxObj:툴팁박스를 만드는 div
2)txt:툴팁에 보여줄 내용
3)ytop:마우스 y 좌포
4)xleft:마우스 x 좌표
*/
function overTipTxt(boxObj,txt,ytop,xleft) {
if (ie) { //익스플로러라면...
boxObj.style.visibility = 'visible'; //툴팁박스를 보인다.
boxObj.style.top = ytop; //마우스 y좌표를 툴팁박스 top으로...
boxObj.style.left = xleft+10; //마우스 x좌표를 툴팁막스 left로 ...
boxObj.innerHTML=txt;
boxObj.filters.item(0).stop();
boxObj.style.top = ytop; //마우스 y좌표를 툴팁박스 top으로...
boxObj.style.left = xleft+10; //마우스 x좌표를 툴팁막스 left로 ...
boxObj.innerHTML=txt;
boxObj.filters.item(0).stop();
}
}
function outTip(boxObj) {
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();
boxObj.filters.item(0).transition = 12;
boxObj.filters.item(0).apply();
boxObj.style.visibility = 'hidden';
boxObj.filters.item(0).play();
}
}
</script>
</head>
<body>
</script>
</head>
<body>
<div id="tooltip"
style="font-size:10pt;font-family:돋움;color:orange;border:1px solid orange ;background:white;padding:10 10 10 10;"
style="text-align:left;position:absolute; z-index:20; top:event.y; left:650; width:380; filter:revealTrans(duration=1); visibility:hidden;">
</div>
<table border="1">
style="font-size:10pt;font-family:돋움;color:orange;border:1px solid orange ;background:white;padding:10 10 10 10;"
style="text-align:left;position:absolute; z-index:20; top:event.y; left:650; width:380; filter:revealTrans(duration=1); visibility:hidden;">
</div>
<table border="1">
<tr>
<th>번호</th>
<th>이름</th>
<th>전달정보</th>
<th>이름</th>
<th>전달정보</th>
</tr>
<tr>
<td>1</td>
<td>SEO</td>
<td style="text-align:left;"
onMouseOver="overTipTxt(tooltip,'<font color=#552B00><b>툴팁 정보 :</b></font><br>툴팁정보<br><font color=#552B00><b>경유지 정보 :</b></font><br>경유지정보<br><font color=#552B00><b>기타 메모 :</b></font><br>경유지정보',event.y,event.x)"
onMouseOut="outTip(tooltip)"><u>툴팁을 보여줍니다.</u>
</td>
<td>SEO</td>
<td style="text-align:left;"
onMouseOver="overTipTxt(tooltip,'<font color=#552B00><b>툴팁 정보 :</b></font><br>툴팁정보<br><font color=#552B00><b>경유지 정보 :</b></font><br>경유지정보<br><font color=#552B00><b>기타 메모 :</b></font><br>경유지정보',event.y,event.x)"
onMouseOut="outTip(tooltip)"><u>툴팁을 보여줍니다.</u>
</td>
</tr>
</table>
</body>
</html>
'JavaScript' 카테고리의 다른 글
| [Script] 이미지(img) 엑박 안뜨게 하기!! (0) | 2010.07.15 |
|---|---|
| [script] 작은 이미지 원본 이미지로 보이기 (0) | 2010.05.06 |
| [Javascript] 자바스크립트 API (0) | 2010.04.07 |
| [Script] getAdjacentText() 메소드 (0) | 2010.02.24 |
| [javascript] Define Regular Expression 정규표현식 (0) | 2010.01.29 |
