html - 更改悬停按钮的图像？

Question

嗨，我有一个 HTML 按钮，设置如下：

<input type="image" src="derp.png">

由于图像不是通过 CSS 分配的，我该如何在悬停时更改它？

Answer 1

一个非常简单的方法：

<input type="image" src="derp.png" onMouseOver="this.src='aderp.png'" onMouseOut="this.src='derp.png'">

JSFiddle（演示）：http: //jsfiddle.net/E6xHr/

有更多不显眼的方法可以做到这一点，但这会奏效。

Answer 2

像下面这样的东西会起作用（尽管目前未经测试），它需要将备用图像存储在 customedata-*属性中，以便脚本知道在哪里找到它，然后src以类似data-*的方式存储原始图像以便将其放回鼠标移出：

var inputs = document.getElementsByTagName('input');

for (var i = 0, len = inputs.length; i < len; i++) {
    input = inputs[i];
    input.onmouseover = function(){
        this.setAttribute('data-orig-image',this.getAttribute('src'));
        this.src = this.getAttribute('data-alt-image');
    };
    input.onmouseout = function(){
        this.src = this.getAttribute('data-orig-image');
    };
}​

JS 小提琴演示。

请记住，以上要求您input拥有 HTML 表单：

<input type="image" src="http://path.to/default/image.png" data-alt-image="http://path.to/mouseover/image.png" />​

---

编辑添加了一个 CSS 选项，不幸的是这有点不完美，并且要求在其属性input中没有设置图像：src

input[type=image] {
    background-image: url(http://davidrhysthomas.co.uk/img/dexter.png);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    width: 200px;
    height: 185px;
}
input[type=image]:hover,
input[type=image]:active,
input[type=image]:focus {
    background-image: url(http://davidrhysthomas.co.uk/img/mandark.png);
}​

JS 小提琴演示。

Answer 3

我可以看到您有两个选择：

1）CSS

input.change {
background-image:url(derp.png);
}

input.change:hover {
background-image:url(mouseover.png);
} 

（将类“更改”添加到示例中的输入元素。）

2）JavaScript

<input type="image" src="derp.png" onmouseover="this.src='mouseover.png'" onmouseout="this.src='derp.png'">

Answer 4

由于提供的大多数答案都是 JavaScript 本机或基于 CSS 的方法，因此我建议使用 jQuery 解决方案。您可以简单地hover()在 jQuery 中使用。

jQuery 脚本

$(document).ready(function() {
 $('#img1').hover(function() {
    $('#img1').attr('src','second_img.jpg');
  }, function() {
   // do something here
   alert('hovered out');
 });
});

HTML

<input id="img1" type="image" src="first_img.png">

请参阅工作示例。

Answer 5

我的想法是在按钮下方放置一个图像，并将按钮背景图像转换的 alpha 设置为 0，以便您可以看到下面的图像。