Текст с изображения

Question

Я пытаюсь взять текст с ввода, для начала есть «ВАШ ВРАГ»! и этот текст мне нужно разместить в картине, что я показываю. Я хочу просто нажать кнопку, и кнопка покажет pic, и на этом рисунке будет текст (также мне нужно немного отредактировать позицию этого текста), можно сделать стиль CSS, что будет использовать мои позиции, а затем использовать их на var ан? Также можно щелкнуть эту кнопку несколько раз, и каждый раз, когда я меняю текст во вводе, он принимает новый текст, удаляет или скрывает pic со старым текстом и показывает pic с новым текстом.

Enemy: <input type="text" value="YOUR ENEMY!" id="enemy"> 
    <br> 
    <input type="button" value="BEAT UP YOUR ENEMY" onclick="dinos()"/> 
    <br> 
    <img id="loadingImage" src="dino.gif" style="visibility:hidden"/> 
    <script> 
    function dinos() 
    { 
    document.getElementById('loadingImage').style.visibility='visible'; 
    var en = document.getElementById("enemy").value; 
    } 
    </script> 

Answer 1

Возможно, использование свойства CSS индекса z?

ENEMY: <input type="text" value="YOUR ENEMY!" id="enemy"> 
 
    <br> 
 
    <input type="button" value="BEAT UP YOUR ENEMY" onclick="dinos()"/> 
 
    <br> 
 
    <img id="loadingImage" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" style="visibility:hidden"/> 
 
<label style="z-index: 10; position: absolute; left: 30px; top: 100px;" id="LOL">Enemy's name</label> 
 
    <script> 
 
    function dinos() 
 
    { 
 
    document.getElementById('loadingImage').style.visibility='visible'; 
 
    var en = document.getElementById("enemy").value; 
 
     document.getElementById("LOL").innerHTML = en; 
 
    } 
 
    </script>

Надеется, что это помогает!