Javascript JS中的虚拟键盘，但带有图像

我想用HTML、CSS和JavaScript制作一个虚拟键盘。然而，有一个转折点。我想用我自己选择的图像代替键盘上的字母。那么说,

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

---

你可以使用HTML和CSS网格来实现这一点，你只需要图像和一个文件就可以了，除非你的网站具有交互性，你不需要javascript，这就是你想要的吗

var elements=document.getElementsByClassName（“key”）；
var myFunction=函数（事件）{
让text=document.getElementById（'text'）
text.innerText=text.innerText+event.target.id
};
对于（var i=0；i

。键盘{
显示器：flex；
证明内容：中心；
}
img{
边框：实心2倍绿色；
}

如果键盘上的所有内容都将由图像表示，请将keyLayout中的元素替换为图像的src。然后创建html并为每个键插入src。您能显示更多的代码吗？现在还不清楚你所展示的比特是如何被实际使用的。