Databases
StackOverflow2013
Postsdbo
POdynamicaly create "button" image with hover text
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POdynamicaly create "button" image with hover text
    text
    copied!<p>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:</p> <p><img src="https://i.stack.imgur.com/DzEuC.png" alt=""></p> <p>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.</p> <p>I have a javascript code that create button but they dont have image:</p> <pre><code>//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) }; </code></pre> <p>css:</p> <pre><code>.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; } </code></pre> <p>Do you have any suggestion?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload