Question

Here is the Situation.

I am creating a digital gift guide, like a digital ad insert in the Sunday paper. I am creating a footer that has three gift card type images, that on rollover need to image swap. The problem is the image the designer has given me for the rollover has some extra height and width due to sparkles she has added to the edges. She also sent me the rollover image with a 7 degree tilt. So the dimensions in pixels of the original image are w=156 h=96, and the rollover image is w=206 h=154 (due to tilt and extras added)

I decided to swap images using javascript, but I am fairly new at it, and it may not be right, but it is doing the job. The problem is the images are swapping, but the new image is shrinking to fit in the space of the original image. What is the best way to do this simple image swap?

<a href="" onMouseOver="document.MyImage.src='img/Free-Gift(Roll).png';" onMouseOut="document.MyImage.src='img/Free-Gift.jpg';">
<img src="img/Free-Gift.jpg" name="MyImage" class="free">

</a> 

.free {
    width: 156px;
    height: 96px;
    position: absolute;
    top: 55px;
    left: 352px;
}

.freeroll {
    position: absolute;
    width: 206px;
    height: 156px;

}

Answer 1

You’re forgetting to set the class:

<a href="" onMouseOver="document.MyImage.src='img/Free-Gift(Roll).png';document.MyImage.className='freeroll';" onMouseOut="document.MyImage.src='img/Free-Gift.jpg';document.MyImage.className='free';">
    <img src="img/Free-Gift.jpg" name="MyImage" class="free" />
</a>

However… there is a better way to do this, using only CSS:

<a href="" id="myRollover">Free Gift!</a>

...

#myRollover {
     background-image: url('img/Free-Gift.jpg');
     width: 156px;
     height: 96px;
     position: absolute;
     top: 55px;
     left: 352px;
     text-indent: -9999px;
}

#myRollover:hover {
     background-image: url('img/Free-Gift(Roll).jpg');
     width: 206px;
     height: 156px;
}