鼠标指到表的每一行记录时，动态的展示一个div，这么定位呢

建议参照一下csdn头像的方法，

[code=HTML]<HTML>
<HEAD>
<script Language="JavaScript">
function showDivMenu(sub){
  document.getElementById(sub).style.left = window.event.clientX - 100 ;//鼠标位置
  document.getElementById(sub).style.top = window.event.clientY + 15 ;
  if (document.getElementById(sub).style.display =="none")
  {
    document.getElementById(sub).style.display ="block";
   }
  else if(document.getElementById(sub).style.display == "block")
  {
      document.getElementById(sub).style.display ="none";
  }
}
</Script>
</HEAD>
<BODY>
<table>
<tr>
<td nowrap onMouseOver="showDivMenu('leon1')" onMouseOut="showDivMenu('leon1')">
<div align="center">XX1111XX</div>
<div id="leon1" style="position:absolute; background:#B8D5F5; display:none;">
111111111111111111
</div>
</td>
</tr>
<tr>
<td nowrap onMouseOver="showDivMenu('leon2')" onMouseOut="showDivMenu('leon2')">
<div align="center">XX222XX</div>
<div id="leon2" style="position:absolute; background:#B8D5F5; display:none;">
22222222222222222222222
</div>
</td>
</tr>
</table>
</BODY>
</HTML>[code]<div id="leon">的id属性写成自增的就好了

也就是取鼠标的位置！function show( events )
{
    //取鼠标位置
    var x = events.x ? events.x : events.pageX;
    var y = events.y ? events.y : events.pageY;
}<input type="button" value="test" onclick="show(event);"给div加上样式style="position:absolute;"他的top 和left属性设定为
divname.style.top  = y;
divname.style.left = x;如果想让他移动到上面就显示，移开就隐藏，就设置divname.style.display 为 '' 或者 'none'!

虽然是取鼠标的位置来设置div的位置
但是这个表是有滚动条的，好像有滚动条的时候div就不是那么听话了，设置起来这样好像不行吧

这段代码可以实现在GridView中随着鼠标的移动，在鼠标右下方，显示不同的图片。
前台代码：<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
   </head>
<body>
    <form id="form1" runat="server">
    <script language="javascript" type="text/javascript">
//browser detection
    var agt=navigator.userAgent.toLowerCase();
    var is_major = parseInt(navigator.appVersion);
    var is_minor = parseFloat(navigator.appVersion);    var is_nav  = ((agt.indexOf('mozilla')!=-1) && (agt.indexOf('spoofer')==-1)
                && (agt.indexOf('compatible') == -1) && (agt.indexOf('opera')==-1)
                && (agt.indexOf('webtv')==-1) && (agt.indexOf('hotjava')==-1));
    var is_nav4 = (is_nav && (is_major == 4));
    var is_nav6 = (is_nav && (is_major == 5));
    var is_nav6up = (is_nav && (is_major >= 5));
    var is_ie     = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));
