Use a <button> or <input type="submit"/> with CSS background styles applied.
<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>
Using a form input makes the most sense semantically, especially with your concerns about accessibility. People using accessibility tools probably aren't expecting to encounter a <div> or <img> and be expected to perform an input event on it (I could be wrong, I'm not entirely familiar with how such tools work).
The fact that the application is dynamic/ajaxy/etc. shouldn't be a barrier to you using the appropriate markup elements and using CSS to style it appropriately.
Edit:
Regarding the <input> not working: if you return false from whatever gets invoked when the button is clicked, it won't continue execution (i.e. submit the form). Example:
<button type="submit" onclick="handleClick();"></button>
...
function handleClick() {
// ajax call
return false;
}
On top of that, using a <button type="button"></button> shouldn't even submit the form at all. Some browsers default the type to "submit", so you'd want to explicitly define type="button" to make sure it's not treated as a submit.
Obviously, this will be different than your prototype code, but you get the picture; the gist of it is that the event handler needs to return false. And <button>/<input> can be styled just as well as an <img> or <div>.