折腾好多天了：想做类似 http://bt3.btchina.net 中的title效果？？？

动态插入用innerHTML就可以了，必要时用ajax鼠标移入移出控制比较困难
可加一个timer，维持out之后仍显示很短时间，这样能保证有足够时间检测鼠标的位置

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

TO:snmr_com(麒麟厍人) 谢谢您的回复。
预定的值是写在 HINTS_ITEMS = {...} 中的。然后JS将 HINTS_ITEMS 作为一个参数传给了另外一个JS，用innerHTML恐怕不行吧...麻烦您下载源码，看看：
http://www.zj36.com/div_title.zip谢谢！
你的代码恐怕只有你才能读其实都是值，把它们拼成一个长的HTML就能innerHTML替换了
看看这段代码是不是对你有所帮助呢？
<html><head><title>层与按钮对齐</title></head><body>
<div align=left><table border=1 width=600 height=50>
<tr align=center>
  <td>
    <input type=button value=ok onmouseover="cc(this)" alt="提示信息一"
     onmouseout="document.all.pop.style.display='none'">
  </td><td>
    <input type=button value=ok onmouseover="cc(this)" alt="提示信息二"
     onmouseout="document.all.pop.style.display='none'">
  </td><td>
    <input type=button value=ok onmouseover="cc(this)" alt="提示信息三"
     onmouseout="document.all.pop.style.display='none'">
  </td></tr>
</table><div><div id=pop style="
  position: absolute;
  width: 120;
  height: 30;
  z-index: 99;
  display: none;
  background-color: #FF0000"
>
图层文字</div><script language=javascript>
function cc(tt)
{
  var hint = tt.getAttribute("alt");
  var e  = document.getElementById("pop");
  var t  = tt.offsetTop;     //TT控件的定位点高
  var h  = tt.clientHeight;  //TT控件本身的高
  var l  = tt.offsetLeft;    //TT控件的定位点宽
  var ttyp  = tt.type;       //TT控件的类型
  while (tt = tt.offsetParent){t += tt.offsetTop; l += tt.offsetLeft;}
  e.style.top  = (ttyp=="image")? t + h : t + h + 6; //层的 Y 坐标
  e.style.left = l + 1;      //层的 X 坐标
  e.style.display = "block"; //层显示
  e.innerHTML = hint; //author: meizz
}
</script>
</body></html>
非常感谢，用另外一个属性值（ alt="提示信息一" ）来定义DIV的内容，很有启发。
这样我只要用asp.net给WEB控件动态加 alt 属性，就可以了...我试试先，有问题再请教您。
再次感谢！
改了一下，基本满足了我的要求，呵呵...<html><head><title>层与按钮对齐</title></head><body>
<div align=left><table border=1 width=600 height=50>
<tr align=center>
  <td>
    <input type=button value=ok onmouseover="cc(this)" alt="XXX提示信息一<br>第二行<br><a href='#'>更详细资料请点击</a>"
     onmouseout="delay()">
  </td><td>
    <input type=button value=ok onmouseover="cc(this)" alt="提示信息二"
     onmouseout="document.all.pop.style.display='none'">
  </td><td>
    <input type=button value=ok onmouseover="cc(this)" alt="提示信息三"
     onmouseout="document.all.pop.style.display='none'">
  </td></tr>
</table><div><div id=pop style="
  position: absolute;
  width: 120;
  height: 30;
  z-index: 99;
  display: none;
  background-color: #FF0000"
>
图层文字</div><script language=javascript>
var hide_delay=null;
function cc(tt)
{
  if (hide_delay) {
clearTimeout(hide_delay);
hide();
  }
  var hint = tt.getAttribute("alt");
  var e  = document.getElementById("pop");
  var t  = tt.offsetTop;     //TT控件的定位点高
  var h  = tt.clientHeight;  //TT控件本身的高
  var l  = tt.offsetLeft;    //TT控件的定位点宽
  var ttyp  = tt.type;       //TT控件的类型
  while (tt = tt.offsetParent){t += tt.offsetTop; l += tt.offsetLeft;}
  e.style.top  = (ttyp=="image")? t + h : t + h + 6; //层的 Y 坐标
  e.style.left = l + 1;      //层的 X 坐标
  e.style.display = "block"; //层显示
  e.innerHTML = hint; //author: meizz
}
function delay()
{
  hide_delay=setTimeout('hide()',2000);
}
function hide()
{
  document.all.pop.style.display='none';
}
</script>
</body></html>
怎么样根据鼠标位置和屏幕、窗口的尺寸，动态设定这个div的...
  width:   height:   top:  left:
我改了改，但还是不很理想，窗口缩小后，鼠标靠近边缘时div变成一个长条状？-------------------------------------------------------------------------------------------
先取消里面的width、height属性定义：
<div id=pop style="
  position: absolute;
  z-index: 99;
  display: none;
  background-color: #FF0000"
>再修改了JS脚本：
<script language=javascript>
document.onmousemove = f_onMouseMove;var hide_delay=null;
var left=5;
var top=5;
function cc(tt)
{
  if (hide_delay) {
clearTimeout(hide_delay);
hide();
  }
  var n_win_l = f_scrollLeft();
  var n_win_t = f_scrollTop();
  var n_x = window.n_mouseX + n_win_l + left;
  var n_y = window.n_mouseY + n_win_t + top;
  var hint = tt.getAttribute("alt");
  var e  = document.getElementById("pop");
  var t  = tt.offsetTop;     //TT控件的定位点高
  var h  = tt.clientHeight;  //TT控件本身的高
  var l  = tt.offsetLeft;    //TT控件的定位点宽
  var ttyp  = tt.type;       //TT控件的类型
  while (tt = tt.offsetParent){t += tt.offsetTop; l += tt.offsetLeft;}
  //e.style.top  = (ttyp=="image")? t + h : t + h + 6; //层的 Y 坐标
  //e.style.left = l + 1;      //层的 X 坐标
var n_w = getSize(e);
var n_h = getSize(e, true);
var n_win_w = f_clientWidth()
var n_win_h = f_clientHeight(); if (n_x + n_w > n_win_w + n_win_l) n_x = n_win_w + n_win_l - n_w;
if (n_x < n_win_l) n_x = n_win_l;
if (n_y + n_h > n_win_h + n_win_t) n_y = n_win_h + n_win_t - n_h;
if (n_y < n_win_t) n_y = n_win_t;
  e.style.left = n_x;
  e.style.top = n_y;
  e.style.display = "block"; //层显示
  e.innerHTML = hint; //author: meizz
}
function getSize (id, b_hight) {
  if (b_hight) {
     return id.offsetHeight;
  }
  else {
     return id.offsetWidth;
  }
}
function delay()
{
  hide_delay=setTimeout('hide()',2000);
}
function hide()
{
  document.all.pop.style.display='none';
}
function f_onMouseMove(e_event) {
if (!e_event && window.event) e_event = window.event;
if (e_event) {
window.n_mouseX = e_event.clientX;
window.n_mouseY = e_event.clientY;
}
return true;
}
function f_scrollLeft() {
if (typeof(window.pageXOffset) == 'number')
return window.pageXOffset;
if (document.body && document.body.scrollLeft)
return document.body.scrollLeft;
if (document.documentElement && document.documentElement.scrollLeft)
return document.documentElement.scrollLeft;
return 0;
}
function f_scrollTop() {
if (typeof(window.pageYOffset) == 'number')
return window.pageYOffset;
if (document.body && document.body.scrollTop)
return document.body.scrollTop;
if (document.documentElement && document.documentElement.scrollTop)
return document.documentElement.scrollTop;
return 0;
}
function f_clientWidth() {
if (typeof(window.innerWidth) == 'number')
return window.innerWidth;
if (document.documentElement && document.documentElement.clientWidth)
return document.documentElement.clientWidth;
if (document.body && document.body.clientWidth)
return document.body.clientWidth;
return null;
}
function f_clientHeight() {
if (typeof(window.innerHeight) == 'number')
return window.innerHeight;
if (document.documentElement && document.documentElement.clientHeight)
return document.documentElement.clientHeight;
if (document.body && document.body.clientHeight)
return document.body.clientHeight;
return null;
}</script>
用不着这么麻烦，要实现tip，容易得很的嘛
三个事件触发句柄
等会给你写个示例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document - http://www.never-online.net </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="never-online, blueDestiny">
<META NAME="Keywords" CONTENT="never-online, blueDestiny">
<META NAME="Description" CONTENT="http://www.never-online.net">
<style>
body, pre
{
font-size: 0.9em;
font-family: verdana;
}
.copyright
{
text-align: center;
font-size: 1em;
}
.tips
{
border: 1px solid #666666;
padding: 5px 10px 5px 10px;
position: absolute;
background-color: #ffffff;
filter:alpha(Opacity=80);
}
</style>
</HEAD>
<BODY>
<img src="http://zi.csdn.net/300_60.gif" tips="猫扑招人">
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
<h4 class="copyright"> Power By blueDestiny, never-online, <a href="http://www.never-online.net" tips="welcome to never-online's Website">http://www.never-online.net</a> </h4>
</BODY>
</HTML>
谢谢：BlueDestiny(May Be I am Really never online.) 您的方法确实很方便，DIV能跟随鼠标移动，并自动变换宽度...
但无法将鼠标移动到Tip内，如果我的Tip内有个超链接，而我想点击它...
比如：
<img src="http://zi.csdn.net/300_60.gif" tips="猫扑招人<br>第二行<br><a href='http://www.163.com'>具体信息请点击这里</a>">
于是我有修改了部分：
.....略......
var hide_delay=null;
function fnHandleOver() {
var El = event.srcElement;
var Tips = El.getAttribute("tips");
if (!Tips) {fnHandleOut(); return; }
if (hide_delay) {
clearTimeout(hide_delay);
hidenow();
}
with (_tips.style) {
display = "";
left = event.clientX + 10;
top = event.clientY + 10;
}
_tips.innerHTML = Tips;
}
function fnHandleOut() {
hide_delay=setTimeout('hidenow()',6000);
}
function hidenow() {
_tips.style.display = "none";
}
.....略......
但如此修改后，再移动鼠标Tip跟随移动时，总感觉会闪烁？另外，还有一个致命缺点：
因为我是准备用在表格中的，如：
<tr tips="哺乳动物<br><a href='XXX'>查看相关信息</a>"><td>大象</td></tr>
<tr tips="两栖动物<br><a href='XXX'>查看相关信息</a>"><td>青蛙</td></tr>
如果Tip块一直跟随着鼠标，将无法点击到超链接，因为再往上、下移就又碰到另外一行了，原先的Tip会马上消失，出来新的Tip...........鼠标第一次移入热区(<tr>)，就确定Tip块的位置，再在同一热区内移动，不改变其位置。
这样该怎么做呢？
meizz 回答的问题,我的js水平可远不如他....呵呵,叫我来也木多大用的,问题应该解决了吧,最近在改我们网站的构架,实在很忙,见谅了
不好意思，最近太忙了，你得先自己试着改改，把onmouseout事件去掉，根据move事件判断坐标即可了。有什么问题pm我吧