Question

我正在制作播放声音的网络应用。我想使用的界面是钢琴/键盘的界面。用户将按一个键并播放声音。

我已经使用<button>来调用其中的键的功能和嵌入图像，但它看起来不太好并且每个键周围都有边框。

<button onclick="freqA4()">
<img src="keyboardpics/key1.jpg" />
</button>

是否有HTML5的GUI设计器允许我使用attratcive高分辨率图像并为其分配事件？

或者我应该使用画布为键盘设置动画并将函数调用分配给某些区域，例如图像映射？这个应用程序的重点将放在外观上。

任何帮助都会很棒，因为我对html / html5的经验很少。

Answer 1

您可以使用普通链接链接（ <a>标记），也可以使用图片<input type="image" src="keyboardpics/key1.jpg" onclick=freqA4()" />类型的输入元素。

您当然可以使用CSS来设置其中的任何一个（甚至您使用的按钮）

Answer 2

首先在HTML中加入：http://meyerweb.com/eric/tools/css/reset/

将每个按钮定义为CSS样式

.button {
  width: <button width>
  height: <button height>
}
#key1 {
   background: url('/keyboardpics/key1.jpg') no-repeat       
}
#key2 {
   background: url('/keyboardpics/key2.jpg') no-repeat       
}

在您的HTML中

<div id="key1" class="button"></div>
<div id="key2" class="button"></div>
...

在html5中使用图像作为按钮

2 个答案: