jQuery 마우스 클릭시 클릭 근처에 레이어 출현 > script

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>

<!-- Style 선언 -->
<style type="text/css">
#divLangSelect {
 position:absolute;
 display:none;
 background-color:#ffffff;
 border:solid 2px #d0d0d0;
 width:350px;
 height:150px;
 padding:10px;
}
</style>
<!-- //Style 선언 -->

<!-- 버튼 이미지 -->
<img class='imgSelect' src='../images/button.gif' alt="버튼1" />

<img class='imgSelect' src='../images/button.gif' alt="버튼2" />

<img class='imgSelect' src='../images/button.gif' alt="버튼3" />

<!-- //버튼 이미지 -->

<!-- 폼 레이어  -->
<div id="divLangSelect">
<div style="position:absolute;top:5px;right:5px">
<span onClick="javascript:document.getElementById('divLangSelect').style.display='none'" style="cursor:pointer;font-size:1.5em" title="닫기">X</span>
</div>
 선택하신 스킨()으로 변경하시겠습니다.
추가 HTML 내용

</div>
<!-- //폼 레이어  -->

<script type="text/javascript">
//-- 버튼 클릭시 버튼을 클릭한 위치 근처에 레이어 생성 --//
$('.imgSelect').click(function(e) {
 var divTop = e.clientY - 20; //상단 좌표
 var divLeft = e.clientX - 40; //좌측 좌표
 $('#divLangSelect').css({
     "top": divTop
     ,"left": divLeft
     , "position": "absolute"
 }).show();
});

</script>