jquery numpad image

Question

我想添加一個圖像到我目前的iframe數字鍵盤。我fairley新jquery，所以我不知道我可以添加按鈕圖像，我做了我的jQuery的。任何幫助將不勝感激。我的代碼如下所示：

// Get a numpad button  
    var GetButton = function(value, fn) 
    { 
     var button = document.createElement("input"); 
     button.type = "button"; 
     button.value = value; 
     button.style.width = "80px"; 
     button.style.height = "70px"; 

     button.onclick = fn; 

     return button; 
    }; 

    // Attach the Numpad control to the page. 
    // Create the HTML elements and bind events  
    var Initialize = function() 
    { 
     div = document.createElement("div"); 
     div.style.position = "absolute"; 
     div.style.zIndex = 999999; 

     if(randomize === true) 
     { 
      var rem = [0,1,2,3,4,5,6,7,8,9]; 
      var idx; 
      var pos = 0; 

      while(pos < 12) 
      { 
       if(pos != 9 && pos != 11) 
       {    
        idx = Math.floor(Math.random() * (rem.length));      
        button = GetButton(rem[idx], (function (value) 
         { 
          return function() { target.value += value; } 
         })(rem[idx]));      

        div.appendChild(button);      
        rem = rem.Remove(idx); 
       } 
       else 
       { 
        if(pos == 9) 
        { 
         button = GetButton("C", function() { target.value = ""; }); 
         div.appendChild(button); 
        } 


       } 

       pos++; 
      } 
     } 
     else 
     { 
      for(var i=1; i<=9; i++) 
      { 
       button = GetButton(i, (function (value) 
       { 
        return function() 
        { 
         target.value += value; 
        }   
       })(i)); 

       div.appendChild(button); 
      } 

      // Clear button  
      button = GetButton("", function() 
      { 
       target.value = "";   
      }); 

      div.appendChild(button); 

      // 0 button 
      button = GetButton(0, (function (value) 
      { 
       return function() { target.value += value; };   
      })(0)); 

      div.appendChild(button); 

      // Close button 
      button = GetButton("", function() 
      { 
       target.value = ""; 
      }); 

      div.appendChild(button); 
     }    

     div.style.width = "250px"; 
     iframe.style.position = "absolute"; 
     iframe.frameBorder = 0; 

     document.body.appendChild(iframe); 
     document.body.appendChild(div); 

     Hide(); 
    }; 

Answer 1

CSS Background Image

input.button1 { 
    background-image: url("images/foo.gif"); 
} 

或使用按鈕標籤

<button><img src="images/foo.gif" alt="foo"/></button>