티스토리 뷰

나는 프로그래머다!/Javascript

말풍선

JinyGo 2012. 3. 16. 11:20



<HTML>
<HEAD>
<p><center><font color="navy"><b>▶ </b></font>
<a href="http://korea.internet.com/channel/list.asp?cid=189&zid=12"><font color="navy"><b>코리아인터넷닷컴 자바스크립트 소스/예제 모음</b></font></a></center><p>

<!-- 풍선 도움말과 관련된 스타일을 각각에 대해 만들어야 한다.-->
<style>
#example1 {
position:absolute;
width:160px;
height:100px;
color:blue;
background-color:#FDF5E6;
text-align:center;
visibility:hidden;
z-index:10;
}

#example2 {
position:absolute;
width:160px;
height:100px;
color:blue;
background-color:#EFEFEF;
text-align:center;
visibility:hidden;
z-index:10;
}

</style>

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
function ViewData(user,ValueShow) {
var mousex = window.event.x;        // 마우스 좌표의 x 위치
var mousey = window.event.y;        // 마우스 좌표의 y 위치
user.style.visibility = ValueShow;  // 보일지 안보일지 여부
user.style.left = mousex + 5;       // 나타날 위치 (left)
user.style.top = mousey;            // 나타날 위치 (top)
}
//  End -->
</script>

</HEAD>

<BODY>
아래 텍스트에 마우스를 올려 놓아 보세요!
<br><br>
<font color="Green">
<a onmouseover="ViewData(example1,'visible')" onmouseout="ViewData(example1,'hidden')">
텍스트 내용 1
</a>
<br><br>
<a onmouseover="ViewData(example2,'visible')" onmouseout="ViewData(example2,'hidden')">
텍스트 내용 2
</a>

<!-- 팝업으로 나타날 도움말에 대한 테이블 정의 -->

<!-- 모든 테이블은 자신만의 스타일 시트를 가진다.-->
<!-- Example1 에 대한 데이터-->
<div id="example1">
<table border="1" bordercolordark="white" bordercolorlight="black" width="160">
<tr valign="middle">
<td height="98" align="center"><font color=Blue>
<b>텍스트 내용 1</b>에 대한 설명을 여기 적으면 됩니다!<br><br>
일반 팝업 띄우는 것보다 낫습니다!</font>
</td></tr></table>
</div>

<!-- Example2 에 대한 데이터-->
<div id="example2">
<table border="1" bordercolordark="white" bordercolorlight="black" width="160">
<tr valign="middle">
<td height="98"><font color=Blue>
<b>텍스트 내용 2</b>에 대한 설명을 여기 적으면 됩니다!<br><br>
일반 팝업 띄우는 것보다 낫습니다!
</font>
</td></tr></table>
</div>

<p align="center"><a href="/channel/content.asp?kid=13&nid=14677#test"><img src="/images/w_list3.gif" border="0"></a></p>
</BODY>
</HTML>

 

저작자표시
댓글
TAG more
최근에 올라온 글
최근에 달린 댓글
글 보관함
«   2024/04   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
Total
Today
Yesterday