클릭시 레이어 창 뜨기

<div id="point_rank" style="display:none;width:120px;height:100%;position:absolute;cursor:hand;z-index:99999999999;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" id='myPointAndRank' onclick="close_myrank();">
  <tr>
    <td width="70"><b>나의 포인트</b></td>
    <td><div id="my_point"></div></td> // 포인트를 넣을 자리
  </tr>
  <tr>
    <td><b>나의 랭킹</b></td>
    <td><div id="my_rank"></div></td> // 랭킹을 넣을 자리
  </tr>
</table>
</div>

기본 스타일을 display:none 으로 설정한다.

그리고 특정 사진을 onclick 이벤트를 주어서 그것을 클릭하는 순간
display 의 none 값을 null로 준다. 그러면 특정 div 가 나오게 된다.

<div id="medal">
<img src="../image/myhome/level$!{userInfo.myRankResult}.png" width="119" height="110" class="iePngFix" style="cursor:pointer" onclick="show_myrank('$!userInfo.point','$!userInfo.myrank','$!userInfo.totalrank','5000');">
</div>

스크립트

show_myrank=function(point, rank, total, time){
 //alert(point+"\n\n"+rank+"\n\n"+total+"\n\n"+time);
 var layer_name = $('point_rank');
 var my_point = $('my_point');
 var my_rank = $('my_rank');
 var width = 170;

 
 if(rank.length >= point.length)
  width += (rank.length)*7
 else if(rank.length < point.length)
  width += (point.length)*7

 my_point.innerHTML = point+"P";
 my_rank.innerHTML = rank+"/"+total;
 layer_name.style.width= width;
 layer_name.style.top = window.event.clientY - 5;
 layer_name.style.left = window.event.clientX - 170;
 layer_name.style.display = "";
 
 setTimeout(close_myrank,time);
}

close_myrank=function(){
 var layer_name = $('point_rank');
 layer_name.style.display = "none";
}