Question

我在我的网站上使用自定义<img>元素作为按钮（表单提交为onclick）。原因是我希望元素在按钮启动时显示一个图像，而另一个按钮在按钮关闭时显示。我正在使用onmousedown和onmouseup。

这是一个基于AJAX的站点，提交也是AJAX-y。可以安全地假设javascript已启用。

表单由AJAX（通过Prototype）提交，因此常规<input type=button>是不可能的，因为它会导致提交+页面刷新（同样，据我所知，它不能完全自定义使用图像）。

我的问题是：我是否应该对这种方法有任何困难，是否有更好/更简单的方法来生成自定义按钮？

我对可用性和兼容性问题感兴趣：例如可访问性功能（例如选项卡索引）与所有浏览器（例如IE6）的支持。

Answer 1

使用<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为“提交”，因此您需要明确定义type="button"以确保不将其视为提交。

显然，这将与您的原型代码不同，但您可以了解情况;它的要点是事件处理程序需要返回false。 <button> / <input>的样式可以与<img>或<div>一样。

Answer 2

你可以使用CSS sprites来改进这些，这是一篇很好的解释它的文章：http://www.jaisenmathai.com/blog/2008/04/03/extremely-efficient-image-rollovers-using-css-sprites-and-no-javascript/

这是一个仅限css的解决方案，使用1个图像同时用于向上和向上在州。

使用图像创建精美的HTML按钮

2 个答案: