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

简介:

现在的系统使用这样的方法:(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文件在下面附件中:可以参考
事例文件

本文转自kenty博客园博客,原文链接http://www.cnblogs.com/kentyshang/archive/2007/05/30/765056.html如需转载请自行联系原作者


kenty

相关文章
|
6月前
Qt鼠标悬浮在图片上显示删除字样
Qt鼠标悬浮在图片上显示删除字样
鼠标悬浮显示文字的简单方法
鼠标悬浮显示文字的简单方法
168 0
【屏幕快捷截图无法弹出编辑框】
【屏幕快捷截图无法弹出编辑框】
110 0
【屏幕快捷截图无法弹出编辑框】
|
JavaScript 前端开发 API
前端|获取网页中鼠标选中文字
前端|获取网页中鼠标选中文字
246 0
|
Java
swing中一些常见的鼠标事件(鼠标形状的改变、鼠标接近、按下(图标的切换)、鼠标接近、离开(字体颜色的改变)、鼠标拖拽等)还有系统托盘+对话框
swing中一些常见的鼠标事件(鼠标形状的改变、鼠标接近、按下(图标的切换)、鼠标接近、离开(字体颜色的改变)、鼠标拖拽等)还有系统托盘+对话框
478 0
swing中一些常见的鼠标事件(鼠标形状的改变、鼠标接近、按下(图标的切换)、鼠标接近、离开(字体颜色的改变)、鼠标拖拽等)还有系统托盘+对话框
|
API Android开发
实现一个悬浮在软键盘上的输入栏
我们要实现一个悬浮在软键盘上的输入栏(即一个悬浮栏),过程中遇到了很多问题,查阅了一些网上的文章,结果发现不少是错误的,走了一些弯路,这里就一一记录一下
670 0
第56天:选中文字弹出提示框
一、选中文字弹出提示框 选择文字:  这个弹出的层 选中的时候不出来,弹起鼠标的时候才出现 。  所以这个的事件一定是  onmouseup  ,盒子显示而且盒子的位置 在  鼠标的 clientX  和 clientY 一模一样 用来判断选择的文字 二、获得用户选择内容 window.
878 1
|
API
用VBS控制鼠标的实现代码(获取鼠标坐标、鼠标移动、鼠标单击、鼠标双击)
网上搜到的答案普遍是VBS无法实现,或者是要用第三方COM(ActiveX?)组件。我对第三方组件是很反感的,使用第三方组件毫无可移植性可言,因为别人的系统中不一定注册了这个组件。我的建议是,尽量不要在VBS代码中调用第三方组件,除非你的程序只是写来自己用。
2266 0
鼠标滑过抖动图标
在线演示 本地下载
1067 0
|
JavaScript 前端开发 自然语言处理
Xshell用鼠标选中一段文字后自动换行的问题
JavaScript   HTML(CSS) ASP 跨浏览器开发 IIS Apache vbScript JavaScript 应用服务器 XML/XSL 其他 CGI Ajax 非技术区 ColdFusion Ruby/Rai...
1816 0