鼠标划过链接时弹出窗口

www.jscode.cn
弹出div窗口
弹出div窗口

http://zsc521521.blog.163.com/blog/static/42233196200846570134/

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
  <HTML>
       <HEAD>
           <title>MouseOverPopWindowDemo</title>
           <script language="javascript">
  <!--       
               //代码整理:Melodicsoul  http://wintersun.cnblogs.com
               //2007年5月21日
               var FADINGTOOLTIP
              var wnd_height, wnd_width;
              var tooltip_height, tooltip_width;
              var tooltip_shown=false;
              var    transparency = 100;
              var timer_id = 1;
             
              // override events
              window.onload = WindowLoading;
              window.onresize = UpdateWindowSize;
              document.onmousemove = AdjustToolTipPosition;
             
              setTimeout('window.location.reload(true)', 1140000); // 19 minutes
            
              function DisplayTooltip(tooltip_text)
              {
                  if (FADINGTOOLTIP) {
                      FADINGTOOLTIP.innerHTML = tooltip_text;
                      tooltip_shown = (tooltip_text != "")? true : false;
                     if(tooltip_text != "")
                      {
                          // Get tooltip window height
                          tooltip_height=(FADINGTOOLTIP.style.pixelHeight)? FADINGTOOLTIP.style.pixelHeight : FADINGTOOLTIP.offsetHeight;
                          transparency=0;
                          ToolTipFading();
                      }
                      else
                      {
                         clearTimeout(timer_id);
                          FADINGTOOLTIP.style.visibility="hidden";
                      }
                  }
              }
 
              function AdjustToolTipPosition(e)
              {
                  if (navigator.userAgent.toLowerCase().indexOf("msie") != -1)
                      e = event;
                  if( tooltip_shown )
                  {
                      offset_y = 20;//(e.clientY + tooltip_height - document.body.scrollTop + 30 >= wnd_height) ? - 15 - tooltip_height: 20;
                      FADINGTOOLTIP.style.visibility = "visible";
                      FADINGTOOLTIP.style.left = Math.min(wnd_width - tooltip_width - 10 , Math.max(3, e.clientX + 6)) + document.body.scrollLeft + 'px';
                      FADINGTOOLTIP.style.top = e.clientY + offset_y + document.body.scrollTop + 'px';
                  }
              }
 
              function WindowLoading()
              {
                  FADINGTOOLTIP=document.getElementById('FADINGTOOLTIP');
     
                  // Get tooltip  window width               
                  tooltip_width = (FADINGTOOLTIP.style.pixelWidth) ? FADINGTOOLTIP.style.pixelWidth : FADINGTOOLTIP.offsetWidth;
                 
                  // Get tooltip window height
                  tooltip_height=(FADINGTOOLTIP.style.pixelHeight)? FADINGTOOLTIP.style.pixelHeight : FADINGTOOLTIP.offsetHeight;
 
                  FADINGTOOLTIP.style.left = 0;
                  FADINGTOOLTIP.style.top = 0;
 
                  UpdateWindowSize();
              }
             
              function ToolTipFading()
              {
                  if(transparency <= 100)
                  {
                      FADINGTOOLTIP.style.filter="alpha(opacity="+transparency+")";
                      transparency += 10;
                      timer_id = setTimeout('ToolTipFading()', 10);
                  }
              }
 
              function UpdateWindowSize()
              {
                  wnd_height=document.body.clientHeight;
                  wnd_width=document.body.clientWidth;
              }
              -->
          </script>
      </HEAD>
      <body>
          <form name="Form1">
              <DIV id="mainPane">
                  <a href="http://wintersun.cnblogs.com" onmouseover="DisplayTooltip('<iframe src=http://wintersun.cnblogs.com width=100% height=300px scrolling=no></iframe>');" onmouseout="DisplayTooltip('');">鼠标划过</a>
             </DIV>   
              <div class="FadingTooltip" id="FADINGTOOLTIP" style="Z-INDEX: 103; LEFT: 16px; VISIBILITY: hidden; WIDTH: 360px; POSITION: absolute; TOP: 478px; HEIGHT: 30px">
              </div>
          </form>
      </body>
  </html>

posted @ 2008-05-17 21:52  barney  阅读(940)  评论(0编辑  收藏  举报