如何在 HTML 中的图像按钮 onmouseover 事件上更改图像？答案

【问题标题】：how to change the image on a image button onmouseover event in HTML?如何在 HTML 中的图像按钮 onmouseover 事件上更改图像？
【发布时间】：2012-02-07 06:32:15
【问题描述】：

我有 4 个包含图像的图像按钮。在鼠标悬停时我必须更改图像（即在按钮上加载新图像）。这是代码。

<div class ="submit" id="submit" >
    <input  type="image" src="dump.png" value="Dumb" class ="Dumb" id="Dumb" onclick="posting_by_user('Dumb')" />
    <input  type="image" src="informative.png" value="Informative" class ="Informative" id="Informative" onclick="posting_by_user('Informative')"/>
    <input  type="image" src="brilliant.png" value="Brilliant" class ="Brilliant" id="Brilliant" onclick="posting_by_user('Brilliant')"/>
    <input  type="image" src="cool.png" value="Cool" class ="Cool" id="Cool" onclick="posting_by_user('Cool')"/>
</div>

这里我已经加载了 dump.png、informative.png、brilliant.png 和 cool.png。鼠标悬停在每个按钮上时，我必须更改图像。

【问题讨论】：

可能的答案？ stackoverflow.com/questions/540349/…
@Exor：我可以查看代码。
@Raju.allen ：是的，我现在可以看到它了.. :)

标签： javascript html css imagebutton onmouseover

【解决方案1】：

试试这个

$(document).ready(function() {
$('input[type=img]')
    .mouseover(function() { 
        var src =  "mouseover.png";
        $(this).attr("src", src);
    });

【讨论】：

【解决方案2】：

<input  type="image" src="dump.png" value="Dumb" class ="Dumb" id="Dumb" onclick="posting_by_user('Dumb')" onmouseover="changeImg.call(this)" />

function changeImg(){
this.setAttribute("src","newImageFileName.jpg");
}

始终建议将您的代码与 html 分离。这个答案将很有帮助，因为它更干净且有利于调试。

【讨论】：

@raju.allen 如果您是 stackoverflow 的新手，每个答案旁边都有一个刻度线，您可以通过单击该刻度线来接受答案.. 接受最适合/修复的答案你的问题..

【解决方案3】：

<input  type="image" src="dump.png" value="Dumb" class ="Dumb" id="Dumb" 
onclick="posting_by_user('Dumb')" 
onmouseover="this.src='informative.png';" 
onmouseout="this.src='dump.png';" />

【讨论】：

【解决方案4】：

您可以为此使用 Javascript 或 CSS，以下是 javascript 方法。

window.addEventListener("load", function load (event) {
    window.removeEventListener("load", load, false);
    tieEvents();
}, false);

function tieEvents() {
    var button = document.getElementById('Dumb');

    button.addEventListener("mouseover", hovered, false);
    button.addEventListener("mouseout", unhovered, false);

    function hovered() {
        button.src = "anotherimg.png";
    }

    function unhovered() {
        button.src = "anotherimg.png";
    }
};

JSFiddle Demo

请注意，在 HTML 中设置事件不是一个好习惯，最好在 Javascript 中绑定它们。

CSS方式如下：

#Dumb {
    backgroud: url("dump.png");
}

#Dumb:hover {
    backgroud: url("another.png");
}

JS Fiddle Demo

【讨论】：