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

display: inline-block; 및 background-image: url(image.png);에 사용 <div>입니다.

그 다음 <div> 내에서 새 하위를 추가하여 텍스트를 추가 할 수 있습니다. 아흐렌이 말했듯이, <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(); 
    } 
    ); 
});