鼠标经过小图显示大图和详细信息
现在我要在大图下再加上几个详细信息，像名称，价格之类的，就出现问题了
<asp:DataList ID="DataList1" runat="server" RepeatColumns="9" RepeatDirection="Horizontal"
CellSpacing="9">
<ItemTemplate>
<a class="thumbnail" href="#thumb">
<img src="images/<%#Eval("product_img") %>" id="oimg" alt="鼠标通过小图显示大图和详细信息" width="100px" height="100px" style="border:0" />
<span><img src="images/<%#Eval("product_img") %>" border="0" width="212px" height="212px"><br />
<asp:Label ID="Label1" runat="server" Text='<%#Eval("product_name") %>' Font-Bold="true" Font-Size="14px" ForeColor="#0063DC"></asp:Label><br />
￥<asp:Label ID="Label2" runat="server" Text='<%#Eval("product_price") %>' Font-Size="12px" Font-Bold="true" ForeColor="#FF6600"></asp:Label>
</span></a>
</ItemTemplate>
</asp:DataList>
这个就不行了，效果就成了下面这样
/uploadfile/jiaocheng/20140128/2651/2014012621513837994.jpg
要怎么该才能让它一行一行的按顺序显示呢？
[解决办法]
这是样式问题。。。控制好样式就可以了
[解决办法]
我记得有现成的jQuery插件的。
[解决办法]
弄个插件吧，或者自己写一个。举例：
<!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>
<style type="text/css">
*{ margin:0; padding:0;}
img{ border:none;}
.content{ width:1100px; margin:0 auto;}
.imglist{ width:1100px;}
.imglist img{ float:left; margin-right:5px;}
#HintImg{ position:absolute; padding:0; margin:0; display:none; z-index:999}
</style>
</head>
<body>
<div class="content">
<div style="height:50px;"></div>
<div class="imglist">
<img alt="鼠标通过小图显示大图和详细信息" title="" src="http://avatar.profile.csdn.net/3/B/4/1_qiqishardgel.jpg"
shouimg="http://avatar.csdn.net/3/B/4/1_qiqishardge.jpg" />
<img alt="鼠标通过小图显示大图和详细信息" title="" src="http://avatar.profile.csdn.net/3/B/4/1_qiqishardgel.jpg"
shouimg="http://avatar.csdn.net/3/B/4/1_qiqishardge.jpg" />
<img alt="鼠标通过小图显示大图和详细信息" title="" src="http://avatar.profile.csdn.net/3/B/4/1_qiqishardgel.jpg"
shouimg="http://avatar.csdn.net/3/B/4/1_qiqishardge.jpg" />
<img alt="鼠标通过小图显示大图和详细信息" title="" src="http://avatar.profile.csdn.net/3/B/4/1_qiqishardgel.jpg"
shouimg="http://avatar.csdn.net/3/B/4/1_qiqishardge.jpg" />
<img alt="鼠标通过小图显示大图和详细信息" title="" src="http://avatar.profile.csdn.net/3/B/4/1_qiqishardgel.jpg"
shouimg="http://avatar.csdn.net/3/B/4/1_qiqishardge.jpg" />
</div>
</div>
<div id="HintImg"></div>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(".imglist img").hover(function() {
$("*").stop(); //停止所有正在运行的动画
var offset = $(this).offset(); //取得事件对象的位置
var _left = (offset.left + $(this).width() + $("#HintImg").width() < 1100) ? (offset.left + $(this).width()) : (offset.left - $("#HintImg").width());
$("#HintImg").html('<img alt="鼠标通过小图显示大图和详细信息" title="" src="' + $(this).attr("shouimg") + '" />').css({ "top": offset.top + "px", "left": _left + "px" }).fadeIn(500);
}, function() {
$("#HintImg").hide();
});
</script>
</body>
</html>