</script><script language="javascript" type="text/javascript">
debugger;
    var offsetX = 0;
    var offsetY = 5;
    var opacity = 100;
    var toolTipSTYLE;    function toolTip(msg, fg, bg)
    {
      if(toolTip.arguments.length < 1) // if no arguments are passed then hide the tootip
      {
        if(is_nav4)
            toolTipSTYLE.visibility = "hidden";
        else
            toolTipSTYLE.display = "none";
      }
      else // show
      {
        if(!fg) fg = "#777777";
        if(!bg) bg = "#ffffe5";
        var content = '<table border="0" cellspacing="0" cellpadding="0" class="toolTip"><tr><td bgcolor="' + fg + '">' +
                                      '<table border="0" cellspacing="1" cellpadding="0"<tr><td bgcolor="' + bg + '">'+
                                      '<font face="sans-serif" color="' + fg + '" size="-2">' + msg +
                                      '</font></td></tr></table>'+
                                      '</td></tr></table>';
       if(is_nav4)
        {
          toolTipSTYLE.document.write(content);
          toolTipSTYLE.document.close();
          toolTipSTYLE.visibility = "visible";
        }        else if(is_ie || is_nav6up)
        {
          document.getElementById("toolTipLayer").innerHTML = content;
          toolTipSTYLE.display='block'
        }
      }
    }    function moveToMousePos(e)
    {
      if(!is_ie){
        x = e.pageX;
        y = e.pageY;
      }else{
        x = event.x + document.body.scrollLeft;
        y = event.y + document.body.scrollTop;
      }      toolTipSTYLE.left = x + offsetX+'px';
      toolTipSTYLE.top = y + offsetY+'px';
      return true;
    }    function show(strPath)
    {
        var strtemp = strPath.replace('~', '../..');
        if(document.getElementById)
        {
              toolTipSTYLE = document.getElementById("toolTipLayer").style;
        }
        if(is_ie || is_nav6up)
        {
            toolTipSTYLE.visibility = "visible";
            toolTipSTYLE.display = "none";
            document.onmousemove = moveToMousePos;
        }

        s = '<table width="103px" cellspacing="2" cellpadding="2" border="0">';
        s += '<tr><td><img src="'+ strtemp + '" border="0"/> </td></tr>';
        s += '</table>';
        toolTip(s);
     }
</script>
<div id="toolTipLayer" style="position: absolute; visibility: hidden; left: 0; right: 0">
</div>
<asp:GridView ID="GV1" runat="server" AllowPaging="True" AutoGenerateColumns="False"
        Width="100%" OnRowDataBound="GV1_RowDataBound">
        <Columns>
            <asp:TemplateField HeaderText="序号">
                <ItemStyle HorizontalAlign="Center" Width="5%"></ItemStyle>
                <ItemTemplate>
                    <asp:Label ID="LbNo" runat="server" Text='<%# this.GV1.PageIndex * this.GV1.PageSize + this.GV1.Rows.Count + 1 %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField Visible="true">
                <ItemStyle HorizontalAlign="Center" Width ="5%"></ItemStyle>
                <ItemTemplate>
                    <asp:Label ID="LbId" runat="server" Text='<% # Bind("ImgID") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="预览图片">
                <ItemStyle  Width="10%"></ItemStyle>
                <ItemTemplate>
                    <asp:HiddenField ID="hidImage" runat="server" Value='<% # Bind("ImgUrl") %>' />
                    <asp:Label ID="LbPreview" runat="server" Text="预览"></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>        </Columns>
        <HeaderStyle BackColor="Silver"></HeaderStyle>
        <AlternatingRowStyle BackColor="#C0FFC0"></AlternatingRowStyle>
    </asp:GridView>
    </form>
