带有自定义图像和文本的表单按钮

Posted 2023-03-05

【中文标题】带有自定义图像和文本的表单按钮

【英文标题】：Form Button with custom image and text

【发布时间】：2010-12-21 03:41:19

【问题描述】：

表单按钮在未按下和按下状态下都有一个 170x60 的图像。我似乎无法做的是让按钮中有文本。我真的很想避免编辑图像并直接向其写入文本。现在我正在使用：

<input type="image" src="img/button_normal.png"
   onmousedown="this.src='img/button_pressed2.png'"
 onmouseup="this.src='img/button_normal.png'"> 

我认为在其上使用文本是不可能的（就我所尝试的而言）。然后我尝试使用<button>，但我也无法让它工作。

我已经能够在上面的图片上放置文字，但是在文字所在的地方，按钮是不可点击的，这不起作用。

有什么办法可以解决这个问题？

【参考方案1】：

那么为什么不直接在常规按钮上编辑背景图片呢？

<script type="text/javascript" src="picker/js/jquery.js"></script>
<!-- some time later -->
<input type="button" src="img/button_normal.png" 
  value="Some Text"
onmousedown="$(this).css('background-image': 'img/button_pressed2.png');" 
onmouseup="$(this).css('background-image': 'img/button_normal.png');"> 

这应该使您能够将图像放入带有一些文本覆盖的按钮中。

【讨论】：

忘了提一下，将输入的 value 属性设置为您想要显示的任何文本。上面固定。

这样做只是制作了一个带有值文本的普通按钮：/

您可以为此使用 CSS。 .mybutton background-image: url('normal') .mybutton:active background-image: url('pressed.png')

【参考方案2】：

为什么不只使用 css 和“提交”类型？

<input type="submit" class="myButton" value="Label goes here" />

然后在你的 CSS 中：

input.myButton
     background-image: url('img/button_normal.png');
     border-style:none;

input.myButton:hover
    background-image: url('img/button_pressed2.png');

input.myButton:active
    background-image: url('img/button_normal.png');

这同样适用于“按钮”类型，并且优于 Javascript 版本，因为不必启用 Javascript。 为了让这个在 IE 中正常工作，你可以使用this script 让 IE 自己运行 :)

【讨论】：

根本不显示图像。只是一个看起来很普通的按钮，里面有我的价值。

你用的是什么浏览器？我在 Firefox 和 Epiphany（基于 webkit）中对其进行了测试。我没有 IE :-\

不兼容跨浏览器。 IE lte 7 不支持那些伪选择器。

我更新了它，添加了一个使 IE 正常工作的脚本的链接。

【参考方案3】：

<input type="image"> 旨在将某种图像映射作为按钮。提交后，它会向服务器端发送一个name.x 和name.y 参数，表示客户端在图像地图上按下的确切位置。

你显然不想拥有它。您只想拥有一个带有背景图片的按钮。为此，您通常使用 CSS background-image 属性（或者更方便的是 background 属性）。

基本示例：

.mybutton 
    background-image: url('normal.png');
    width: 175px;
    height: 60px;

.mybutton.pressed 
    background-image: url('pressed.png');

普通按钮如下：

<input 
    type="submit"
    class="mybutton" 
    value=""
    onmousedown="this.className+=' pressed'"
    onmouseup="this.className=this.className.replace(' pressed', '')"
>

编辑：对于 downvoters 或 JS/jQuery nitpickers：IE lte 7 确实 不 支持 :hover 或 :active 在除 a 之外的其他元素上的伪选择器元素。上述解决方案是跨浏览器兼容的。

【讨论】：

这里的javascript是多余的。如果你只创建第二个 CSS 类 .mybutton:active，它具有相同的效果，但不需要 Javascript。

你为什么不赞成跨浏览器兼容的解决方案？ IE lte 7 不支持那些伪选择器。

嗯，我忘了。虽然有比使用这样的 Javascript 更好的解决方案：xs4all.nl/~peterned/csshover.html

Brendan，这也是一个 Javascript 解决方案。它只是更高级一点，因此它可以自动应用于所有元素。

看，你甚至可以在这里看到源代码：xs4all.nl/~peterned/htc/csshover2.htc