html5のボタンとして画像を使用

Question

私はサウンドを再生するウェブアプリを作っています。私が使用したいインターフェースは、ピアノ/キーボードのものです。ユーザーがキーを押すと、サウンドが再生されます。

私は<button>を使用して、その中のキーの機能と埋め込みイメージを呼び出しましたが、見栄えが良くなく、各キーの周りに境界線があります。

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

私はattratcive高解像度の画像を使用し、それらにイベントを割り当てることができますHTML5のためのGUIデザイナはありますか？

キーボードをアニメーション化したり、関数呼び出しを画像マッピングなどの特定の領域に割り当てるにはキャンバスを使用する必要がありますか？ このアプリの大きな特長は、外観になります。

私はhtml/html5での経験がほとんどないので、どんな助けもあります。

Answer 1

まず、あなたの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> 
... 

Answer 2

あなたは、通常のリンクのリンク（<a>タグ）を使用することもできますが、型の画像<input type="image" src="keyboardpics/key1.jpg" onclick=freqA4()" />の入力要素を使用することができます。

もちろん使用CSSのそれらのいずれかを（でもボタンは、を使用）