</body>
</html>
.CS代码：using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        SQLHelper sql = new SQLHelper();
        DataTable dt = sql.getpicinfo();
        this.GV1.DataSource = dt;
        this.GV1.DataBind();
    }
    protected void GV1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        //---要绑定的数据Services方法--
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            HiddenField hidImage = (HiddenField)e.Row.FindControl("hidImage");
            Label lbPreview = (Label)e.Row.FindControl("LbPreview");
            Label lbId = (Label)e.Row.FindControl("lbId");            if (lbPreview == null || hidImage == null || lbId ==null  )
            {
                return;
            }            if (!string.IsNullOrEmpty(hidImage.Value))
            {
                // get selected user name
                lbPreview.Attributes.Add("onmouseover", "show(\'" + hidImage.Value.Trim() + "\')");
                lbPreview.Attributes.Add("onmouseout", "toolTip()");
            }
        }
    }
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Form field hints with CSS and JavaScript</title>
<style type="text/css">
/* All form elements are within the definition list for this example */
dl {
font:normal 12px/15px Arial;
    position: relative;
    width: 350px;
}
dt {
    clear: both;
    float:left;
    width: 130px;
    padding: 4px 0 2px 0;
    text-align: left;
}
dd {
    float: left;
    width: 200px;
    margin: 0 0 8px 0;
    padding-left: 6px;
}
/* The hint to Hide and Show */
.hint {
    display: none;
    position: absolute;
    right: -250px;
    width: 200px;
    margin-top: -4px;
    border: 1px solid #c93;
    padding: 10px 12px;
    /* to fix IE6, I can't just declare a background-color,
    I must do a bg image, too!  So I'm duplicating the pointer.gif
    image, and positioning it so that it doesn't show up
    within the box */
    background: #ffc url(pointer.gif) no-repeat -10px 5px;
}/* The pointer image is hadded by using another span */
.hint .hint-pointer {
    position: absolute;
    left: -10px;
    top: 5px;
    width: 10px;
    height: 19px;
    background: url(pointer.gif) left top no-repeat;
}
</style>
<script type="text/javascript">
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}function prepareInputsForHints() {
var inputs = document.getElementsByTagName("input");
for (var i=0; i<inputs.length; i++){
  // test to see if the hint span exists first
  if (inputs[i].parentNode.getElementsByTagName("span")[0]) {
   // the span exists!  on focus, show the hint
   inputs[i].onfocus = function () {
    this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
   }
   // when the cursor moves away from the field, hide the hint
   inputs[i].onblur = function () {
    this.parentNode.getElementsByTagName("span")[0].style.display = "none";
   }
  }
}
// repeat the same tests as above for selects
var selects = document.getElementsByTagName("select");
for (var k=0; k<selects.length; k++){
  if (selects[k].parentNode.getElementsByTagName("span")[0]) {
   selects[k].onfocus = function () {
    this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
   }
   selects[k].onblur = function () {
    this.parentNode.getElementsByTagName("span")[0].style.display = "none";
   }
  }
}
}
addLoadEvent(prepareInputsForHints);
</script>
</head>
<body>
<p style="font:normal 12px/15px Arial;">Tab or click through the fields to reveal the hints.</p><dl>
<dt>
  <label for="firstname">First Name:</label>
</dt>
<dd>
  <input
   name="firstname"
   id="firstname"
   type="text" />
  <span class="hint">This is the name your mama called you when you were little.<span class="hint-pointer"> </span></span>
</dd>
<dt>
  <label for="lastname">Last Name:</label>
</dt>
<dd>
  <input
   name="lastname"
   id="lastname"
   type="text" />
  <span class="hint">This is the name your sergeant called you when you went through bootcamp.<span class="hint-pointer"> </span></span>
</dd>
<dt>
  <label for="email">Email:</label>
</dt>
<dd>
  <input
   name="email"
   id="email"
   type="text" />
  <span class="hint">The thing with the @ symbol and the dot com at the end.<span class="hint-pointer"> </span></span>
</dd>
<dt><label for="year">Birth Year:</label></dt>
<dd>
  <select id="year" name="year">
   <option value="">YYYY</option>
   <option value="1066">1066</option>
   <option value="1492">1492</option>
   <option value="1776">1776</option>
   <option value="1812">1812</option>
   <option value="1917">1917</option>
   <option value="1942">1942</option>
   <option value="1999">1999</option>
  </select>
  <span class="hint">Pick a famous year to be born in.<span class="hint-pointer"> </span></span>
</dd>
<dt>
  <label for="username">Username:</label>
</dt>
<dd>
  <input
   name="username"
   id="username"
   type="text" />
  <span class="hint">Between 4-12 characters.<span class="hint-pointer"> </span></span>
</dd>
<dt>
  <label for="password">Password:</label>
</dt>
<dd>
  <input
   name="password"
   id="password"
   type="password" />
  <span class="hint">Between 5-13 characters, but not 7.  Never 7.<span class="hint-pointer"> </span></span>
</dd>
<dt class="button"> </dt>
<dd class="button">
  <input
   type="submit"
   class="button"
   value="Submit" />
</dd>
</dl>
<a href="http://webdeveloper.earthweb.com/repository/javascripts/2008/05/879041/formfieldhints.zip">Download This JavaScript</a></body>
</html>网上看到的，参考下吧，IE中测试过，好用的

调试易

鼠标指到表的每一行记录时，动态的展示一个div，这么定位呢

解决方案 »