2009년 7월 29일 수요일

자바스크립트 php 연동 풍선도움말

<!-- 풍선도움말 스크립트 시작 -->
 <style>
 div.none { padding:15px 15px 15px 15px; width:200px; position:absolute; border-width:3; border-color:#cccccc; border-style:solid;font-size:9pt; background-color:#FFFFFF }
 </style>
 <script>
 <!--
 var preview="";
 var gobj="";
 function attachEvent_(obj, evt, fuc, useCapture) {
   if(!useCapture) useCapture=false;
   if(obj.addEventListener) { // W3C DOM 지원 브라우저
  return obj.addEventListener(evt,fuc,useCapture);
   } else if(obj.attachEvent) { // MSDOM 지원 브라우저
  return obj.attachEvent("on"+evt, fuc);
   } else { // NN4 나 IE5mac 등 비 호환 브라우저
  MyAttachEvent(obj, evt, fuc);
  obj['on'+evt]=function() { MyFireEvent(obj,evt) };
   }
 }

 function detachEvent_(obj, evt, fuc, useCapture) {
   if(!useCapture) useCapture=false;
   if(obj.removeEventListener) {
  return obj.removeEventListener(evt,fuc,useCapture);
   } else if(obj.detachEvent) {
  return obj.detachEvent("on"+evt, fuc);
   } else {
  MyDetachEvent(obj, evt, fuc);
  obj['on'+evt]=function() { MyFireEvent(obj,evt) };
   }
 }

 function MyAttachEvent(obj, evt, fuc) {
   if(!obj.myEvents) obj.myEvents= {};
   if(!obj.myEvents[evt]) obj.myEvents[evt]=[];
   var evts = obj.myEvents[evt];
   evts[evts.length]=fuc;
 }

 function MyFireEvent(obj, evt) {
   if(!obj.myEvents || !obj.myEvents[evt]) return;
   var evts = obj.myEvents[evt];
   for (var i=0;i<len;i++) {
  len=evts.length;
  evts[i]();
   }
 }

 function previewShow(e, obj, pv) {
   preview=pv;
   gobj=obj;
   attachEvent_(obj, "mousemove", previewMove, false);
   attachEvent_(obj, "mouseout", previewHide, false);
 }

 function previewMove(e) {
   var hb = document.getElementById(preview);
   if(hb.parentElement) hb.parentElement.style.display="";
   else hb.parentNode.style.display="";
   var evt = e ? e : window.event;
   var posx=0;
   var posy=0;

   if (evt.pageX || evt.pageY) { // pageX/Y 표준 검사
  posx = evt.pageX +8;
  posy = evt.pageY +16;
   } else if (evt.clientX || evt.clientY) { //clientX/Y 표준 검사 Opera
  posx = evt.clientX +10;
  posy = evt.clientY +20;
  if (window.event) { // IE 여부 검사
    posx += document.body.scrollLeft;
    posy += document.body.scrollTop;
   }
   }

   hb.style.left = posx + "px";
   hb.style.top = posy + "px";
 }

 function previewHide() {
   var hb = document.getElementById(preview);
   if(hb.parentElement) hb.parentElement.style.display="none";
   else hb.parentNode.style.display="none";

   detachEvent_(gobj,"mousemove", previewMove, false);
 }
 -->
 </script>
 <!-- 풍선도움말 스크립트 끝 -->


아래는 php부분에 입력

$i의 갯수만큼 출력되게 생성한다.


 echo "<td><a href='#' onmouseover=previewShow(event,this,'tt_kin_$i');><img src='img/icon3.gif' border=0></a><span style=display:none><div id=tt_kin_$i class=none>".$info2."</div></span></td>";

댓글 없음:

댓글 쓰기