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

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

本站搜索

推荐文章 More...

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

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

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

文章阅读排行

文章信息

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 ASP .NET JSP PHP