Mottie
commented
7 years ago Hi @oz1cz!
There are two ways to add an image to the key... (demo)
Add a background image to the specific key. In this example, the α (alpha) key is targeted using it's unique class name based on it's decimal ascii value (945, also known as 03B1 in hex):
/* target greek letter alpha */
.ui-keyboard-945 span {
/* keyboard icon used in this example */
background: url(css/images/keyboard.png) center center no-repeat;
display: block;
width: 30px;
/* hide key text */
text-indent: -999em;
}
/* needed for inline image (second method below) */
.ui-keyboard-button {
vertical-align: middle;
}And a second, bit more complex method - I really need to fix it - is to make an action key, then set the display value to be an image.
I just found out that including http:// in the image URL breaks the url inside the image, so I'll need to fix that in the next update.
// making an action key, it needs an action
$.keyboard.keyaction['β'] = 'β';
$('#keyboard2').keyboard({
layout: 'custom',
customLayout: {
// wrap the key in curly brackets to make it
// an action key
'default': ['α {β}']
},
display: {
// including a colon in the url breaks the image :(
'β': '<img src="css/images/keyboard.png">'
}
});
oz1cz
andrewvharris
Is there any way to replace the label on a character key with an image?
I'm trying to create a classical Hebrew keyboard, and some of the vowel characters are so small that they are almost impossible to view in any reasonable font size. So for some of those characters, I would like to display a small image on the key button instead of the actual character.
Is this possible with the current code?