이미지 주변에 마우스를 올리면

그 이미지 위에 바로 설명이라던지 해서 div가 뜨는 스크립트

CSS

#tip{
 width:220px;
 height:auto;
 font:normal 12px Dotum, '돋움', Arial, Helvetica, sans-serif;
 color:#666;
 text-align:left;
 line-height:18px;
 list-style:none;
 margin:0;
 padding:0;
 position:absolute;
 z-index:100;
 overflow: hidden;
 display:none;
}
#tip .tcenter{background:url(../images/sub03/tipb_0202.png)  center top repeat-y; padding:4px 8px; letter-spacing:-1px; color:#a2957d;}

jQuery

$(function() {
 var $tip = $("#tip");
 $("#subCont img").not("#nopic").hover(function() { //id가 nopic 아닌것만 마우스 올렸을경우 실행
  var comment = $(this).attr("comment"); //각 이미지의 값들
  var name = $(this).attr("name");
  $(".comment").text(comment);
  $(".comment_name").text(name);
  
  var offset = $(this).offset(); //offset? element의 전체 문서 내에서의 left, top 좌표 값을 구하기.top, .left 의 properties가 있다.
  $tip.css({
   left: offset.left,
   top: offset.top - $tip.height()
  }).show();
  
  
 }, function() {
  $tip.hide();
 });
});

HTML

<div id="subCont">
      <ul id="gal">
                  <li><img src="http://www.songtory.com/editor/images/sub03/pics/pic01.jpg">
                  <li class="bsquare"><img src="http://www.songtory.com/editor/images/sub03/pics/nonpic.jpg">
                  <li><img src="http://www.songtory.com/editor/images/sub03/pics/pic02.jpg">
                  <li><img src="http://www.songtory.com/editor/images/sub03/pics/pic03.jpg">
                  <li><img src="http://www.songtory.com/editor/images/sub03/pics/pic04.jpg">
              <li class="bsquare"><img src="http://www.songtory.com/editor/images/sub03/pics/nonpic.jpg">
            <li><img src="http://www.songtory.com/editor/images/sub03/pics/pic05.jpg">
         </li></ul>
</div>