virtual keyboard in JS but with images

I want to make a virtual keyboard in HTML, CSS, and JavaScript. However, there is a twist. Instead of the letters on the keyboard, I would like to replace them with images of my own choice. So lets say,

instead of letter "a", i have an image of APPLE
instead of letter "s", I have an image of SNAKE

It's for learning purposes. I've seen plenty of keyboard designs but haven't seen anything like what i wanted. I was wondering if that is possible if I just replace the letters "a" with "images".

Let me know If that is possible. Thank you.

_createKeys() {
    const fragment = document.createDocumentFragment();
    const keyLayout = [
        "1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "backspace",
        "q", "w", "e", "r", "t", "y", "u", "i", "o", "p",
        "caps", "a", "s", "d", "f", "g", "h", "j", "k", "l", "enter",
        "done", "z", "x", "c", "v", "b", "n", "m", ",", ".", "?",
        "space"
    ];

So instead of those "1","2"..."?" am I allowed to replace it with images?

from Recent Questions - Stack Overflow https://ift.tt/39lUSRe
https://ift.tt/eA8V8J