CODEWITHSUNDEEP
htmluser-interfacecanvas
redned
redned

Reputation: 301

using images as buttons in html5

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.

Upvotes: 1

Views: 6874

Answers (2)

Teemu Ikonen
Teemu Ikonen

Reputation: 11929

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>
...

Upvotes: 2

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195971

You can use normal links links (<a> tags), or you can use input elements of type image <input type="image" src="keyboardpics/key1.jpg" onclick=freqA4()" />.

You can of course use CSS to style any of them (even the button you use)

Upvotes: 2

Related Questions