jquery rollover image moves out of position (jquery-hover)

I开发者_开发技巧'm a jquery noob and having trouble with images staying in position. I have a jquery-hover function that grabs the src attribute of an image and replace it with the value of an attribute called "over". The actual image replacement works correctly, but the rollover image appears about 10% further down the y-axis whenever the mouseenter event fires. I'm looking for a complete overlapping "replacement" of one image with another without the rollover image appearing in a different position. Here's the function:

function createRollovers()
{
    var origImg ="";
    $(".swapImage").hover (
    function() {
        origImg = ($(this).attr("src"));
        $(this).attr("src", ($(this).attr("over")));
    },
    function() {
       $(this).attr("src", origImg);
    }
 );
}

HTML is as follows:

<div id="rightSide">
    <img class="swapImage" over="images/principlesBar_hover.jpg"  src="images/principlesBar.jpg" />
    <img class="swapImage" over="images/processBar_hover.jpg"  src="images/processBar.jpg" />
    <img class="swapImage" over="images/productsBar_hover.jpg"  src="images/productsBar.jpg" />
</div>

I'm sure it's something very simple that someone more experienced would see in a heartbeat. Thanks in advance for any help.

You really don't need JavaScript/jQuery for this. Try the CSS :hover pseudo-class to change the background image of your elements.

Yes, I agree with Ates. But, CSS hover only work for anchor tag in some browser i.e IE6 etc. If you want to implement this with simple JS you can check this link