datalist的问题

Question

<datalist id="list" runat="server">
<ItemTemplate>
   <table><tr><td>                <asp:Image runat="server" ID="img1" Width="100" Height="120" ImageUrl='<%# Eval("style_no")  %>'/></td><td></tr>
</ItemTemplate>
</datalist>我想实现点击这个image时用一个div显示放大的图片，请问该怎么做？

Answer 1

你址接有那个Imagen改成客户端的代码后，写一个JS，就可以解决了！如果你是没思路，要源码，可以看看这篇帖子：http://bbs.661z.com/thread-633-1-1.html不过，址接操作DIV也可以实现这样的效果！

Answer 2

关键是我用的datalist控件，不用这个实现就很容易，不知道如何选择不同项了取出对应的imageurl

Answer 3

先用隐藏的DIV绑定一个放大的图片，点击image后触发document.all('div1').style.display='block'

Answer 4

 function DispTitleImg(lp){
var l = document.getElementById('lyImg');
if (lp != ""){
if (lp.value.substr(lp.length-3).toLowerCase()=="swf"){
l.innerHTML = "<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0' width='240' height='180'><param name='movie' value='"+ lp +"'/><param name='quality' value='high'/><param name='play' value='-1'><embed src='"+ lp.value +"' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' quality='high' width='240' height='180'></embed></object>"
}else{
l.innerHTML = "<img src='../../UploadFile/"+ lp +"'>";
}
l.style.display=='none' ? l.style.display='' : l.style.display='none';
}else{
l.style.display = 'none';
}
}

Answer 5

行不通，说找不到document.all对象

Answer 6

5楼得 document.getElementById('lyImg'); 指得是你放在DIV里面显示大图得Img控件..把图片路径作为参数传到js函数中

Answer 7

其实主要问题是js中怎么访问datalist的某个绑定值

Answer 8

传递图片地址到js函数。然后显示在div中就可以。难点在于如何控制div显示在鼠标旁边

Answer 9

微软的ajax案例中有这么个类似的功能，不妨改来用用 

Answer 10

郁闷，CSDN里的高手都那里去了

Answer 11

