Question

这里功能非常简单但不起作用。刚开始使用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>

Answer 1

现场演示： http://jsfiddle.net/jTB54/

只需将此代码放在页面底部（</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";
}

Answer 2

我不知道这是否能解决您的问题，但这样做会不会更容易？

<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>

Answer 3

JavaScript是您的问题的解决方案，但我建议采用不同的方法：改用CSS！

这是我在Google上找到的教程： http://inspectelement.com/tutorials/create-a-button-with-hover-and-active-states-using-css-sprites/

这也将解决您将面临的“预加载问题”，意味着：当您将鼠标移到按钮上时，悬停图像需要时间加载。结果将是显示图像的间隙（半秒钟将不会显示图像）。

Answer 4

我建议学习和使用JQuery：

http://jquery.com/

网站上有很多很好的教程，谷歌可以提供更多。

以下是来自网站的代码段，其中包含一些具有鼠标悬停，鼠标悬停，鼠标悬停和悬停状态的按钮。每个按钮状态都有自己的图像，当然：

 $(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");
    });
 });

您也可以添加点击事件处理程序......

Answer 5

函数 init() 可以删除，因为我们并不真正需要它。以下是您的代码的较短版本。

<html>

<body>
  <div>
    <img src="button_out.jpg" width="62" height="74" onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" / >
  </div>
</body>
  
<script>
var mouseOver = img => {
  img.src ="button_over.jpg";
}
var mouseOut = img => {
  img.src ="button_out.jpg";
}
</script>
  
</html>

Answer 6

让自己受到青睐 - 如果你刚开始使用Javascript，那就学习jQuery吧。它将大大简化您要做的事情。转到here

在这种情况下，您可以使用示例here.轻松将点击事件与img标记绑定

javascript mouseOver代码

6 个答案: