http://haohaibags.com/ToolTip.js

1function getViewportHeight() {
2	if (window.innerHeight!=window.undefined) return window.innerHeight;
3	if (document.compatMode=='CSS1Compat') return document.documentElement.clientHeight;
4	if (document.body) return document.body.clientHeight; 
5
6	return window.undefined; 
7}
8function getViewportWidth() {
9	if (window.innerWidth!=window.undefined) return window.innerWidth;
10	if (document.compatMode=='CSS1Compat') return document.documentElement.clientWidth;
11	if (document.body) return document.body.clientWidth; 
12
13	return window.undefined; 
14}
15
16/**
17 * Gets the real scroll top
18 */
19function getScrollTop() {
20	if (self.pageYOffset) // all except Explorer
21	{
22		return self.pageYOffset;
23	}
24	else if (document.documentElement && document.documentElement.scrollTop)
25		// Explorer 6 Strict
26	{
27		return document.documentElement.scrollTop;
28	}
29	else if (document.body) // all other Explorers
30	{
31		return document.body.scrollTop;
32	}
33}
34function getScrollLeft() {
35	if (self.pageXOffset) // all except Explorer
36	{
37		return self.pageXOffset;
38	}
39	else if (document.documentElement && document.documentElement.scrollLeft)
40		// Explorer 6 Strict
41	{
42		return document.documentElement.scrollLeft;
43	}
44	else if (document.body) // all other Explorers
45	{
46		return document.body.scrollLeft;
47	}
48}
49/*
50渐变的弹出图片
51使用方法：
52将ToolTip.js包含在网页body的结束标签后
53调用方法：
54<a href="pages.jpg" target='_blank' onMouseOver="toolTip('<img src=http://zhouzh:90/templet/T_yestem_channel/pages_small.jpg>')" onMouseOut="toolTip()"><img src='pages_small.jpg' border=0 width=30 height=20 align="absmiddle" title="点击看大图"></a>
55
56必须CSS样式
57.trans_msg
58{
59	filter:alpha(opacity=100,enabled=1) revealTrans(duration=.2,transition=1) blendtrans(duration=.2);
60}
61*/
62//--初始化变量--
63var rT=true;//允许图像过渡
64var bT=true;//允许图像淡入淡出
65var tw=150;//提示框宽度
66var endaction=false;//结束动画
67var ns4 = document.layers;
68var ns6 = document.getElementById && !document.all;
69var ie4 = document.all;
70offsetX = 10;
71offsetY = 20;
72var toolTipSTYLE="";
73function initToolTips()
74{
75	tempDiv = document.createElement("div");
76	tempDiv.id = "toolTipLayer";
77	tempDiv.style.position = "absolute";
78	tempDiv.style.display = "none";
79	document.body.appendChild(tempDiv);
80	if(ns4||ns6||ie4)
81	{
82		if(ns4) toolTipSTYLE = document.toolTipLayer;
83		else if(ns6) toolTipSTYLE = document.getElementById("toolTipLayer").style;
84		else if(ie4) toolTipSTYLE = document.all.toolTipLayer.style;
85		if(ns4) document.captureEvents(Event.MOUSEMOVE);
86		else
87		{
88		  toolTipSTYLE.visibility = "visible";
89		  toolTipSTYLE.display = "none";
90		}
91		document.onmousemove = moveToMouseLoc;
92	}
93}
94function toolTip(msg, fg, bg)
95{
96	try {
97	  if(toolTip.arguments.length < 1) // hide
98	  {
99		if(ns4) 
100		{
101		toolTipSTYLE.visibility = "hidden";
102		}
103		else 
104		{
105		  //--图象过渡，淡出处理--
106		  if (!endaction) {toolTipSTYLE.display = "none";}
107		  if (rT) document.all("msg1").filters[1].Apply();
108		  if (bT) document.all("msg1").filters[2].Apply();
109		  document.all("msg1").filters[0].opacity=0;
110		  if (rT) document.all("msg1").filters[1].Play();
111		  if (bT) document.all("msg1").filters[2].Play();
112		  if (rT){ 
113		  if (document.all("msg1").filters[1].status==1 || document.all("msg1").filters[1].status==0){  
114		  toolTipSTYLE.display = "none";}
115		  }
116		  if (bT){
117		  if (document.all("msg1").filters[2].status==1 || document.all("msg1").filters[2].status==0){  
118		  toolTipSTYLE.display = "none";}
119		  }
120		  if (!rT && !bT) toolTipSTYLE.display = "none";
121		  //----------------------
122		}
123	  }
124	  else // show
125	  {
126		if(!fg) fg = "#777777";
127		if(!bg) bg = "#eeeeee";
128		var content =
129		'<table id="msg1" name="msg1" border="0" cellspacing="0" cellpadding="1" bgcolor="' + fg + '" class="trans_msg"><td>' +
130		'<table border="1" cellspacing="2" cellpadding="3" bgcolor="' + bg + 
131		'"><td><font face="Arial" color="' + fg +
132		'" size="-2">' + msg +
133		'</font></td></table></td></table>';
134	
135		if(ns4)
136		{
137		  toolTipSTYLE.document.write(content);
138		  toolTipSTYLE.document.close();
139		  toolTipSTYLE.visibility = "visible";
140		}
141		if(ns6)
142		{
143		  document.getElementById("toolTipLayer").innerHTML = content;
144		  toolTipSTYLE.display='block'
145		}
146		if(ie4)
147		{
148		  document.all("toolTipLayer").innerHTML=content;
149		  toolTipSTYLE.display='block'
150		  //--图象过渡，淡入处理--
151		  var cssopaction=document.all("msg1").filters[0].opacity
152		  document.all("msg1").filters[0].opacity=0;
153		  if (rT) document.all("msg1").filters[1].Apply();
154		  if (bT) document.all("msg1").filters[2].Apply();
155		  document.all("msg1").filters[0].opacity=cssopaction;
156		  if (rT) document.all("msg1").filters[1].Play();
157		  if (bT) document.all("msg1").filters[2].Play();
158		  //----------------------
159		}
160	  }
161	} catch(e) {}
162}
163function moveToMouseLoc(e)
164{
165  var scrollTop = getScrollTop();
166  var scrollLeft = getScrollLeft();
167  if(ns4||ns6)
168  {
169    x = e.pageX + scrollLeft;
170    y = e.pageY - scrollTop;
171  }
172  else
173  {
174    x = event.clientX + scrollLeft;
175    y = event.clientY;
176  }
177  
178  if (x-scrollLeft > getViewportWidth() / 2) {
179  	x = x - document.getElementById("toolTipLayer").offsetWidth - 2 * offsetX;
180  }
181  
182  if ((y+document.getElementById("toolTipLayer").offsetHeight+offsetY)>

182getViewportHeight()) {
183	y = getViewportHeight()-document.getElementById("toolTipLayer").offsetHeight-offsetY;
184  }
185  toolTipSTYLE.left = (x + offsetX)+'px';
186  toolTipSTYLE.top = (y + offsetY + scrollTop)+'px';
187  return true;
188}
189initToolTips();