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

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

本站搜索

推荐文章 More...


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

	Acronis True Image 使用.. 　　一款可以在Windows下使用全..

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

文章阅读排行


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

	VMware Workstation：安装.. 编写这份虚拟机安装的图文教程，..

	电脑显示器使用 HDMI 数据.. 如果电脑显示器使用 HDMI 数据线..

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

	TrustAsia/DigiCert/Let s .. 云服务器安装了 Windows Server 2..

	“啊估文章软件站”网站系.. 一、调试测试网站系统时，如何设..

文章信息

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