Question

请各位高手指点下 从asp.net数据库中读取的图片，是用控件绑定显示的，后面写了js代码，只是第一张图有效果

<asp:DataList ID="ListPhto" runat="server" RepeatColumns="4">
<ItemTemplate>
<table id="demo">
<tr >
<td colspan="2">

<img onerror="this.src='../../Resource/Img/化妆造型/hz-45.jpg'"
src="../../Resource/Img/化妆造型/<%#Eval("PIndex")%>" height="150px" width="175px" />

</td>

</tr>
</table>
</ItemTemplate>
</asp:DataList>

<div id="enlarge_images"></div>
//这是控制图片放大的js
<script type="text/javascript" >
var demo = document.getElementById("demo");
var gg = demo.getElementsByTagName("img");
var ei = document.getElementById("enlarge_images");
for (i = 0; i <= gg.length; i++) {
var ts = gg[i];
ts.onmousemove = function(event) {
event = event || window.event;
ei.style.display = "block";
ei.innerHTML = '<img src="' + this.src + '" />';
ei.style.top = document.body.scrollTop + event.clientY + 10 + "px";
ei.style.left = document.body.scrollLeft + event.clientX + 10 + "px";
}
ts.onmouseout = function() {
ei.innerHTML = "";
ei.style.display = "none";
}
ts.onclick = function() {
window.open(this.src);
}
}

</script>

Answer 1

js 放大图片的话，需要对每个图片有一个独立的id来。所以你的img 中需要添加id这个属情。这样函数才能识别是放大哪个图片！ 而你这个是改变table的大小！

追问

谢谢你的回答，我也试过了 ，在img 这也用了id=demo 了 但是还是那样，只是第一张图片放大，其他图片没反映

追答

lvyingtang 说的不错。
你可以这样试一下：用静态的方法来测，你就知道原理了。在静态的页面内设三张图片（三个表格也行）。每个图片的id 分别为demo1,demo2,demo3.那么就你调用一下js代码。这样你就应该可以实现效果了。所以，可以得出这样一个结论：如果要实现这个功能。那么用必须动态的为img或table标志动态分配id这样,js函数才能根据var demo=document.getElementById("img或table的id");获得独立的对象。而如你原来的原码的话。那么，我们的datolists中有就在若干个id为demo的table。而js脚本只得到第一个的，所以就只处理第一个的了。
编程算法很重要的!下面是我的写的html，换一下图片路径就可以了！

New Document

var gg = document.getElementsByTagName("img");
var ei = document.getElementById("enlarge_images");
for (i = 0; i ';
ei.style.top = document.body.scrollTop + event.clientY + 10 + "px";
ei.style.left = document.body.scrollLeft + event.clientX + 10 + "px";
}
ts.onmouseout = function() {
ei.innerHTML = "";
ei.style.display = "none";
}
ts.onclick = function() {
window.open(this.src);
}
}

追问

谢谢 非常感谢哦 " />图片是这样从数据库中读取的，只用这一句，所有图片都出来的，不能一个个都加id 啊

追答

呵呵，你这样啊。" " src="../../Resource/Img/化妆造型/" />这样就应该可以了。图片的id就是每条数据的id

Answer 2

你的脚本获取对象出错了!
var demo=document.getElementById("demo");//获取表格 对吧
//但是你的页面里会有很多个id=demo的表格,每个表格里只有一个img
//因为在datalist控件中流动的是<table id="demo">…………</table>
//如果页面里存在相同id的元素的话,js的getElementById会只取第一个
//所以,你的脚本只得到第一个id=demo的table,当然也只能处理到这个表格里的img

如果我的分析不错的话，把demo向上推一推就应该没问题了！
如：
var demo=document.getElementById("demo").parentNode.parentNode.parentNode;
//获取表格的父元素的父元素的父元素（看需要了）

追问

嗯 谢谢 id=demo 应该放在哪 我试过 都没对， 如何让脚本对那些所有图片都有效果

追答

你用一个 id=demo 的div把datalist包含起来
然后不用修改js代码应该也是可以的