网页中的对象,如:链接、图片等,如果有说明框的话,将更能引起浏览者的注意。
一般情况下,我们都是用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>
分享到:
相关推荐
易语言网页联动组合框源码,网页联动组合框,取网页对象,取网页句柄,ObjectFromLresult,RegisterWindowMessage,SendMessageTimeout,GetWindow,GetClassName
易语言对象读网页源码,对象读网页,读源码
技术指标 工作电源: DC 12V 回路输出: 4.8.12路 安装方式: 导轨安装 智能照明控制模块 操作说明 键盘定义 OPT 名 称 选择功 能键 功 能 SET 设置/开灯/关灯/保存 增加/翻页 减少/翻页 返回 + _ 框选的数据为当前光标...
易语言取外部网页对象源码,取外部网页对象,dom_dom取IWebBrowser,com_取类ID,com_取对象实例,com_动态调用,DLL_类ID从文本,DLL_MultiByteToWideChar,DLL_指针从字节集,DLL_指针从对象,DLL_动态调用子程序
基于面向对象协议的智能电能表主站动态库接口设计说明
网页_创建新网页 说明:直接在Webbroswer或IES内写入一个完整的网页,创建前必须保证网页已打开 网页_读取Cookie 说明:成功返回当前网页的Cookie 网页_高亮关键字 说明:高亮网页上指定的关键字 网页_解除网页...
对象组合框源码,可以添加浮选框的ComboBox
在"图层"面板中选择一个图层,然后执行"图层>智能对象>转换为智能 对象"菜单命令,或者在图层名称上单击鼠标右键,然后在弹出的菜单中选择"转换为智能对象"命令,如图12-121+所示。 Photoshop软件智能对象图层全文共...
易语言对象创建提示框源码,对象创建提示框
易语言源码编辑框自动接收拖放对象.rar 易语言源码编辑框自动接收拖放对象.rar 易语言源码编辑框自动接收拖放对象.rar 易语言源码编辑框自动接收拖放对象.rar 易语言源码编辑框自动接收拖放对象.rar 易语言源码...
Dreamweaver 8中文版实例教程 第3章 创建网页基本对象
RT,参照了某些公司和规范的面向对象规格说明书,自己整理的。
利用ObjectARX技术实现了通风CAD系统中的智能对象,结合开发实例进一步说明了该系统的功能。结果证明,此系统促进了网络解算的现场应用,为今后的井下结构设计提供了极大的便利,具有很大的市场价值。
18种BACnet对象说明
在ASP动态网页中,对象是一个抽象的概念,是要操作的目标。比如,在现实生活中,电脑就是我们搜寻资料的一个对象,他具有外观、操作系统、价格等等特点,这在对象概念中被称为属性,而利用这个电脑玩游戏、看电影、...
vfp取得IE网页内容及对象赋值的方法,利用VFP在INTERNET上制作数据库动态查询,在VFP里全屏幕开启一个IE窗口 , 如何检测是不连上Internet
很好的网页设计与制作的视频,视频形象生动的教你怎样创建网页的基本对象,能让你一学就会,加油
关于对象边界框估计的介绍说明.rar
C#基于winfrm框架和ABB PC SDK 2022实现的太阳能光伏电池智能生产上位机系统源代码+说明文档 随着新能源加速发展,光伏行业需求旺盛,在光伏电池串组件的生产过程中使用机器人成为必然选择。开发光伏电池组件机器人...
文中分析了当前主流网管系统在体系结构上的缺陷,阐述了分布对象技术(CORBA)与移动智能体技术各 ... 结合这些优势,给出了一个基于CORBA 和移动智能体的分布式网管集成框架, 并进一步通过实验模拟证实了其可行性.