html - 具有自定义图像和文本的表单按钮

Question

表单按钮在未按下和按下状态下有一个 170x60 的图像。我似乎无法做的是让 There to be text in the button。我真的很想避免必须编辑图像并直接向其写入文本。现在我正在使用:

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

我认为不可能在上面加上文字(据我尝试过)。然后我尝试使用 <button>但我也无法让它工作。

我已经能够在上面的图片上放置文本，但是在文本所在的位置，按钮无法点击，这是行不通的。

这个问题的解决方案是什么？

Answer 1

<input type="image">意味着有一种图像映射作为按钮。提交后，它会发送 name.x和 name.y参数传递给服务器端，表示客户端在图像 map 上按下的确切位置。

您显然不想拥有它。您只需要一个带有背景 图像的按钮。为此，您通常使用 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', '')"
>

编辑:对于反对者或 JS/jQuery 吹毛求疵者:IE lte 7 不支持 :hover也不:active a 以外的其他元素上的伪选择器元素。上述解决方案是跨浏览器兼容的。