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

Question

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

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

能够做到。

Answer 1

您可以使用 HTML 和 CSS 网格来做到这一点，您只需要图像和一个可以将它们取出的文件，除非您的网站具有交互性，否则您不会这样做'不需要 javascript

Answer 2

这是你的想法吗？

var elements = document.getElementsByClassName("key");

var myFunction = function(event) {
let text = document.getElementById('text')
text.innerText = text.innerText + event.target.id
   
};

for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', myFunction, false);
}

.keyboard{
display:flex;
justify-content:center;
}

img{
border:solid 2px green;
}

<div class='keyboard'>
<img src="https://unsplash.it/50/50.jpg?image=1" id='a' class='key'> 
<img src="https://unsplash.it/50/50.jpg?image=2" id='b' class='key'> 
<img src="https://unsplash.it/50/50.jpg?image=3" id='c' class='key'> 
<img src="https://unsplash.it/50/50.jpg?image=4" id='d' class='key'> 
<img src="https://unsplash.it/50/50.jpg?image=5" id='e' class='key'> 
<img src="https://unsplash.it/50/50.jpg?image=6" id='f' class='key'> 
<img src="https://unsplash.it/50/50.jpg?image=7" id='g' class='key'> 
</div>
<div class='keyboard'>
<img src="https://unsplash.it/50/50.jpg?image=81" id='h' class='key'> 
<img src="https://unsplash.it/50/50.jpg?image=82" id='i' class='key'> 
<img src="https://unsplash.it/50/50.jpg?image=83" id='j' class='key'> 
<img src="https://unsplash.it/50/50.jpg?image=84" id='k' class='key'> 
<img src="https://unsplash.it/50/50.jpg?image=85" id='l' class='key'> 
<img src="https://unsplash.it/50/50.jpg?image=88" id='m' class='key'> 
<img src="https://unsplash.it/50/50.jpg?image=87" id='n' class='key'> 
</div>

<div id='text'>

</div>

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

virtual keyboard in JS but with images

javascript

html

css

keyboard

virtual