鼠标滑过某一个图标时,提示讯息
现在的系统使用这样的方法:(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="data: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="data: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="data: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="data: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="data: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="data:images/myprofile.png" title="<%=bundle1.getProperty("top_profile")%>" alt="<%=bundle1.getProperty("top_profile")%>"></a>
这样就可以在不同浏览器下面都能实现了!
但是切记,一定要加上title和alt,如果仅仅有alt的话,在FireFox下面也是无法提示讯息的.
这个我找了好久,终于把问题解决了!
js文件和jsp文件在下面附件中:可以参考
事例文件
鼠标滑过某一个图标时,提示讯息相关推荐
- 使用NG-ZORRO(Angular 组件库)中Table组件,通过columnTable属性固定列,结果每行数据内容穿透了两遍的固定列;鼠标滑过该条数据时,两侧固定列的背景色不跟着改变~
[问题] 使用NG-ZORRO(Angular 组件库)中Table组件,通过#columnTable属性固定列,结果每行数据内容穿透了两遍的固定列(因为是刚开始做这个项目,所以盲猜是之前某位同仁搞个 ...
- Android导入一个工程时提示 Invalid project description的解决方法
今天在网上下了个源码,导入的时候发现出现Invalid project description的提示,翻译成中文就是"无效的项目描述"的意思,搞不明白遂百度找到了解决办法,现记录并 ...
- QWidgetAction实现鼠标滑过菜单项图标高亮显示
需求是鼠标滑过菜单项时,菜单项的文字.icon以及子菜单的小箭头都要高亮显示,qss中只能设置item背景色.文字颜色以及子菜单小箭头的样式,icon的图片不能切换,另外曾经想过用indicator( ...
- 修改/删除桌面快捷方式/图标时提示“你需要来自XXX\Administrator的权限才能对此文件进行更改” Win10
博主在重装系统(Win10)后,发现无论是修改还是删除桌面快捷方式,都会弹出提示"你需要来自XXX\Administrator的权限才能对此文件进行更改" (如图),并且在尝试过网 ...
- 双屏玩游戏鼠标滑到另外一个屏幕_灵耀X2 Duo双屏操作!边上课边做笔记秀了,旦用难回的创新体验...
科技产品的创新,总会带给用户不一样的新鲜体验.其中笔记本电脑领域,虽然近年来创新不多,大多数产品都是堆料与发展轻薄向,但也不能"一棒子打死".像华硕推出的双屏笔记本电脑灵耀X2 D ...
- Android使用WebView加载Url时提示“请在微信客户端打开链接”
前言 最近在使用webView加载一个url时 提示弹出这样的图片 解决方法 在设置webView属性的时候 修改ua参数 我们通过这个链接拿到自己的ua参数 点击获取自己的UA参数 如图所示 我用的 ...
- 复制文件到服务器提示您需要权限,Ubuntu复制文件时提示Permission denied的解决方法...
Ubuntu系统把一个文件复制到另一个文件时提示"Permission denied",这个错误提示的意思是认可被拒绝,意味着复制文件的权限发现了问题,那么该怎么解决呢?下面小编就 ...
- linux拷贝文件提示没权限,Ubuntu复制文件时提示Permission denied怎么解决?
Ubuntu系统把一个文件复制到另一个文件时提示"Permission denied",这个错误提示的意思是认可被拒绝,意味着复制文件的权限发现了问题,那么该怎么解决呢? 一.表面 ...
- 一个列用render渲染的时候,如果列宽度不够,内容多出的部分会被隐藏,无法显示。这时需要一个鼠标滑过提示全部内容的tip功能。...
一个列用render渲染的时候,如果列宽度不够,内容多出的部分会被隐藏,无法显示.这时需要一个鼠标滑过提示全部内容的tip功能. 渲染的函数写成如下: function renderHallName( ...
最新文章
- Python踩坑指南(第二季)
- 7999元大疆最新无人机,支持第一人称视角极速拍摄,直接起飞
- linux wget命令详解
- djangoORM语句
- layuiadmin上手好难_新手如何快速上手自媒体赚钱?送你4个好建议!记得收藏
- ubuntu+php环境下的Memcached 安装方法
- DataTrigger
- C/C++ union
- 基于TCP的网络编程
- 【mmdetection3d】——学习配置文件
- python出入库_Python-批量导出excel加盟商出入库明细
- C++如何优雅地释放资源
- 计算机视觉与人的视觉
- 使用JACOB给WORD添加水印
- 如何在面试中回答「你最大的缺点是什么」?
- 利用“bert模型”预测英语“完形填空”答案
- oracle output语句,Oracle Returning 语句用法总结
- 圆满落幕!回顾 eBPF 技术的发展与挑战
- Can‘t write; duplicate key in table ‘qrtz_triggers‘
- Unity3D获取游戏对象组件的三种方式