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

【问题标题】：Creating fancy HTML buttons with images使用图像创建精美的 HTML 按钮
【发布时间】：2010-09-13 23:35:39
【问题描述】：

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

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

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

我的问题是：我应该预料到这种方法会遇到什么困难，是否有更好/更简单的方法来生成自定义按钮？

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

【问题讨论】：

你能澄清一下“生成自定义按钮”是什么意思吗？您是否正在寻找一种使用代码生成图像的方法（例如使用 GD）？
比这更简单。我为每个按钮预先制作了图像。我想显示它们，而不是显示浏览器创建任何其他文本或图像。
我在您编辑后更新了我的答案 - 我有另一个澄清要求：定义“使用图像完全自定义”，关于输入/按钮的样式。
我希望它的行为就像img 标签一样，它只显示我定义的图像。我见过很多将小图像放置在inside 按钮的示例，但从未将图像放置为整个按钮。从您修改后的答案中，我推断这是可能的，所以我会试一试。谢谢！
没问题，感谢您按要求提供问题的更新。我将通过使按钮看起来像图像的方式来更新我的初始答案。

标签： javascript html css button

【解决方案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> 一样。

【讨论】：

为什么这样更好？ IE6 不支持button 吗？
您没有在原始问题中强加任何浏览器要求。
根据最新的W3C统计，一个人口对应6.7%的互联网流量。
@shmichael：'W3C 统计数据'：他们是如何收集这些数据的？如果他们在自己的网站上这样做，很可能与普通用户不对应； W3 的网站通常只有 Web 开发人员才能访问，他们倾向于使用 IE 以外的其他浏览器。
@Rob 更正了这个问题。最好能解释一下为什么<button> 比<img> 或<div> 更好。

【解决方案2】：

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

这是一个纯 css 解决方案，使用 1 张图片表示上下状态。

【讨论】：

谢谢 - 它在待办事项清单上！然而，问题的主要焦点是可用性和兼容性问题。