楼主的意思是不是如果可以取得ＵＲＬ就知道实现了啊！
其实这也是很简单的．你在Datalist的Item绑定事件中给每个Image增加一个Click事件．Item绑定事件（sender,e）｛
　　　　(e.Row.FindControl("img1") as Image).Attributes.Add("onclick","javascript:ShowDiv(this)");
｝然后在aspx页面中写ＪＳ函数．function ShowDiv(obj){
   var url= obj.xxx;//看生成的是啥东东，估计是obj.href吧，我也没试．就取得ＵＲＬ了．}

Answer 12

    protected void DataList1_ItemDataBound(object sender, DataListItemEventArgs e)
    {
       //小图和大图都在datalist中绑定了url,可以先大图不可见
        Image Image1 = (Image)e.Item.FindControl("Image1");//找到Image1控件，小图
        string str2 = Image1.ImageUrl;
        Image Image2 = (Image)e.Item.FindControl("Image2");//找到Imgae2控件，大图
        string str = Convert.ToString(Image2.ImageUrl);//将图片地址给str
                Image1.Attributes.Add("onmouseover", "showImage(this,'"+str+"')");//调用JS文件中的showImage函数，在小图边div显示大图
        //Image1.Attributes.Add("onmouseover", "this.src='../images/pz/R106-20-BMW-1.jpg'");
      //这句把小图换成大图
    }
showImage的js,很好看的
if(document.all["_showImage"]==null) document.write('<img id=_showImage style="z-index:999; display:none; position:absolute; border:1 solid black" onmouseout="style.display=&quot;none&quot;">');/**
 * 显示弹出图片。
 * @param tag 目标元素。弹出的框将显示在其旁边
 * @param url 需要弹出的图片的URL
 * @param pos 弹出位置。0=右，1=上，2=左，3=下，缺省为自动选择最佳方位。
 */
function showImage(tag,url,pos) {
    tag.attachEvent("onmouseout",mouseout);    var helper = document.all["_showImage"];
    helper.removeAttribute("src");
    helper.removeAttribute("width");
    helper.removeAttribute("height");
    helper.onload=showImage_show;
    helper.src = url;    function mouseout() {
        //if(event.toElement != helper) //注释本行将使鼠标移出原图时弹出图立即关闭
            helper.onmouseout();
        helper.onload = null;
        helper.removeAttribute("src");
        tag.detachEvent("onmouoseout",arguments.callee);
    }    function showImage_show() {
        var rc = tag.getBoundingClientRect();
        helper.style.display = '';
        var rc2 = helper.getBoundingClientRect();
        helper.alt = (rc2.right-rc2.left)+" x "+(rc2.bottom-rc2.top);        var body = document.body;        var l = rc.left;
        var t = rc.top;
        var r = body.clientWidth-rc.right;
        var b = body.clientHeight-rc.bottom;
        var ratio = (rc2.bottom-rc2.top) / (rc2.right-rc2.left);        var pos = typeof(pos)!='undefined'?pos:-1;
        if(pos >= 0) { //指定了显示方位
            var w = pos==1||pos==3?body.clientWidth : pos==0?r:l;
            var h = pos==0||pos==2?body.clientHeight : pos==1?t:b;
            if(h < w*ratio) w = h/ratio;
            else if(w < h/ratio) h = w*ratio;        } else { //未指定显示方位，自动选择
            var pos0_2 = l < r ? 0 : 2;
            var pos1_3 = t < b ? 3 : 1;
            var w = l < r ? r : l;
            var h = t < b ? b : t;
            var h1 = w*ratio; if(h1 > body.clientHeight) h1 = body.clientHeight;
            var h2 = body.clientWidth*ratio; if(h2 > h) h2 = h;
            if(h1 > h2) {
                var pos = pos0_2;
                h = h1;
                w = h1 / ratio;
            } else {
                var pos = pos1_3;
                h = h2;
                w = h2 / ratio;
            }
        }        if(rc2.bottom-rc2.top > h || rc2.right-rc2.left > w) {
            helper.width = w;
            helper.height = h;
        }        var rc2 = helper.getBoundingClientRect();
        l = (pos==1||pos==3?rc.left:pos==0?rc.right:rc.left-(rc2.right-rc2.left));
        t = (pos==0||pos==2?rc.top:pos==3?rc.bottom:rc.top-(rc2.bottom-rc2.top));
        var k = body.clientWidth-(l+rc2.right-rc2.left);
        if(k < 0) l += k;
        var k = body.clientHeight-(t+rc2.bottom-rc2.top);
        if(k < 0) t += k;        helper.style.left = -2+body.scrollLeft+l;
        helper.style.top = -2+body.scrollTop+t;
    }}

Answer 13

一个简单的问题非要搞这么复杂……
js+css
搜索一下
thickbox
or
lightbox懒的搜索，点下面这个地址
http://jquery.com/demo/thickbox/

Answer 14

想给自己分，但是不行，散分了。其实是个很简单的问题，主要是思路没有变化过来，先把值在server端取出来传给JS不就结了，在客户端来获取还是有难度的。protected void DataList1_ItemDataBound(object source, DataListItemEventArgs e)
    {
        Image styleimg = (Image)e.Item.FindControl("img1");
        if (styleimg != null)
        {
            styleimg.Attributes.Add("onmouseover", "this.style.backgroundColor='#E6F5FA';document.getElementById('dtl').style.display='block';return getxinxi('" + styleimg.ImageUrl.ToString() + "')");
            styleimg.Attributes.Add("onmouseout", "this.style.backgroundColor='#FFFFFF';document.getElementById('dtl').style.display='none'");
        }
    }
脚本
<script type="text/javascript">
function getxinxi(i) 
  { 
if(window.event.clientX+400>1280)
{
   document.getElementById('dtl').style.left=window.event.clientX-200;
   document.getElementById('dtl').style.top=window.event.clientY;
}
else
{
   document.getElementById('dtl').style.left=window.event.clientX;
   document.getElementById('dtl').style.top=window.event.clientY;
} 
  document.getElementById('div1').src=i;
  return false; 
  } 
  </script>
另外加个隐藏的DIV就OK