做本次实验用的ie6和firefox2.0.0.17
<html>
<head>
<script type="text/javascript">
function showTip(oEvent){
var oDiv = document.getElementById("divTip1");
oDiv.style.visibility = "visible";
oDiv.style.left = oEvent.clientX+5;
oDiv.style.top = oEvent.clientY+5;
}
function hideTip(oEvent){
var oDiv = document.getElementById("divTip1");
oDiv.style.visibility = "hidden";
}
</script>
</head>
<body>
<img src="http://www.baidu.com/img/baidu_logo.gif" alt="百度的logo" title="this is baidu's logo"></img>
<p title="this is a paragraph!">Move your mouse over the red square.</P>
<div id="div1" style="background-color:red;height:50px;width:50px" οnmοuseοver="showTip(event)" οnmοuseοut="hideTip(event)"></div>
<div id="divTip1" style="background-color:yellow;position:absolute;visibility:hidden;padding:5px">
<span style="font-weight:bold">Custom Tooltip</span><br />
More details can go here.
</div>
</body>
</html>
1.元素的title标签表示的是鼠标悬停在element上的时候要显示的提示文本(如上面的img和p元素中的title属性)
2.另外本文主要是要说明利用div+css来实现更加复杂的鼠标提示,当鼠标在div1上发生mouseover事件的时候,调用 showTip方法
,把div1的提示divTip1的可见属性设置为visible,并定位divTip1在鼠标位置的右下方个5px,当mouseout的时候,divTip1将被设置为hidden,从而实现了自定义的复杂的鼠标提示。
3.注意如果在divTip1的style中设置height和width属性,那么当提示内容超出给div能够显示的范围,IE中将自动扩大该div的height,并使用divTip1的css,在firefox中也是延伸了块的height但是延伸的部分将不具有divTip1的css,一次在此类div中最好不要设置height和width,或者只设置两者中的一个,以达到跨浏览器的目的
4.img中src和title的区别:alt是在图片无法加载或者查看工具不支持图片是所作出的提示,title是鼠标悬停在img上是的提示
5.在div的块级元素的前后都将输出一个换行字符,而span则是行级元素,不会有换行操作
6.注意在事件处理函数中仍然是window得到事件的方法,只是在实际函数调用时使用了event,event是window的属性,而在使用window的属性时可以省略window