используя изображения в качестве кнопок в HTML5

Question

Я делаю веб-приложение, которое воспроизводит звуки. Я хотел бы использовать интерфейс пианино / клавиатуры. Пользователь нажимает клавишу, и звук воспроизводится.

Я использовал <button> для вызова функций и встроенных изображений клавиш внутри них, но он не выглядит хорошо и имеет границу вокруг каждой клавиши.

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

Существует ли графический дизайнер HTML5, который позволит мне использовать привлекательные изображения в высоком разрешении и назначать им события?

Или мне следует использовать canvas для анимации клавиатуры и назначения вызовов функций для определенных областей, таких как отображение изображений? Большое внимание в этом приложении будет уделено внешнему виду.

Любая помощь будет великолепна, так как у меня очень мало опыта работы с 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> теги ), или вы можете использовать элементы ввода типа image <input type="image" src="keyboardpics/key1.jpg" onclick=freqA4()" />.

Конечно, вы можете использовать CSS для стилизации любогоиз них ( даже кнопка, которую вы используете )