如何在數據列表上的圖像上綁定名稱

我有一個數據列表，其中圖像從數據庫中動態綁定。該名稱也即將到來，但它的顯示分開，意味着圖像上方，但我的要求是將其顯示在圖像上。如何在鼠標懸停時綁定圖像上的名稱。請幫忙如何在數據列表上的圖像上綁定名稱

在此先感謝... !!!

<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();

在這段代碼中，我結合名義和形象都以數據列表。我的要求是將其顯示在圖像上。

來源

2014-01-08 Jack

我們看一些代碼。我可能會嘗試去絕對定位的元素。 –

請提供更多詳情，一個jsfiddle或代碼片段。 –

我已更新我的代碼。 @LauriElias – Jack

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

更換
img src='images/profilephotos/small/<%# Eval("SmallProfilePhoto")%>' width="185" height="240"
希望它可以幫助

來源

2014-01-08 12:55:47

這裏是一個非常生硬例如：

<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>

來源

2014-01-08 12:57:16

如何在數據列表上的圖像上綁定名稱

回答

相關問題