在html5中使用图像作为按钮

我正在制作播放声音的网络应用程序。我想使用的界面是钢琴/键盘。用户将按一个键并播放声音。在html5中使用图像作为按钮

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

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

是否有HTML5的GUI设计器，将允许我使用attratcive高分辨率图像和分配事件给他们？

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

任何帮助将是伟大的，因为我在html/html5很少经验。

来源

2011-11-23 redned

您需要使用CSS从按钮中删除边框。 – SLaks

首先包括这在你的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> 
...

来源

2011-11-24 07:45:38

非常感谢，非常感谢。 – redned

有没有办法用这种方法设置图像的替代文字？我想不是因为实际上没有img元素吗？ – pilkch

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

当然你可以使用CSS样式任何人（甚至按钮使用）

来源

2011-11-23 22:51:56

在html5中使用图像作为按钮

回答

相关问题