本文介绍了一种使用DIV元素和自定义属性实现网页对象提示框的方法。这种方法相比传统的alt或title属性提供了更灵活的样式控制，并能根据鼠标位置自动调整显示位置及阴影方向。
网页中的对象，如：链接、图片等，如果有说明框的话，将更能引起浏览者的注意。
一般情况下，我们都是用alt或title属性来实现的，这种方法简单，无须编写脚本，但显示时间短，无法自定义样式，且在对象上不能随鼠标的移动而移动，所以常常让设计者感到美中不足。
在这种情况下，我写了一段代码，使用了DIV来代替说明框，使用了自定义属性来代替框中的内容。从效果上大家就可以看出来。这段代码的优越性：
只使用了一个DIV（样式随便定义），哪个对象需显示说明框，无须定义ID，只须定义属性xxx="..."即可（如果...从库内读出，岂不...），通用性、可移植性强...
<script language="JavaScript">
document.onmouseover=function(){showdiv();}//显示DIV
document.onmousemove=function(){if(odiv.style.visibility=='visible') setpos();}//移动DIV
document.onmouseout=function(){odiv.style.visibility='hidden';
}//隐藏DIV
function showdiv() {
if(event.srcElement.xxx && event.srcElement.xxx!=''){
setpos();
odiv.innerText=event.srcElement.xxx;
odiv.style.visibility='visible';
}
}
function setpos(){//设置DIV的位置及DIV样式中阴影的方向
if (odiv.offsetWidth+event.x >= document.body.offsetWidth) {
odiv.style.left=document.body.scrollLeft+event.x-odiv.offsetWidth;
x='l';//向左
}
else {
odiv.style.left=document.body.scrollLeft+event.x;
x='r'//向右
}
if (odiv.offsetHeight+event.y+18 >= document.body.offsetHeight) {
odiv.style.top=document.body.scrollTop+event.y-odiv.offsetHeight;
y='u';//向上
}
else {
odiv.style.top=document.body.scrollTop+event.y+18;
y='d';//向下
}
if (x+y=='lu') n=-45;//左上
if (x+y=='ru') n=45;//右上
if (x+y=='ld') n=-135;//左下
if (x+y=='rd') n=135;//右下
odiv.style.filter='progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=' + n + ')';
}
</script>
<body style="cursor:default">
<div id="odiv" style="visibility:hidden;width:250;text-overflow:ellipsis;padding:5 5;border:1px solid #000000;background-color:#FFFFCC;font-size:12px;position:absolute;"></div>
<p style="background:yellow" xxx="这是一段文字
---------------------------------
由于有了自定义属性xxx，所以有了说明框！
注意不同位置下DIV阴影的方向：）">带说明框的文字</p>
<p>文字</p> <p>文字</p>
<a href="" xxx="这是一个超链接
---------------------------------
由于有了自定义属性xxx，所以有了说明框！
注意不同位置下DIV阴影的方向：）">带说明框的超链接</a>
<p>文字</p> <p>文字</p>
<img src="images/logo.gif" border="1" xxx="这是一个图片
---------------------------------
由于有了自定义属性xxx，所以有了说明框！
注意不同位置下DIV阴影的方向：）">
<p>文字</p> <p>文字</p>
<p style="background:yellow" xxx="这是一段文字
---------------------------------
由于有了自定义属性xxx，所以有了说明框！
注意不同位置下DIV阴影的方向：）">带说明框的文字</p>
document.onmouseover=function(){showdiv();}//显示DIV
document.onmousemove=function(){if(odiv.style.visibility=='visible') setpos();}//移动DIV
document.onmouseout=function(){odiv.style.visibility='hidden';
}//隐藏DIV
function showdiv() {
if(event.srcElement.xxx && event.srcElement.xxx!=''){
setpos();
odiv.innerText=event.srcElement.xxx;
odiv.style.visibility='visible';
}
}
function setpos(){//设置DIV的位置及DIV样式中阴影的方向
if (odiv.offsetWidth+event.x >= document.body.offsetWidth) {
odiv.style.left=document.body.scrollLeft+event.x-odiv.offsetWidth;
x='l';//向左
}
else {
odiv.style.left=document.body.scrollLeft+event.x;
x='r'//向右
}
if (odiv.offsetHeight+event.y+18 >= document.body.offsetHeight) {
odiv.style.top=document.body.scrollTop+event.y-odiv.offsetHeight;
y='u';//向上
}
else {
odiv.style.top=document.body.scrollTop+event.y+18;
y='d';//向下
}
if (x+y=='lu') n=-45;//左上
if (x+y=='ru') n=45;//右上
if (x+y=='ld') n=-135;//左下
if (x+y=='rd') n=135;//右下
odiv.style.filter='progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=' + n + ')';
}
</script>
<body style="cursor:default">
<div id="odiv" style="visibility:hidden;width:250;text-overflow:ellipsis;padding:5 5;border:1px solid #000000;background-color:#FFFFCC;font-size:12px;position:absolute;"></div>
<p style="background:yellow" xxx="这是一段文字
---------------------------------
由于有了自定义属性xxx，所以有了说明框！
注意不同位置下DIV阴影的方向：）">带说明框的文字</p>
<p>文字</p> <p>文字</p>
<a href="" xxx="这是一个超链接
---------------------------------
由于有了自定义属性xxx，所以有了说明框！
注意不同位置下DIV阴影的方向：）">带说明框的超链接</a>
<p>文字</p> <p>文字</p>
<img src="images/logo.gif" border="1" xxx="这是一个图片
---------------------------------
由于有了自定义属性xxx，所以有了说明框！
注意不同位置下DIV阴影的方向：）">
<p>文字</p> <p>文字</p>
<p style="background:yellow" xxx="这是一段文字
---------------------------------
由于有了自定义属性xxx，所以有了说明框！
注意不同位置下DIV阴影的方向：）">带说明框的文字</p>
扫一扫
2880
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
