Как я могу использовать innerHTML, чтобы поместить текст поверх изображения? - PullRequest
Новая
       14

Как я могу использовать innerHTML, чтобы поместить текст поверх изображения?

0 голосов
/ 20 ноября 2011

Я реализую вводимый текст с onkeyup, который вызывает функцию JavaScript. Я должен поместить этот текст поверх изображения, поэтому я подумал использовать innerHtml внутри div, который находится на изображении.

Див: 

<div id="image3" style="position:absolute; overflow:hidden; left:519px; top:423px; width:474px; height:205px; z-index:4">
  <div id="uno" style="z-index:20">
      <img src="images/base-personalizzazione.png" alt="" title="" border=0 width=474 height=205>
    </div>
</div>

Ввод: 

<input name="formtext1" id="ft1" style="position:absolute;width:571px;left:319px;top:194px;z-index:6" onkeyup="go(this.value)">

JavaScript: 

<script type="text/javascript">
   function go(asd){
      document.getElementById('uno').innerHTML=asd;
   }
</script>

Когда я пишу внутри входного текста, изображение исчезает, а текст появляется с белым фоном. Можете ли вы помочь моей работе понять, почему это происходит и что я могу с этим поделать?

1 Ответ

0 голосов
/ 20 ноября 2011

Установка innerHTML удаляет то, что было в div.Один из способов исправить это - изменить html на 

<div id="image3" style="position:absolute; overflow:hidden; left:519px; top:423px; width:474px; height:205px; z-index:4">
  <div id="uno" style="z-index:20">
    <div id="input"></div>
    <img src="images/base-personalizzazione.png" alt="" title="" border=0 width=474 height=205>
  </div>
</div>

, а затем использовать innerhtml на входном div.

...