display text over image using div tag
<p>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 </p>

<pre><code> &lt;script &gt;
        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(){


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



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

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

  &lt;/c:forEach&gt;

  for(var i=0;i&lt;6;i++)
      {

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

        var test = $("&lt;span class='test'&gt;&lt;/span&gt;");

  test.html(txt);

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

   }

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

 });

    &lt;/script&gt;

    &lt;div class="test"&gt;div-test &lt;/div&gt;
    &lt;img id="myimg" src="mirchi2.jpg" width="500" height="500"&gt;
    &lt;/body&gt;
    &lt;/html&gt;
</code></pre>
