• 鼠标滑过某一个图标时,提示讯息


    现在的系统使用这样的方法:(tips.js)
    //
    // Browser Detection
    //
    isMac = (navigator.appVersion.indexOf("Mac")!=-1) ? true : false;
    NS4 = (document.layers) ? true : false;
    IEmac = ((document.all)&&(isMac)) ? true : false;
    IE4plus = (document.all) ? true : false;
    IE4 = ((document.all)&&(navigator.appVersion.indexOf("MSIE 4.")!=-1)) ? true : false;
    IE5 = ((document.all)&&(navigator.appVersion.indexOf("MSIE 5.")!=-1)) ? true : false;
    ver4 = (NS4 || IE4plus) ? true : false;

    // Generic Layer Object Functions

    // Make an object visible
    function showObject(obj)
    {
            if (NS4) obj.visibility = "show";
            else if (IE4plus) obj.visibility = "visible";
    }

    // Hides an object
    function hideObject(obj)
    {
            if (NS4) obj.visibility = "hide";
            else if (IE4plus) obj.visibility = "hidden";
    }

    // Move a layer
    function moveTo(obj,xL,yL)
    {
            obj.left = xL;
            obj.top = yL;
    }


    //
    // MouseTip Methods
    //

    function MouseTip_ShowNew()
    {
     this.WriteLayer();
     this.Show();
    }

    function MouseTip_Hide()
    {
     if ( (NS4) || (IE4plus) )
     {
      this.snow = 0;
      hideObject(this.over);
     }
    }

    function MouseTip_Show()
    {
     if ( (NS4) || (IE4plus) )
     {
      if (this.snow == 0)  
      {
       if (this.dir == 3)
       { // Center
        moveTo(this.over,MouseTip.offsetX,MouseTip.offsetY);
       }
       if (this.dir == 2)
       { // Center
        moveTo(this.over,this.x+MouseTip.offsetX-(MouseTip.width/2),this.y+MouseTip.offsetY);
       }
       if (this.dir == 1)
       { // Right
        moveTo(this.over,this.x+MouseTip.offsetX,this.y+MouseTip.offsetY);
       }
       if (this.dir == 0)
       { // Left
        moveTo(this.over,this.x-MouseTip.offsetX-MouseTip.width,this.y+MouseTip.offsetY);
       }
       showObject(this.over);
       this.snow = 1;
      }
     }
    }


    // Writes to a layer
    function MouseTip_WriteLayer()
    {
            if (NS4)
            {
                    var lyr = eval(MouseTip.divPath).document;
                    lyr.write(this.txt);
                    lyr.close();
            }
            else if (IE4plus)
       document.all["overDiv"].innerHTML = this.txt;
    }

    function MouseTip_AddTip(type, tipTitle, tipText)
    {
     var tip = new Object();
     tip.type = type;
     tip.title = tipTitle;
     tip.text = tipText;
     MouseTip.tips[MouseTip.tips.length] = tip;
    }

    function MouseTip_GetTip(type)
    {
     var tip = null;
     
     for (i=0; i < MouseTip.tips.length; i++)
     {
      if (MouseTip.tips[i].type==type)
      {
       tip = MouseTip.tips[i];
       break;
      }
     }
     return tip;
    }

    function MouseTip(type,dir,x,y)
    {
     this.x = x;
     this.y = y;
     this.snow = 0;
     this.dir = dir;
     this.over = null;
     
     this.ShowNew = MouseTip_ShowNew;
     this.Hide = MouseTip_Hide;
     this.Show = MouseTip_Show;
     this.WriteLayer = MouseTip_WriteLayer;

     if ( (NS4) || (IE4plus) )
     {
      if (NS4) this.over = eval(MouseTip.divPath);
      if (IE4plus) this.over = document.all["overDiv"].style;
     }

     var tip = MouseTip.GetTip(type);
     
     this.txt = '<TABLE WIDTH=' + MouseTip.width + ' BORDER=0 CELLPADDING=' + MouseTip.borderWidth +
      ' CELLSPACING=0 BGCOLOR="pink"><TD>' +  tip.text + '</TD></TABLE>';
     
    }


    MouseTip.current = null;
    MouseTip.tips = new Array();
    MouseTip.bgColor = "#CC0000";
    MouseTip.borderColor = "#42316B";
    MouseTip.width = 200
    MouseTip.borderWidth = 1;
    MouseTip.offsetX = 10;
    MouseTip.offsetY = 0;
    MouseTip.divPath = "document.overDiv";

    MouseTip.AddTip = MouseTip_AddTip;
    MouseTip.GetTip = MouseTip_GetTip;


    function ShowMouseTip(obj,e,type, pos)
    {
     if ( (NS4) || (IE4plus) )
     {
      if(! pos) pos = 1;
      var x = 0;
      var y = 0;
      if (NS4) {x=e.pageX; y=e.pageY;}
      if (IE4plus) {x=e.clientX+document.body.scrollLeft; y=e.clientY+document.body.scrollTop;}

      MouseTip.current = new MouseTip(type,pos,x,y);
      MouseTip.current.ShowNew();
     }
    }

    function HideMouseTip()
    {
     if ( (NS4) || (IE4plus) )
     {
      if (MouseTip.current)
       MouseTip.current.Hide();
     }
    }
    在调用页面:
    <script language="javascript" src="js/tips.js" >

    MouseTip.AddTip("MenuLogOut", "", "<%=bundle1.getProperty("top_logout")%>");
    MouseTip.AddTip("MenuContact", "", "<%=bundle1.getProperty("top_contact")%>");
    MouseTip.AddTip("MenuHelp", "", "<%=bundle1.getProperty("top_help")%>");
    MouseTip.AddTip("MenuMyProfile", "", "<%=bundle1.getProperty("top_profile")%>");
    MouseTip.AddTip("Menuhk", "", "<%=bundle1.getProperty("top_homepage")%>");

      <td width="20%" align="right">
     <a href="userProfile.jsp" target="text" onMouseOver="ShowMouseTip(this, event, 'MenuMyProfile', 3);" onMouseOut="HideMouseTip()">
      <img width="32" height="32" border="0" src="images/myprofile.png" ></a>
     <a href="contact.jsp" target="text" onMouseOver="ShowMouseTip(this, event, 'MenuContact', 3)" onMouseOut="HideMouseTip()">
      <img width="32" height="32" border="0" src="images/contact.png" ></a>
     <a href="help/help.htm"  target="text" onMouseOver="ShowMouseTip(this, event, 'MenuHelp', 3)" onMouseOut="HideMouseTip()" >
      <img width="32" height="32" src="images/help.png" border="0"  ></a>
     <a href="javascript:top.window.close()" target="_top" onMouseOver="ShowMouseTip(this, event, 'MenuLogOut', 3)" onMouseOut="HideMouseTip()">
      <img width="32" height="32" src="images/logout.png" border="0"></a>
     <a href=http://www.yahoo.com.cn target="text" onMouseOver="ShowMouseTip(this, event, 'Menuhk', 3)" onMouseOut="HideMouseTip()">
      <img border="0" src="images/logo.gif"width="22.4" height="27.3" ></a></td>

    在IE下面可以实现提示讯息这样的功能,可是在FireFox下面则不行.
    所以就要使用另外一种方法:
    <a href="userProfile.jsp" target="text" onMouseOver="ShowMouseTip(this, event, 'MenuMyProfile', 3);" onMouseOut="HideMouseTip()">
      <img width="32" height="32" border="0" src="images/myprofile.png" title="<%=bundle1.getProperty("top_profile")%>" alt="<%=bundle1.getProperty("top_profile")%>"></a>
    这样就可以在不同浏览器下面都能实现了!
    但是切记,一定要加上title和alt,如果仅仅有alt的话,在FireFox下面也是无法提示讯息的.
    这个我找了好久,终于把问题解决了!
    js文件和jsp文件在下面附件中:可以参考
    事例文件

  • 相关阅读:
    实验四Web服务器2
    发际线与我作队团队作业(五):冲刺总结1
    读书笔记
    socket3
    使用CAS来实现个单例模式
    基于无锁的C#并发队列实现
    C#3.0中的“多重继承”
    对并发/并行编程的总结
    谈谈多线程编程(二) 不变对象
    谈谈多线程编程(一) 安全性策略
  • 原文地址:https://www.cnblogs.com/kentyshang/p/765056.html
Copyright © 2020-2023  润新知