Use images for buttons

[icaroniz]

I managed to use an image for some buttons as some Unicode characters couldn't be displayed on some computers. I had to set the display to an img tag. For example:

$('.keyboard').keyboard({
  display: {
    'a': '<img src="path/to/my/accept_image.png" />:Accept',
    'c': '<img src="path/to/my/cancel_image.png" />:Cancel'
  }
});

The problem is that, as the button text is more than one character, the button is shown as a wide, so I had to fix this too. Wouldn't it be nice if this feature could be implemented in the library?

P.S: I've encountered some problems that I'm still fixing such as the images are transformed back to text when the button triggers the mouseout event.

Before hover:

After hover:

[Mottie]

Hi @icaroniz!

Right now, in the calculator demo, the images are adding as backgrounds using the unique class names for each button. Allowing for adding HTML directly in the display option definition should also be acceptable. I'll put it on my to-do list :)

[icaroniz]

Didn't notice that example. Maybe my approach was more complicated than necessary...

By the way, I found out that in the mouseleave and mousewheel events, the restoration of the original text uses jQuery.text() instead of jQuery.html(). Changing this would solve my earlier problem.

Thanks for the advice!