动态创建带有悬停文本的“按钮”图像

Question

I need to create a clickable image with dynamicaly getted text over it. I already have the php that get the information needed for text but i'm having trouble creating the button(i'm really new to this kind of stuff). This is an example of what I'd like to create:

The text "A020310" its a php answer and change all the time(saved in 'stringaPosizione', value of the button). A variable number of this image will be created and will be clicked to start some operation.

I have a javascript code that create button but they dont have image:

//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;
}

Do you have any suggestion?

Answer 1

Do you are appending the element on any object ? If not, you're just creating an element on the browser memory but not appending it to the dom tree.

Furthermore, you have to set the dimensions of your button to show the entire image.

Look at this fiddle and tell me if something is missing.