关于鼠标旁边出现提示消息的JS.该如何处理
日期：2014-05-16 浏览次数：20390 次
关于鼠标旁边出现提示消息的JS...
当在网页中把鼠标放在一个图片或者一段文字(不是超链接)上的时候(即触发onMouseOver事件)，在鼠标的左下方出现一个提示消息，当onMouseOut，提示框消失，谁有这样的JS，请把代码共享出来大家共享。。。
我在网上找了很多，大多只在IE下面能够显示，但是在FireFox下面就不能实现...
我想肯定有人能兼容这两种浏览器吧，求能够兼容的代码....
------解决方案--------------------
<a href= "# " title= "area "> a </a>
<img src= "http://www.csdn.net/Images/logo_csdn.gif " title= "csdn " />
------解决方案--------------------
手头没有兼容性好的
event在FireFox中要显式传过去才能用
------解决方案--------------------
<html>
<head>
<title> 提示菜单 </title>
<script>
var x,y
function canMove()
{
x=document.body.scrollLeft+event.clientX
y=document.body.scrollTop+event.clientY
}
function move()
{
tips.style.posLeft=x+10;
tips.style.posTop=y+10;
setTimeout( "move() ",10);
}
function showTips(content,obj)
{
obj.innerText=content+ "\t\t\t\t\t\t ";
obj.filters.alpha.opacity=100;
}
function hideTips(content,obj)
{//more javascript from http://cfan.net.cn
obj.innerText=content;
obj.filters.alpha.opacity=0;
}
document.write( " <div id=tips style= 'filter:alpha(opacity=0);position:absolute;background-color:#f3f3f3;font-size:9pt;color:#6c6c6c;border:#d9d9c6 1px solid; '> </div> ");
</script>
</head>
<body onload= "move() " onmousemove= "canMove() ">
<table cellspacing=0 cellpadding=0 border=0 width=760 align=center>
<tr>
<td height=40>
<a href= "# "> <span onmouseover= "showTips( '魔鬼列车最新版本最新上传 ',tips) " onmouseout= "hideTips( ' ',tips) "> 1 </span> </a>
</td>
</tr>
<tr>
<td height=40>
<a href= "# "> <span onmouseover= "showTips( '你好世界 ',tips) " onmouseout= "hideTips( ' ',tips) "> 2 </span> </a>
</td>
</tr>
<tr>
<td height=40>
<a href= "# "> <span onmouseover= "showTips( '你好世界 ',tips) " onmouseout= "hideTips( ' ',tips) "> 3 </span> </a>
</td>
</tr>
<tr>
<td height=40>
<a href= "# "> <span onmouseover= "showTips( '你好世界 ',tips) " onmouseout= "hideTips( ' ',tips) "> 4 </span> </a>
</td>
</tr>
<tr>
<td height=40>
<a href= "# "> <span onmouseover= "showTips( '你好世界 ',tips) " onmouseout= "hideTips( ' ',tips) "> 5 </span> </a>
</td>
</tr>
</table>
</body>
</html>
------解决方案--------------------
<html>
<head>
<title>
dfjk </title>
</head>
<body>
<div id= "div_Tip " style= "BORDER-RIGHT: #666699 1px solid; BORDER-TOP: #666699 1px solid; DISPLAY: none; PADDING-LEFT: 10px; Z-INDEX: 500; LEFT: 448px; VERTICAL-ALIGN: baseline; BORDER-LEFT: #666699 1px solid; WIDTH: 150px; COLOR: #000000; PADDING-TOP: 10px; BORDER-BOTTOM: #666699 1px solid; POSITION: absolute; TOP: 240px; HEIGHT: 50px; BACKGROUND-COLOR: #efeff9; T
当在网页中把鼠标放在一个图片或者一段文字(不是超链接)上的时候(即触发onMouseOver事件)，在鼠标的左下方出现一个提示消息，当onMouseOut，提示框消失，谁有这样的JS，请把代码共享出来大家共享。。。
我在网上找了很多，大多只在IE下面能够显示，但是在FireFox下面就不能实现...
我想肯定有人能兼容这两种浏览器吧，求能够兼容的代码....
------解决方案--------------------
<a href= "# " title= "area "> a </a>
<img src= "http://www.csdn.net/Images/logo_csdn.gif " title= "csdn " />
------解决方案--------------------
手头没有兼容性好的
event在FireFox中要显式传过去才能用
------解决方案--------------------
<html>
<head>
<title> 提示菜单 </title>
<script>
var x,y
function canMove()
{
x=document.body.scrollLeft+event.clientX
y=document.body.scrollTop+event.clientY
}
function move()
{
tips.style.posLeft=x+10;
tips.style.posTop=y+10;
setTimeout( "move() ",10);
}
function showTips(content,obj)
{
obj.innerText=content+ "\t\t\t\t\t\t ";
obj.filters.alpha.opacity=100;
}
function hideTips(content,obj)
{//more javascript from http://cfan.net.cn
obj.innerText=content;
obj.filters.alpha.opacity=0;
}
document.write( " <div id=tips style= 'filter:alpha(opacity=0);position:absolute;background-color:#f3f3f3;font-size:9pt;color:#6c6c6c;border:#d9d9c6 1px solid; '> </div> ");
</script>
</head>
<body onload= "move() " onmousemove= "canMove() ">
<table cellspacing=0 cellpadding=0 border=0 width=760 align=center>
<tr>
<td height=40>
<a href= "# "> <span onmouseover= "showTips( '魔鬼列车最新版本最新上传 ',tips) " onmouseout= "hideTips( ' ',tips) "> 1 </span> </a>
</td>
</tr>
<tr>
<td height=40>
<a href= "# "> <span onmouseover= "showTips( '你好世界 ',tips) " onmouseout= "hideTips( ' ',tips) "> 2 </span> </a>
</td>
</tr>
<tr>
<td height=40>
<a href= "# "> <span onmouseover= "showTips( '你好世界 ',tips) " onmouseout= "hideTips( ' ',tips) "> 3 </span> </a>
</td>
</tr>
<tr>
<td height=40>
<a href= "# "> <span onmouseover= "showTips( '你好世界 ',tips) " onmouseout= "hideTips( ' ',tips) "> 4 </span> </a>
</td>
</tr>
<tr>
<td height=40>
<a href= "# "> <span onmouseover= "showTips( '你好世界 ',tips) " onmouseout= "hideTips( ' ',tips) "> 5 </span> </a>
</td>
</tr>
</table>
</body>
</html>
------解决方案--------------------
<html>
<head>
<title>
dfjk </title>
</head>
<body>
<div id= "div_Tip " style= "BORDER-RIGHT: #666699 1px solid; BORDER-TOP: #666699 1px solid; DISPLAY: none; PADDING-LEFT: 10px; Z-INDEX: 500; LEFT: 448px; VERTICAL-ALIGN: baseline; BORDER-LEFT: #666699 1px solid; WIDTH: 150px; COLOR: #000000; PADDING-TOP: 10px; BORDER-BOTTOM: #666699 1px solid; POSITION: absolute; TOP: 240px; HEIGHT: 50px; BACKGROUND-COLOR: #efeff9; T
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
