JQuery - Add an onmouseover attribute to an input element where type equals image

Is it possible to add an onmouseover attribute to an input element where type equals image?

I have created the following code but it does not add the attribute.

    <script language="javascript" type="text/javascript">
        $(document).ready(function() {
            $("input").each(function(i) {
                if (this.src.indexOf('/images/icons/thumbs.png') != -1) {
                    $(this).attr({ onmouseover: "images/icons/thumbsover.png" });
                    $(this).attr({ onmouseout: "images/icons/thumbsout.png" });
                }
            });
        });
    </script>   

You are misunderstanding the onmouseover attribute.

The onmouseover attribute is used in HTML to provide Javascript code that executes when the mouse moves over the element.

In jQuery, you should use the event methods instead.

You actually want to write the following:

$(":image[src='/images/icons/thumbs.png']").hover(
    function() { this.src = 'images/icons/thumbsover.png' },
    function() { this.src = 'images/icons/thumbsout.png' }
);

For more information, read about selectors.

Here some code that will give you the desired effect.

$(document).ready(function() {
    $("input:image[src$=thumbs.png]").hover(function() {
        $(this).attr("src", "images/icons/thumbsover.png")
    }, function(){
        $(this).attr("src", "images/icons/thumbsout.png")    
    });
});        

PS. I would try and achieve the efect using pure CSS

See jQuery's Selectors/Attribute documentation for more information.

$("input[type='image']").hover(
  function () {
    //mouseover
  },
  function () {
    // mouseout
  }
);

Yep, very easy indeed with selectors:

$('input[type=image]').mouseover(function(){
    ...
}).mouseout(function(){
    ...
});

in this case, it seems you want to change the background image:

$('input:image[src=/images/icons/thumbs.png]').hover(function(){
    //Mouse Over
    $(this).attr('src','mouseoverimage.gif');
},
function(){
    //Mouse Out
    $(this).attr('src','mouseoutimage.gif');
});

Are you trying to change the source of the image when the user hovers it? Then try the following:

<script language="javascript" type="text/javascript">
    $(document).ready(function() {
        $("input").each(function(i) {
            if (this.src.indexOf('/images/icons/thumbs.png') != -1) {
                $(this).hover(
                  function(){ $(this).attr("src", "images/icons/thumbsover.png");},
                  function(){ $(this).attr("src", "images/icons/thumbsout.png");}
                );
            }
        });
    });
</script>