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

回答

相關問題