如何绑定数据列表上的图像名称

时间:2014-01-08 12:22:17

标签: javascript jquery asp.net

我有一个数据列表,其中图像从数据库动态绑定。 这个名字也来了,但是它分开显示,意味着在图像之上 我的要求是在图像上显示它。 鼠标悬停时,如何在图像上绑定名称。 请帮忙

提前致谢... !!!

<div class="marquee" id="mycrawler2">
                        <asp:DataList ID="FetchPhotos" RepeatDirection="Horizontal" runat="server">
                  <ItemTemplate>

                  <table cellpadding="0" cellspacing="0" align="center"><tr><td ><a href="MemberProfileDisplay.aspx?MemberId=<%#DataBinder.Eval(Container.DataItem ,"MemberId") %>" target="_blank" class="edit" "><img src="images/profilephotos/small/<%# Eval("SmallProfilePhoto")%>" width="185" height="240"/></a></td> </tr></table>
                  <asp:label ID="lbltitle" runat="server" Visible="true" Text='<%# Bind("FirstName") %>'></asp:label>
                  </ItemTemplate></asp:DataList></div>

背后的代码

FetchPhotos.DataSource = Photos;
FetchPhotos.DataBind();

在这段代码中,我将名称和图像绑定到数据列表。 我的要求是将其显示在图像上。

2 个答案:

答案 0 :(得分:0)

你可以尝试更换
img src='images/profilephotos/small/<%# Eval("SmallProfilePhoto")%>' width="185" height="240"

asp:Image ID="imgSth" runat="server" ImageUrl="images/profilephotos/small/<%# Eval("SmallProfilePhoto")%>" ToolTip='<%# Eval("FirstName") %>' width="185" height="240"

希望有所帮助

答案 1 :(得分:0)

这是一个非常直率的例子:

<html>
    <body>
        <table>
            <tr>
                <td>
                    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAAAfCAYAAABTRBvBAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowOTgwMTE3NDA3MjA2ODExODA4M0M1ODMzRTNBMTZDOSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowQkFCNzIyMjFDM0UxMUUyQTM0OUQ5MEM4QTRFRUEzMCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowQkFCNzIyMTFDM0UxMUUyQTM0OUQ5MEM4QTRFRUEzMCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDQ4MDExNzQwNzIwNjgxMTgwODM5MDFBQUUyQ0MyMEQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDk4MDExNzQwNzIwNjgxMTgwODNDNTgzM0UzQTE2QzkiLz4gPC9yZGY6RGVzY3Jp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"
                        onmouseover="document.getElementById('1.png').style.visibility ='visible';"
                        onmouseout="document.getElementById('1.png').style.visibility ='hidden';"
                    />
                    <a id="1.png" href="user1" style="visibility: hidden; position: relative; right: 50%;">User #1</a></td>
            </tr>
        </table>
    </body>
</html>