dynamicaly create "button" image with hover text

Question

Мне нужно создать кликабельное изображение с динамически полученным текстом над ним. У меня уже есть php, который получает информацию, необходимую для текста, но у меня проблемы с созданием кнопки (я действительно новичок в подобных материалах). Это пример того, что я хотел бы создать:

Текста «A020310» его PHP-ответ и все время меняется (сохраненный в «stringaPosizione», значение кнопки). Будет создано переменное число этого изображения и будет нажата, чтобы начать некоторую операцию.

У меня есть код, который яваскрипта кнопку создать, но они не имеют изображения:

//Create an input type dynamically. 
var element = document.createElement("input"); 

//Assign different attributes to the element. 
element.setAttribute("type", "button"); 
element.setAttribute("class", "mybutt"); 
element.setAttribute("value", stringaPosizione); 
element.setAttribute("name", idMappatura); 
element.onclick = function() { runCommand(this) }; 

CSS:

.mybutt { 
    background-image: url(/box.png); 
    -moz-box-shadow:inset 0px -1px 20px 1px #ffffff; 
    -webkit-box-shadow:inset 0px -1px 20px 1px #ffffff; 
    box-shadow:inset 0px -1px 20px 1px #ffffff; 
    background-color:transparent; 
    -moz-border-radius:10px; 
    -webkit-border-radius:10px; 
    border-radius:10px; 
    border:5px solid #dcdcdc; 
    display:inline-block; 
    color:#777777; 
    font-family:arial; 
    font-size:20px; 
    font-weight:bold; 
    padding:10px 40px; 
    text-decoration:none; 
    text-shadow:1px 3px 4px #ffffff; 
} 
.mybutt:active { 
    position:relative; 
    top:1px; 
} 

Есть ли у вас какие-либо предложения?

Answer 1

Вы добавили element на какой-либо объект? Если нет, вы просто создаете элемент в памяти браузера, но не добавляете его к дереву dom.

Кроме того, вы должны установить размеры своей кнопки, чтобы показать все изображение.

Посмотрите на this fiddle и скажите, если что-то не хватает.