如何更改HTML中的圖像按鈕onmouseover事件上的圖像？

我有4個圖像按鈕包含圖像。在鼠標懸停時，我必須更改圖像（即在按鈕上加載新圖像）。這是代碼。如何更改HTML中的圖像按鈕onmouseover事件上的圖像？

<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。在鼠標懸停在每個按鈕上我必須改變圖像。

來源

2012-02-07 Raju.allen

哪裏是代碼？ – Exor 2012-02-07 06:35:00

可能的答案？ http://stackoverflow.com/questions/540349/change-the-image-source-using-jquery – Melros 2012-02-07 06:38:08

@ Exor：我可以查看代碼。 – 2012-02-07 06:40:12

<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代碼始終是建議..這個答案將是有幫助它是清潔和良好的調試..

來源

2012-02-07 06:40:29

感謝Vivek Chandra。它的工作現在。 – 2012-02-07 06:46:22

@ raju.allen如果您是新手使用的stackoverflow，每個答案旁邊都會有一個勾號，您可以通過點擊該勾號來接受答案..接受最適合/修復您的問題的答案.. – 2012-02-07 06:49:59

您可以使用CSS

規則會顯示默認看
鼠標懸停顯示了相同的尺寸基本的例子另一個圖像

Button1的{背景：網址（IMG/button1.png） }
button1的：懸停{背景：網址（IMG/button1_hover.png）}

或者您可以使用精靈的形象，在一個圖像同時擁有並使用CSS規則來改變其位置

http://cssglobe.com/post/3028/creating-easy-and-useful-css-sprites

來源

2012-02-07 06:39:35

<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';" />

來源

2012-02-07 06:42:39 amka

試試這個

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

來源

2012-02-07 06:47:17

您可以爲此使用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

來源

2012-02-07 06:55:12 fardjad

如何更改HTML中的圖像按鈕onmouseover事件上的圖像？

回答

相關問題