Используйте <button> или <input type="submit"/> с примененными стилями CSS background.
<html>
<head>
<style type="text/css">
.hoverable {
background: #FFFFFF url(path/to/background.png) top left no-repeat;
height: 32px; /* height and width match your background.png dimensions */
width: 64px;
}
.hoverable:hover {
background-image: url(path/to/background-hover.png);
}
</style>
</head>
<body>
<form>
...
<button type="submit" class="hoverable"></button>
<!-- or <input type="submit" class="hoverable"/> -->
<!-- or <button type="button" class="hoverable"></button> if you don't want submit behavior -->
</form>
</body>
</html>
Использование ввода формы имеет смысл с точки зрения семантики, особенно с учетом вашей озабоченности по поводу доступности. Люди, использующие инструменты специальных возможностей, вероятно, не ожидают встретить <div> или <img> и ожидать, что они будут выполнять входное событие (я могу ошибаться, я не совсем знаком с тем, как работают такие инструменты). *
Тот факт, что приложение является динамическим / ajaxy / и т.д. не должно быть препятствием для вас, используя соответствующие элементы разметки и используя CSS, чтобы стилизовать его соответствующим образом.
Изменить:
Что касается <input>, не работающего: если вы вернете false из того, что вызывается при нажатии кнопки, выполнение не будет продолжено (т.е. отправьте форму). Пример:
<button type="submit" onclick="handleClick();"></button>
...
function handleClick() {
// ajax call
return false;
}
Кроме того, использование <button type="button"></button> вообще не должно отправлять форму. В некоторых браузерах type по умолчанию имеет значение «submit», поэтому вы можете явно указать type="button", чтобы убедиться, что он не считается отправленным.
Очевидно, это будет отличаться от кода вашего прототипа, но вы получите картину; Суть в том, что обработчик события должен вернуть false. И <button> / <input> можно стилизовать так же, как <img> или <div>.