jQuery not setting onmouseover and onmouseout attributes in google chrome?

Question

JavaScript

On the onload event, a function is hung that reduces large images on the page.

When you hover over the mouse, the picture should become the original size. If doing so

$(this).attr({<br>
        width: width_resized,<br>
        onmouseover: '$(this).attr("width", ' + width + ');',<br>
        onmouseout: '$(this).attr("width", ' + width_resized + ');'    <br>
});<br>

then in fox and opera it works fine, but in chrome only the width is set.

$(this).attr("onmouseover", '$(this).attr("width", ' + width + ');');

That doesn't work either.

What could be the problem?

Answer 1

The problem is that you are using a non-standard jQuery API that it cannot support.
The correct way to do it is:

$(this)
    .width(width_resized)
    .mouseover(function () {
        $(this).width(width);
    })
    .mouseout(function() {
        $(this).width(width_resized);
    });

Answer 2

The fact is that you set the attribute and hence the incorrect work in different browsers. There is a DOM
answer in this article : Properties VS Attributes .