縮略圖上的文字

我需要在某些縮略圖上放置價格（文字）。我發現下面的代碼工程..縮略圖上的文字

CSS

.col-md-4 { 
    display: table; 
} 

.thumbnail{ 
    position:relative; 
} 

.thumbnail img{ 
    max-width:100%; 
} 

.thumbnail h1{ 
    position:absolute; 
    top:50%; 
    left:0; 
    color:lightgrey; 
    width:100%; 
    text-align:center; 
    transform:translateY(-50%); /* doesn't work in IE9 and older I'm affraid */ 
    margin:0; 
}

ASP.NET

<div class="col-md-4"> 
    <div class="thumbnail"> 
     <img src="https://upload.wikimedia.org/wikipedia/commons/b/b9/Nail(thumb).jpg"> 
     <h1>Hello</h1> 
    </div> 
</div>

不過，我想嘗試和上面集成到下面複雜的代碼行，我沒有線索從哪裏開始（這是寫給我的）。這裏是行..

Dim liByLiteral As New LiteralControl("<li><a href='http://images.example.com/" & filenameAndPrice(0) & "' class=""nyroModal"" rel=""gal" & DataBinder.Eval(e.Item.DataItem, "accountID").ToString & """ title=""" & filenameAndPrice(2) & " - PRICE: £" & filenameAndPrice(4) & """ onclick=""openImage('" & filenameAndPrice(1) & "', '" & txtItem.ClientID & "', '" & filenameAndPrice(0) & "');""><img class='lazy" & opacity & "' data-src='http://images.example.com/thumbnails/" & filenameAndPrice(0) & "' height='120' width='120' src='./files/images/loader.png' /></a></li>")

filenameAndPrice（4）是項目的價格。我很高興它被添加到Nyromodal標題中，但也需要在縮略圖上顯示。任何幫助真的很感激。

來源

2017-03-06 Eggybread

你想要從服務器？ – Anil

添加runat服務器屬性，併爲您的html控件提供Ids。

<div class="col-md-4"> 
     <div class="thumbnail"> 
      <img runat="server" id="tmdiv" src="https://upload.wikimedia.org/wikipedia/commons/b/b9/Nail(thumb).jpg"> 
      <h1 runat="server" id="myheaderid" >Hello</h1> 
     </div> 
    </div>

在服務器上，現在你可以訪問這些，並可以添加任何HTML屬性。 like;

myheaderid.InnerHtml= liByLiteral 
    tmdiv.atrributes.add("title", filenameAndPrice(4))

來源

2017-03-07 09:08:44 Anil

嗨，感謝您的建議。如果我有點迷路，我只是很抱歉。在我的問題中的Asp.Net代碼只是我發現的一個例子..這是我需要以某種方式操縱的長VB代碼行。 – Eggybread

縮略圖上的文字

回答

相關問題