Question

I am making a web app that plays sounds. The interface I would like to use is that of a piano/keyboard. User will press a key and sound is played.

I have used <button> to call the functions and embedded images of keys inside them but it does not look good and has a border around each key.

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

Is there a GUI designer for HTML5 that will allow me to use attratcive high res images and assign events to them?

Or should I use canvas to animate a keyboard and assign function calls to certain areas like image mapping?
A large emphasis of this app will be on the appearance.

Any help would be great as I have very little experience in html/html5.

Answer 1

First include this in your HTML: http://meyerweb.com/eric/tools/css/reset/

Define each button as CSS style

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

In your HTML

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