Question

表单按钮具有170x60图像，用于非按下和按下状态。我似乎无法做到的是按钮中的文本。我真的想避免编辑图像并直接将文本写入其中。现在我正在使用：

<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参数，表示客户端在图像映射上按下的确切位置。

你显然不想拥有它。您只想拥有一个带有背景图像的按钮。为此，您通常使用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的挑剔者：IE lte 7 不支持其他元素上的:hover或:active伪选择者a元素。上述解决方案与浏览器兼容。

Answer 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自身行为：）

Answer 3

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

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

这应该可以让你将图像放入一个带有一些文字重叠的按钮。

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

3 个答案: