StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Use a <code><button></code> or <code><input type="submit"/></code> with CSS <code>background</code> styles applied.</p> <pre><code><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>   </form> </body> </html> </code></pre> <p>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 <code><div></code> or <code><img></code> and be expected to perform an input event on it (I could be wrong, I'm not entirely familiar with how such tools work).</p> <p>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.</p> <p><strong>Edit:</strong></p> <p>Regarding the <code><input></code> 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:</p> <pre><code><button type="submit" onclick="handleClick();"></button> ... function handleClick() { // ajax call return false; } </code></pre> <p>On top of that, using a <code><button type="button"></button></code> shouldn't even submit the form at all. Some browsers default the <code>type</code> to "submit", so you'd want to explicitly define <code>type="button"</code> to make sure it's not treated as a submit.</p> <p>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 <code>false</code>. And <code><button></code>/<code><input></code> can be styled just as well as an <code><img></code> or <code><div></code>.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload