javascript mouseOver code

这里很简单的功能，但不工作。刚刚开始使用Javascript，所以请温和我。也没有人知道任何良好的社区论坛初学者。我觉得这是一个这样简单的问题，但可能不是。javascript mouseOver code

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

来源

2011-02-04 Chapsterj

这是初学者的问题一个完全正常的场所。任何形式良好的，无论专业水平如何，欢迎在这里:) – David 2011-02-04 21:43:25

在那个笔记...定义“不工作”。代码是否根本不会触发？例如`alert（）`永远不会被调用？ – David 2011-02-04 21:44:29

请选择一个答案 – 2011-02-24 13:34:20

-4

做你自己一个巨大的忙 - 如果你刚刚开始使用Javascript，学习jQuery。它将彻底简化你想要做的事情。转到here

在这种情况下，您可以轻松地将一个click事件的img标签举例here.

来源

2011-02-04 21:44:58 n8wrl

-1不是一个合适的答案。 – 2011-02-04 21:45:44

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

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

来源

2011-02-04 21:47:06 MarioVW

JavaScript是针对您问题的解决方案，但我会推荐一种不同的方法：使用CSS代替！

这里的教程我在谷歌发现： http://inspectelement.com/tutorials/create-a-button-with-hover-and-active-states-using-css-sprites/

这也将解决“预加载问题”你会面对，意味着：当你用鼠标去在按钮上悬停图像需要时间来加载。结果将是图像显示中的一个缺口（半秒钟将不会显示图像）。

来源

2011-02-04 21:50:11

现场演示：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"; 
}

来源

2011-02-04 21:50:19

我会建议学习和使用JQuery：

http://jquery.com/

网站上有很多优秀的教程，您可以通过Google获取更多信息。

这是一个网站的片段，它有几个鼠标悬停，mouseup，mousedown和悬停状态的按钮。每个按钮州都有自己的形象，当然：

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

您可以添加一个click事件处理到，以及...

来源

2011-02-04 21:51:25 camainc

javascript mouseOver code

回答

相关问题