鼠标经过小图显示大图和详细信息
我现在要实现一个效果是鼠标滑过小图时显示大图和详细信息，我在网上找了段代码
<style type="text/css">
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 100;
}
.thumbnail span{
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -600px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
width:220px;
height:320px;
}
.thumbnail span img{
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{
visibility: visible;
top: 0;
left: 60px;
}
</style>
<asp:DataList ID="DataList1" runat="server" RepeatColumns="9" RepeatDirection="Horizontal"
CellSpacing="9">
<ItemTemplate>
<a alt="鼠标透过小图显示大图和详细信息" />
现在我要在大图下再加上几个详细信息，像名称，价格之类的，就出现问题了
<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/2014/0125/201401251844297517.jpg
要怎么该才能让它一行一行的按顺序显示呢？
[解决办法]
<style type="text/css">
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 100;
}
.thumbnail span{
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -600px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
width:220px;
height:320px;
}
.thumbnail span img{
border-width: 0;
padding: 2px;
}
.thumbnail span p{
position:absolute; left:0px; bottom:0px; height:20px; line-height:20px; text-align:center;
}
.thumbnail:hover span{
visibility: visible;
top: 0;
left: 60px;
}
</style>
<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">
<p>测试测试测试</p>
</span></a>
</ItemTemplate>
</asp:DataList>
这样呢，你这个代码，ie6是不支持
[解决办法]
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
img {
border:0;
}
.over { /*鼠标放入时的样式*/
border:3px #F00 solid;
}
.out {/*移除时的样式*/
border: #F00 0px solid;
}
</style>
</head>
<body>
<img src="1.png" id="ImgOut" style="border:0;" /><br />
<hr />
<img src="01.png" id="a1" /><!--把你的图片路径放上-->
<img src="02.png" id="a2" />
<img src="03.png" id="a3" />
</body>
<script type="text/javascript">
var x = document.getElementsByTagName("img");
for (var i=0;i<x.length;i++){
x[i].onmouseover = function (){ //鼠标移入时的样式.
this.className="over";//设置样式
var x = this.id[1]+".png";//拼接图片地址
if(this.id!="ImgOut"){//当前id为大图,就忽略.
var y = document.getElementById("ImgOut");//获取显示图片的地址
y.setAttribute("src",x);//设置图片地址.
}
}
x[i].onmouseout = function (){ //鼠标移出时的样式
this.className="out";//设置样式
}
}
</script>
</html>
自己改一下吧。样式可以直接改.在chrome,firefox里面没问题.