比如一个产品表，每一行就是一个产品记录，现在想把鼠标指到第一行，就在这行的附近（可以在右边稍微下点的位置）展示一个div，里面的内容就是产品详细介绍。
可是现在我的问题就是不知道怎么给这个div定位。请教大家哦！
------解决方案--------------------
[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属性写成自增的就好了
------解决方案--------------------
这段代码可以实现 在GridView中随着鼠标的移动，在鼠标右下方，显示不同的图片。
前台代码：
- HTML code
<%@ 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>