display text over image using div tag

Question

i want display text over image using div tag. i am getting the values from database and store into scripting array succesfully. but the values are not displaying. but i am using div tag insted of image text will be displayed. following is my code

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

An img element cannot have children and therefore cannot be appended to... — ahren
– ahren, Commented Mar 24, 2013 at 14:11

Adi Inbar · Accepted Answer · 2013-10-15 05:52:00Z

Instead of appending the DIV - do something like this:

Edit Fully working example: 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(); } ); });

it will display the out put but out side the image tag will be displaing how to display within the image tag ?
Just position the div so it's over the image - what do you mean "display within the image tag" ? It's not possible to put anything inside an image (legally).
@user1990992 I've edited my answer with a fully working example

user1467267 · Accepted Answer · 2013-03-24 14:14:19Z

Use <div> with display: inline-block; and background-image: url(image.png);.

Then within that <div> you can add new children, thus text. Like ahren said, <img /> (like <br /> and <hr />) is a singular tag and can't have children.

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

OR (cleaner)

CSS

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

HTML

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

Collectives™ on Stack Overflow

display text over image using div tag

2 Answers 2

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Related