javascript mouseOver 代码
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4903241/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
javascript mouseOver code
提问by Chapsterj
Pretty simple function here but not working. Just started with Javascript so be gentle with me. Also does anyone know of any good community forums for beginners. I feel this is such a simple question to ask on here, but maybe not.
这里的功能非常简单，但不起作用。刚开始使用 Javascript 所以对我温柔一点。还有谁知道任何适合初学者的良好社区论坛。我觉得这是一个很简单的问题，但也许不是。
<html>
<head>
<script type="text/javascript">
var img;
function mouseOver()
{
alert(img);
img.src ="button_over.jpg";
}
function mouseOut()
{
img.src ="button_out.jpg";
}
function init()
{
img = document.getElementById("buttonWrapper").getElementsByTagName('img')[0];
}
</script>
</head>
<body onLoad="javascript:init()">
<div id="buttonWrapper">
<img border="0" src="button_out.jpg" width="62" height="74" onmouseover="mouseOver()" onmouseout="mouseOut()" / >
</div>
</body>
</html>
采纳答案by n8wrl
回答by ?ime Vidas
Live demo:http://jsfiddle.net/jTB54/
现场演示：http ://jsfiddle.net/jTB54/
Just put this code at the bottom of the page (right before </body>) and you won't need an onload handler:
只需将此代码放在页面底部（就在 之前</body>），您就不需要 onload 处理程序：
var img = document.getElementById("buttonWrapper").getElementsByTagName('img')[0];
img.onmouseover = function() {
this.src = "button_over.jpg";
}
img.onmouseout = function() {
this.src = "button_out.jpg";
}
回答by MarioVW
I don't know if this will fix your problem, but wouldn't it be easier to do something like this?
我不知道这是否会解决您的问题，但是做这样的事情不是更容易吗？
<html>
<head>
<script type="text/javascript">
function mouseOver(img)
{
img.src ="button_over.jpg";
}
function mouseOut(img)
{
img.src ="button_out.jpg";
}
</script>
</head>
<body>
<div id="buttonWrapper">
<img border="0" src="button_out.jpg" width="62" height="74" onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" />
</div>
</body>
</html>
回答by Daniel Kutik
JavaScript is a solution for your issue but I would recommend a different approach: Use CSS instead!
JavaScript 是您问题的解决方案，但我会推荐一种不同的方法：改用 CSS！
Here a tutorial I found on Google: http://inspectelement.com/tutorials/create-a-button-with-hover-and-active-states-using-css-sprites/
这是我在 Google 上找到的教程：http: //inspectelement.com/tutorials/create-a-button-with-hover-and-active-states-using-css-sprites/
This also will solve the 'preloading issue' you will face, means: When you go with the mouse over the button the hover image needs time to load. the result will be a gap in the displaying of the images (for a half second there will be no image displayed).
这也将解决您将面临的“预加载问题”，这意味着：当您将鼠标悬停在按钮上时，悬停图像需要时间来加载。结果将在图像显示中出现间隙（半秒内将不显示图像）。
回答by camainc
I would suggest learning and using JQuery:
我建议学习和使用 JQuery：
There are a lot of good tutorials on the site, and you can Google for more.
网站上有很多很好的教程，你可以谷歌搜索更多。
Here is a snippet from a site that has a few buttons that have mouseover, mouseup, mousedown, and hover states. Each button state has its own image, of course:
这是一个网站的片段，其中有几个按钮具有鼠标悬停、鼠标向上、鼠标按下和悬停状态。当然，每个按钮状态都有自己的图像：
$(function () {
$("#btnPrintSheet").mousedown(function () {
$(this).attr("src", BASE_IMG_PATH + "printDN.gif");
}).mouseup(function () {
$(this).attr("src", BASE_IMG_PATH + "printOV.gif");
}).hover(function () {
$(this).attr("src", BASE_IMG_PATH + "printOV.gif");
}, function () {
$(this).attr("src", BASE_IMG_PATH + "printUP.gif");
});
});
You can add a click event handler to that as well...
您也可以向其添加单击事件处理程序...
