JavaScript：获取网页标签的 alt 或 title 属性的值并自定义显示 V2.0_

[会员中心] [发布文章][发布软件] [中文繁體]

本站搜索

推荐文章 More...

	华硕易电脑(ASUS Eee PC 1025C).. 先来段开场白：为了外出携带方便，到淘..

	Acronis True Image 使用说明　　一款可以在Windows下使用全部功..

	Norton Ghost 使用详解一、分区备份　　使用Ghost进行系..

文章阅读排行

	Microsoft SQL Server 2000 Perso.. 　　对于第一次安装 Microsoft SQL Se..

	MD5 算法的ASP实现代码　　MD5的全称是Message-Digest Algor..

	BIOS 设置不能修改等问答5则　　问：电脑配置为：微星865PE主板、P4..

	Windows 系统修改默认文件类型图标 Windows 系统文件类型图标，通常由默..

	夸克网盘新用户注册如何获得1T空间夸克网盘，新用户注册如何获得1T空间？ ..

	VMware Workstation：新添加的硬.. VMware Workstation 新添加的硬盘不..

	CMD：Windows 系统 CMD 命令添加.. 查看全部用户账号： net user 查..

	Microsoft Internet Information .. 　　简称：IIS，版本：5.0，运行环境：Wind..

	关于使用 CSS 来控制 table 标签.. 　　在 HTML 语言中，table 标签的 cel..

	使XHTML Strict 支持 target 标签 XHTML 1.0 Strict 之后就不支持 targe..

文章信息

JavaScript：获取网页标签的 alt 或 title 属性的值并自定义显示 V2.0

〖评论()〗〖留言〗〖收藏〗

〖文章分类：电脑·手机·网络 / HTML·CSS·JavaScript〗〖阅读选项〗

<!--

document.write("<div id='GuAltTitleLayer' style='width:auto;height:auto;border:1px #525252 solid;background:#FFFFB3;padding:2px 4px 2px 4px;font-family:Verdana,Arial,宋体;font-size:12px;color:#000000;text-align:left;position:absolute;z-index:600;display:none;'></div>");

function GuAltTitleShow(event) {
	event=event||window.event;
	var GuTarget=event.srcElement?event.srcElement:event.target;

if ((GuTarget.alt!="")&&(GuTarget.alt!=null)) {
		GuTarget.AltTitleNote=GuTarget.alt;
		GuTarget.alt="";
		}
	if ((GuTarget.title!="")&&(GuTarget.title!=null)) {
		GuTarget.AltTitleNote=GuTarget.title;
		GuTarget.title="";
		}
	if ((GuTarget.AltTitleNote!="")&&(GuTarget.AltTitleNote!=null)) {
		GuElementGet("GuAltTitleLayer").style.display="";
		GuElementGet("GuAltTitleLayer").innerHTML=GuTarget.AltTitleNote;
		GuAltTitleWidth=GuElementGet("GuAltTitleLayer").clientWidth;
		GuAltTitleHeight=GuElementGet("GuAltTitleLayer").clientHeight;

if (GuAltTitleWidth>=600) {
			GuAltTitleWidth=600;
			}

if ((event.clientY+20+GuAltTitleHeight)>(document.body.clientHeight)) {
			GuAltTitleTop=-GuAltTitleHeight-40;
			}
		else {
			GuAltTitleTop=0;
			}

if ((event.clientX+10+GuAltTitleWidth)>(document.body.clientWidth)) {
			GuAltTitleLeft=-GuAltTitleWidth-20;
			}
		else {
			GuAltTitleLeft=0;
			}

if ((event.clientX)||(event.clientY)) {
			if ((document.body.scrollTop)||(document.body.scrollLeft)) {
				GuAltTitleTop=(event.clientY)+20+(document.body.scrollTop)+GuAltTitleTop;
				GuAltTitleLeft=(event.clientX)+10+(document.body.scrollLeft)+GuAltTitleLeft;
				}
			else {
				GuAltTitleTop=(event.clientY)+20+(document.documentElement.scrollTop)+GuAltTitleTop;
				GuAltTitleLeft=(event.clientX)+10+(document.documentElement.scrollLeft)+GuAltTitleLeft;
				}
			}
		else {
			GuAltTitleTop=(event.pageY)+20+GuAltTitleTop;
			GuAltTitleLeft=(event.pageX)+10+GuAltTitleLeft;
			}

if (GuAltTitleTop<=0) {
			GuAltTitleTop=0;
			}

if (GuAltTitleLeft<=0) {
			GuAltTitleLeft=0;
			}

GuElementGet("GuAltTitleLayer").style.top=GuAltTitleTop+"px";
		GuElementGet("GuAltTitleLayer").style.left=GuAltTitleLeft+"px";
		}
	else {
		GuElementGet("GuAltTitleLayer").style.display="none";
		GuElementGet("GuAltTitleLayer").innerHTML="";
		}
	}

document.onmouseover=GuAltTitleShow;

//-->

程序说明：
1、将鼠标指标移至文字或图片上，即可出现提示信息。鼠标离开后提示框自动消失。
2、在 Google Chrome 4.0，Opera 11.0，Mozilla Firefox 3.6，Windows Internet Explorer 8.0 测试通过。
3、支持获取所有的网页标签的 alt 或 title 的属性。
4、支持在 alt 或 title 的值中使用
或
进行换行，如果内容较多，也会自动换行。
5、提示框靠近顶部、左边界或右边界时，程序自动调整，不会没入顶部、左边界或右边界。
6、若要提示框能跟随鼠标移动，修改 AltTitle.js 中的第 92 行 document.onmouseover=GuAltTitleShow; 为 document.onmousemove=GuAltTitleShow;
7、若要修改提示框的边框、背景颜色、字体，修改 AltTitle.js 中的第 22 行的代码。
8、复制 AltTitle.js 到你的网站目录中，并在需要调用的网页代码中加入即可。

〖演示页面〗〖下载页面〗

文章作者：啊估整理更新日期：2010-12-19

〖文章浏览：〗〖发送文章〗〖打印文章〗

相关文章	·JavaScript 脚本嵌套的两种方法 2009-08-23 ·ASP用JavaScript脚本实现分页的办法 2008-03-07 ·用 JavaScript 简单实现网页的中文简体繁体的转换 2005-07-26 ·JavaScript 弹出窗口代码一 2005-10-09 ·JavaScript表单验证 2005-12-15 ·使用脚本(JavaScript)对下拉表单(Select)选择而改变表单文本框(Input)的字体.字号.颜色 2009-07-14

文章·资料	电脑软件	手机应用	网站源码
电脑·手机·网络学习话题娱乐故事文化·历史国学典籍法律法规	操作系统网络办公·文件音频视频图形图像硬件·驱动程序行业教学学习编程·数据库游戏	鸿蒙安卓苹果其他	HTML·CSS·JavaScript PHP .NET ASP JSP