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.

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.

• javascript
• html
• css
• imagebutton
• onmouseover

Share Follow edited Feb 7, 2012 at 6:34 Mikael Östberg 17.2k66 gold badges6666 silver badges8080 bronze badges asked Feb 7, 2012 at 6:32 Raju.allenRaju.allen 34122 gold badges99 silver badges2121 bronze badges 3

• Possible answer? stackoverflow./questions/540349/… – Melros Commented Feb 7, 2012 at 6:38
• @ Exor : i can view the code. – Raju.allen Commented Feb 7, 2012 at 6:40
• @Raju.allen : Yea i could see it now.. :) – Exor Commented Feb 7, 2012 at 6:42

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

Try this

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

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

Segregating your code from html is always advised.. this answer will be helpful as it is cleaner and good for debugging..

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

You can use either Javascript or CSS for this, below is the javascript approach.

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

Note that setting events in HTML is not a good practice, it's better to tie them up in Javascript.

---

The CSS way is as follows:

#Dumb {
    backgroud: url("dump.png");
}

#Dumb:hover {
    backgroud: url("another.png");
}

JS Fiddle Demo