마우스 롤오버 팝업레이어 만들기

노드js·자바스크립트

by 김일국 2014. 6. 12. 18:21

/* 롤오버레이어 실제 출력부 */
function Layer_Display(data_src, obj_id){
if(!document.getElementById('View_Div')){
  if(document.layers){
   document.layers['View_Div'] = new Layer(1);
  } else if (document.all){ //익스플로러
   document.body.insertAdjacentHTML("BeforeEnd","<DIV ID='View_Div'></DIV>");
  } else {
   var Make_Div = document.createElement('div');
   Make_Div.setAttribute("id", "View_Div");
   document.body.appendChild(Make_Div);
  }
}
var V_Div = document.getElementById('View_Div');
var XY = Target_Get_XY(obj_id); //위치값 계산
var div_width = '200px' //레이어 크기계산

with(V_Div.style){
  position = 'absolute';
  width = div_width;
  backgroundColor = '#fff';
  left = XY[0] + 2;
  top = XY[1] - XY[2] - 2;
  padding = '5px';
  display = 'block';
  border='1px solid blue';
}
var In_HTML = data_src;
V_Div.innerHTML = In_HTML;
}
/* 롤오버레이어 숨기기 */
function Layer_Hide(){
$('#View_Div').remove();
}

</script>

<body>

...

<td id="MESSAGE_GET-<?=$row['SEQ']?>" style="cursor:pointer" onmousemove="Layer_Display('<?=$CONTENTS?>', 'MESSAGE_GET-<?=$row['SEQ']?>')" onmouseover="Layer_Display('<?=$CONTENTS?>', 'MESSAGE_GET-<?=$row['SEQ']?>')" onmouseout="Layer_Hide()"><?=cut_str($row['CONTENT'],48,'...')?></td>

...

</body>

'노드js·자바스크립트' 카테고리의 다른 글

자작 제이쿼리 슬라이더 입니다. (0)	2014.12.06
자바스크립트로 IE브라우저 버전 확인하는 방법(Trident값사용) (0)	2014.11.27
제이쿼리로 입력폼의 빈값 체크하는 함수 입니다. (0)	2014.05.16
다음 API 로 본인 블로그 최신글 뽑아오는 코드 (0)	2014.02.26
j-query 유효성검사 (0)	2012.05.23