使用div標籤在圖像上顯示文本

Question

我希望使用div標籤在圖像上顯示文本。我從數據庫獲取值併成功存儲到腳本數組中。但值不顯示。但我使用的div標籤insted圖像文本將被顯示。下面是我的代碼

<script > 
     var i=0; 
     var st1=new Array(); 
     var st2=new Array(); 
     var st3=new Array(); 
     // var obj={"A","B","C","D"}; 
    $(document).ready(function(){ 
    $("#myimg").hover(function(){ 


    <c:forEach var="d" items="${data}" > 
     <c:set var="st1" value="${fn:substringBefore(d,'-')}" />    
     <c:set var="st2" value="${fn:substringAfter(d,'-')}" /> 



     st1.push("${st1}");    
     st2.push("${st2}"); 

    </c:forEach> 
    <c:forEach var="d1" items="${data1}" > 
     <c:set var="st22" value="${d1}" />  
      st3.push("${st22}"); 

    </c:forEach> 

    for(var i=0;i<6;i++) 
     { 

    var X=st1[i];  
    var Y=st2[i]; 
    var txt=st3[i]; 

     var test = $("<span class='test'></span>"); 

    test.html(txt); 

    $("#myimg").append(test.offset({left:X,top:Y})); 

    } 

    }, function(){ 
    $('.test').remove(); 
    } 
); 

}); 

    </script> 

    <div class="test">div-test </div> 
    <img id="myimg" src="mirchi2.jpg" width="500" height="500"> 
    </body> 
    </html> 

Answer 1

使用<div>與display: inline-block;和background-image: url(image.png);。

然後在該<div>內，您可以添加新的兒童，因此文本。像ahren說的那樣，<img />（如<br />和<hr />）是一個單獨的標籤，不能生孩子。

<div id="myimg" style="background-image: url(mirchi2.jpg); width: 500px; height: 500px;"> 
    <div>More content</div> 
</div> 

OR（清潔劑）

CSS

#myimg { 
    background-image: url(mirchi2.jpg); 
    width: 500px; 
    height: 500px; 
} 

HTML

<div id="myimg"> 
    <div>More content</div> 
</div> 

Answer 2

相反追加DIV的 - 做這樣的事情：

編輯工作的完整示例：http://jsfiddle.net/

<div class="image-container"> <!-- MAKE SURE THIS IS POSITION RELATIVE! --> 
    <img id="image1" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTKWtn1KeBcz5Ydr3Hv6aYTCjiqbqFg2DfB422smPV21TS7kjVh" alt="some alt" /> 
    <div id="text-pop">This is some text</div> 
</div> 

CSS：

.image-container{ 
    position: relative; 
} 
#text-pop{ 
    display: none; 
    position: absolute; 
} 

的jQuery：

$(document).ready(function(){ 
    $("#image1").hover(function(){ 
     $("#text-pop").fadeIn(800); 
     $("#text-pop").css({ 
      "position": "absolute", 
      "top": "25%", 
      "left": "20%", 
      "background": "yellow", 
      "padding": "30px" 
     }) 
    }, function(){ 
     $("#text-pop").hide(); 
    } 
    ); 
});