前面有一篇文章实现有类似的功能
巧用title属性做提示功能,兼容的js代码
这里是用的title属性实现的这样的功能,现在用另一种方式来达到同样的效果,只不过用的是层来实现
直接看下面的例子
CODE <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script language="javascript" type="text/javascript" src="http://www.uideas.cn/download/titlestyle.js"></script> <style> body{ margin:0px; padding:0px;} #titleCov{position:absolute; z-index:6000;display:none;} #titleIframe{width:100%; position:absolute; opacity:0; _filter:Alpha(opacity=0)} #titleCon{ border:1px #00FF66 solid; background:#f2f5fa; padding-left:4px; padding-right:4px; white-space:nowrap; _word-break:keep-all} </style> </head> <body> <a onMouseOver="titleView(this,'这是一个超链接')" onMouseOut="titleNone()" href="http://www.uideas.cn">友意博客</a> <a onMouseOver="titleView(this,'这是一个没有地址的图片,所以不能显示')" onMouseOut="titleNone()"><img src="" width="100" height="50" border="1"></a> <a onMouseOver="titleView(this,'这是一个距左边有一段距离的图片,主要是看提示过长会有怎么的效果')" onMouseOut="titleNone()" style="padding-left:300px;"><img src="" width="100" height="50" border="1"></a> <div id="titleCov"> <iframe id="titleIframe" frameborder="0" scrolling="no"></iframe> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td id="titleCon"> </td> </tr> </table> </div> </body> </html> [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]