asp.net datalist中绑定文字很图片，当鼠标移动到文字上出现相应的图片，怎么实现？

       <asp:DataList ID="DataList1" runat="server">
        <ItemTemplate>
        <table>
        <tr>
        <td>
            <asp:LinkButton ID="LinkButton1" runat="server" Text='<%# Eval("statement") %>' CommandArgument='<%# Eval("picid") %>'></asp:LinkButton>      
        </td>
        </tr>
        <tr>
        <td>
         <asp:ImageButton ID="ImageButton2" runat="server" Visible="false" ImageUrl='<%# Eval("bigimg","images\\{0}") %>' />        </td>
        </tr>
        </table> 
        </ItemTemplate>
        </asp:DataList>

解决方案 »

  1.   

    onmousemove,onmouseot
    弹出显示div,隐藏div
    function show(name,action){
    if(action=="show"){
      document.getElementById(name).style.visibility="visible";
    }
    else if(action=="hide"){
      document.getElementById(name).style.visibility="hidden";
    }
    }
     onmouseover="show('','')" onmouseout="show('','')"  
      

  2.   

    第一种 用这两个JS事件 onmouseover 和 onmouseleave 给你的文字外面span 加上事件第二种 就是直接在span 上加上CssClass="cImg"然后$(function(){//相当于window.onload
    $('.cImg').tooltip({ //cImg为Image className
        delay: 0, 
        showURL: false, 
        bodyHandler: function() { 
            return $("<img/>").attr("src", this.src);//弹出层显示原始图片大小 
        } 
    });});
    参考
      

  3.   

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>无标题页</title>
        <script type="text/javascript">
            function showImage(obj){
                var e = e||window.event;
                var div = document.getElementById("Image");
                var path = obj.innerHTML;
                div.innerHTML="<img src='"+path+"' width='100' height='100'/>";
                div.style.display="block";
                div.style.top = e.clientY;
                div.style.left=e.clientX;
            }
            function hideImage(){
                document.getElementById("Image").style.display="none";
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div id="Image" style="position:absolute;width:100px;height:100px;border:1px solid red;display:none;"></div>
        <div>
            <asp:DataList ID="DataList1" runat="server">
            <HeaderTemplate><table></HeaderTemplate>
            <ItemTemplate>
                <tr>
                <td><span onmouseover="showImage(this)" onmouseout="hideImage()"><%#Eval("Path")%></span></td>
                <td><img src='<%#Eval("Path") %>' /></td>
                </tr>
            </ItemTemplate>
            <HeaderTemplate></table></HeaderTemplate>
            </asp:DataList>
        </div>
        </form>
    </body>
    </html>
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                DataList1.DataSource = getDataTable();
                DataList1.DataBind();
            }
        }
        public DataTable getDataTable()
        {
            string[] name = { "images/p002.jpg", "images/p003.jpg", "images/p004.jpg" };
            DataTable dt = new DataTable();
            dt.Columns.Add("ID", typeof(System.Int32));
            dt.Columns.Add("Path", typeof(System.String));
            for (int i = 0; i < name.Length; i++)
            {
                DataRow row = dt.NewRow();
                row[0] = i + 1;
                row[1] = name[i];
                dt.Rows.Add(row);
            }
            return dt;
        }
      

  4.   

    这个里面的name 具体指的是什么？我刚接触不怎么理解！
      

  5.   

    name为id<!--改了下js,兼容ie ff-->
        <script type="text/javascript">
            function showImage(obj,e){
                e = e||window.event;
                var div = document.getElementById("Image");
                var path = obj.innerHTML;
                div.innerHTML="<img src='"+path+"' width='100' height='100'/>";
                div.style.top = e.clientY+"px";
                div.style.left=e.clientX+"px";
                div.style.display="block";
            }
            function hideImage(){
                document.getElementById("Image").style.display="none";
            }
        </script>
      

  6.   

     string[] name = { "images/p002.jpg", "images/p003.jpg", "images/p004.jpg" };
            DataTable dt = new DataTable();
            dt.Columns.Add("ID", typeof(System.Int32));
            dt.Columns.Add("Path", typeof(System.String));
            for (int i = 0; i < name.Length; i++)
            {
                DataRow row = dt.NewRow();
                row[0] = i + 1;
                row[1] = name[i];
                dt.Rows.Add(row);
            }
            return dt;
    我的图片从数据库中获取 怎么放到数组中呢？
      

  7.   

    我那个是测试代码，省得还要连数据库，你直接给DataList1绑定上就可以了！
    还有js,我是显示图片路径，如果是其他文字的话给showImage()多加个路径参数传过去就可以了！
      

  8.   

    将相对应的图片放在div里。每一行一个。（默认隐藏）鼠标放在那一行就显示那一行的DIV。