웹을 하다보면 마우스 오버를 하였을 때 풍선 도움말 같은 상세 내역을 보고 싶어 할 때가 있다.

이럴때 용이한 방법은 하기와 같다.

<!--소스-->

<style type="text/css">
.overLayer{display: none; width: 180px; height: 80px; border: 2px solid gray; background-color:#FFF; padding:10px; font-size:12px; line-height:15px; font-weight:100}
.tableLayer td {height:30px}
</style>

<script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(function(){
 $('.data').mouseover(function(e) { // 마우스 오버시 좌표값을 받는다 -> e
  $(this).mousemove(function(e) {
   $('#divLayer #title').empty().append($(this).attr("l_name")); // divLayer안에있는 title의 값을 data의 wr_name 값으로 치환한다.
   $('#divLayer #name').empty().append($(this).attr("wr_name")); // divLayer안에있는 title의 값을 data의 wr_name 값으로 치환한다.

   $('#divLayer #conttent').empty().append($(this).text());

   var t=e.pageY-15;
   var l=e.pageX+20;

   $('#divLayer').css({"top":t, "left":l,"position":"absolute","opacity":"0,8" }).show();
  });
 });

 $('.data').mouseout(function() {
  $('#divLayer').hide();
 });
});

</script>

<div id="divLayer" class="overLayer">
  <div class="title">
    <strong>레이어이름 :</strong> <span id="title">제목이 들어오는 곳</span>
  </div>
  <div class="name">
    <strong>글쓴이 :</strong> <span id="name">글쓴이 들어오는 곳</span>
  </div>
  <br>
  <div class="conttent">
    <strong>내용 :</strong> <span id="conttent">내용 들어오는 곳</span>
  </div>
</div>

<!-- 본문 -->
<table width="100%" border="1" cellpadding="0" cellspacing="0" class="tableLayer">
  <tr>
    <td align="center" valign="middle" class="data" l_name="1번레이어" wr_name="도치즈1">
    표에 마우스를 올려보세요
    </td>
  </tr>
  <tr>
    <td align="center" valign="middle" class="data" l_name="2번레이어" wr_name="도치즈2">간단하죠?? ㅎㅎ</td>
  </tr>
</table>

인터넷을 통해서 알게 되었는데 시간이 오래되어 출처를 모르겠네...ㅠ

웹을 하다보면 마우스 오버를 하였을 때 풍선 도움말 같은 상세 내역을 보고 싶어 할 때가 있다.

이럴때 용이한 방법은 하기와 같다.

<!--소스-->

<style type="text/css">
.overLayer{display: none; width: 180px; height: 80px; border: 2px solid gray; background-color:#FFF; padding:10px; font-size:12px; line-height:15px; font-weight:100}
.tableLayer td {height:30px}
</style>

<script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(function(){
 $('.data').mouseover(function(e) { // 마우스 오버시 좌표값을 받는다 -> e
  $(this).mousemove(function(e) {
   $('#divLayer #title').empty().append($(this).attr("l_name")); // divLayer안에있는 title의 값을 data의 wr_name 값으로 치환한다.
   $('#divLayer #name').empty().append($(this).attr("wr_name")); // divLayer안에있는 title의 값을 data의 wr_name 값으로 치환한다.

   $('#divLayer #conttent').empty().append($(this).text());

   var t=e.pageY-15;
   var l=e.pageX+20;

   $('#divLayer').css({"top":t, "left":l,"position":"absolute","opacity":"0,8" }).show();
  });
 });

 $('.data').mouseout(function() {
  $('#divLayer').hide();
 });
});

</script>

<div id="divLayer" class="overLayer">
  <div class="title">
    <strong>레이어이름 :</strong> <span id="title">제목이 들어오는 곳</span>
  </div>
  <div class="name">
    <strong>글쓴이 :</strong> <span id="name">글쓴이 들어오는 곳</span>
  </div>
  <br>
  <div class="conttent">
    <strong>내용 :</strong> <span id="conttent">내용 들어오는 곳</span>
  </div>
</div>

<!-- 본문 -->
<table width="100%" border="1" cellpadding="0" cellspacing="0" class="tableLayer">
  <tr>
    <td align="center" valign="middle" class="data" l_name="1번레이어" wr_name="도치즈1">
    표에 마우스를 올려보세요
    </td>
  </tr>
  <tr>
    <td align="center" valign="middle" class="data" l_name="2번레이어" wr_name="도치즈2">간단하죠?? ㅎㅎ</td>
  </tr>
</table>

인터넷을 통해서 알게 되었는데 시간이 오래되어 출처를 모르겠네...ㅠ