how to change the image on a image button onmouseover event in HTML?

Question

I have 4 image button containing a image. on mouse over i have to change the image(i.e load a new image on the button). Here is the code.

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

Here I have loaded dump.png, informative.png, brilliant.png and cool.png. on mouse over on each button i have to change the image.

Answer 1

Try this

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