onmouse 시 다른 페이지 보여주는 레이어작업 > JavaScript

• 목록

onmouse 시 다른 페이지 보여주는 레이어작업

######################  1 ####################
 <script>
        //핫라인 레이어 작업
      var ShowHtml = 0;
        function setHtmlReady(){
            ShowHtml =1;
        }
        function setHTML(GoURL){
            var NIFRAME = document.all.NullFrame2;
            NIFRAME.src = GoURL;
            NIFRAME.attachEvent("onload", setHtmlReady);
        }


        function getHTML(){
            return document.all.NullFrame2.contentWindow.document.body.innerHTML;
        }

       
        function ShowLayer(GoURL, PointXY){
            HiddenLayer();
            document.all.uplayer2.innerHTML = "<p> </p>";
            setHTML(GoURL);
            setTimeout("realShowLayer(820,"+PointXY.y+");", 500);
            return ;
        }
       
        function realShowLayer(RealX,RealY){
            var ViewHtml;
            if (ShowHtml) {
                      ViewHtml = getHTML();
                      document.all.uplayer2.innerHTML = ViewHtml;
                document.all.uplayer2.style.visibility = "visible" ;

                    //X위치
                    document.all.uplayer2.style.left = 572; //레이어 위치 240
                     
                      //Y위치
                      if(RealY+document.all.uplayer2.clientHeight <= document.body.clientHeight){
                          document.all.uplayer2.style.top = RealY + document.body.scrollTop - 30;
                      } else {
                          document.all.uplayer2.style.top = document.body.clientHeight - document.all.uplayer2.clientHeight + document.body.scrollTop;
                      }

            } else {       
                      setTimeout("realShowLayer("+RealX+","+RealY+");", 500);
            }
            return;
        }

        function HiddenLayer(){
            document.all.uplayer2.style.visibility = "hidden" ;
            ShowHtml = 0 ;
            return ;
        }
 <script>

 <td onMouseOver="ShowLayer('url', window.event);" onMouseOver="HiddenLayer()">

 <!--- HOTLINE layer 부분 시작 //-->
 <iframe name=NullFrame2 style='visibility:hidden;position:absolute;' width='0' height='0'></iframe>
 <div id="uplayer2" style="border-style:none;background:#ffffff;position:absolute;left:0px;top:0px;z-index:2;visibility:hidden;" OnMouseOver="this.style.visibility='visible';" OnMouseOut="HiddenLayer();">
 <p> </p></div>
 <!--- HOTLINE  layer 부분 끝 //--> 


 #####################  2  #################################
 <script>
 var htmlReady = 0 ;
 var UserAgent = navigator.userAgent ;
 var AppVersion = (((navigator.appVersion.split('; '))[1].split(' '))[1]) ;
 function setHtmlReady()
 {
    htmlReady =1 ;
 }
 function setHTML(strURL)
 {
    var oIFRAME = document.all.if1 ;
    oIFRAME.src = strURL ;
    oIFRAME.attachEvent("onload", setHtmlReady) ;
 }
 function getHTML()
 {
    return document.all.if1.contentWindow.document.body.innerHTML ;
 }
 function showBaloon(url, e, t)
 {
    if (UserAgent.indexOf("MSIE") < 0 || AppVersion < 5) return ;
    if (!t) t=0 ;
    document.all.sl_Div.innerHTML = "<p> </p>" ;
    setHTML(url) ;
    setTimeout("realShowBaloon("+e.x+","+e.y+", "+t+");", 500) ;
    return ;
 }
 function realShowBaloon(x,y,t)
 {
    var realWidth = document.body.clientWidth - 148 ;
    var meanWidth = realWidth / 2 ;
    var divWidth = document.all.sl_Div.scrollWidth ;
    var messageHtml ;
                                   
    if (UserAgent.indexOf("MSIE") < 0 || AppVersion < 5) return ;
                                               
    if (htmlReady)
    {
        messageHtml = getHTML() ;
        if (t == 1)
            guide = "" + messageHtml;
        else
            guide = "" + "<table width=460 cellpadding=0 cellspacing=1 border=0 bgcolor=#cccccc><tr><td>"+
                    "<table width=100% cellpadding=0 cellspacing=0 border=0 bgcolor=#ffffff><tr><td height=20></td></tr>"+
                    "<tr><td>"+ messageHtml + "</td><td width=34 nowrap></td></tr>"+
                    "<tr><td height=20></td></tr></table></td></tr></table>" ;

        if (divWidth < 240)
            divWidth = 240 ;

        if (x < meanWidth)
            document.all.sl_Div.style.left = x + document.body.scrollLeft ;
        else
            document.all.sl_Div.style.left = x + document.body.scrollLeft - divWidth ;

        document.all.sl_Div.innerHTML = guide ;
        //document.all.sl_Div.style.visibility = "visible" ;

        if(y+document.all.sl_Div.clientHeight <= document.body.clientHeight)
            document.all.sl_Div.style.top = y + document.body.scrollTop        ;
        else
            document.all.sl_Div.style.top = document.body.clientHeight - document.all.sl_Div.clientHeight + document.body.scrollTop ;
    }
    else {       
        setTimeout("realShowBaloon("+x+","+y+", "+t+");", 500) ;
    }
    return ;
 }
 function moveBaloon(e)
 {
    var realWidth = document.body.clientWidth - 148 ;
    var meanWidth = realWidth / 2 ;
    var divWidth = document.all.sl_Div.scrollWidth ;
       
    if (divWidth < 240)
        divWidth = 240 ;

    if (e.x < meanWidth)
        document.all.sl_Div.style.left = e.x + document.body.scrollLeft ;
    else
        document.all.sl_Div.style.left = e.x + document.body.scrollLeft - divWidth ;

    if (htmlReady)
        document.all.sl_Div.style.visibility = "visible" ;

    if(e.y+document.all.sl_Div.clientHeight <= document.body.clientHeight)
        document.all.sl_Div.style.top = e.y + document.body.scrollTop        ;
    else
        document.all.sl_Div.style.top = document.body.clientHeight - document.all.sl_Div.clientHeight + document.body.scrollTop ;
                               
    return ;
 }
 function hideBaloon()
 {
    document.all.sl_Div.style.visibility = "hidden" ;
    htmlReady = 0 ;
    return ;
 }

 </script>


 <tr id=ln1 onmouseover=\"showBaloon('/HotDetail.html?no={$hot_row[uid]}&HotArea={$HotArea}', window.event, 1);this.style.backgroundColor='#DEF8C9';return true;\" onmouseMove=\"moveBaloon(window.event);\" onmouseout=\"hideBaloon(); this.style.backgroundColor=''; return true;\">


 <iframe name=if1 style='visibility:hidden;position:absolute;' width='0' height='0'></iframe>
 <div id="sl_Div" style="border-style:none;background:#ffffff;position:absolute;left:0px;top:0px;z-index:2;visibility:hidden;" OnMouseOver="this.style.visibility='visible';" OnMouseOut="hideBaloon();">
 <p> </p></div>