javascript - 使用两个不同大小的图像在 CSS 或 Javascript 中创建翻转

Question

情况是这样的。

我正在创建一个数字礼品指南，就像星期日报纸上的数字广告插页一样。我正在创建一个包含三个礼品卡类型图像的页脚，翻转时需要图像交换。问题是设计师给我的翻转图像有一些额外的高度和宽度，因为她在边缘添加了闪光。她还向我发送了 7 度倾斜的翻转图像。因此原始图像的像素尺寸为 w=156 h=96，翻转图像为 w=206 h=154(由于倾斜和添加的额外功能)

我决定使用 javascript 交换图像，但我对它还很陌生，它可能不正确，但它正在完成这项工作。问题是图像正在交换，但新图像正在缩小以适应原始图像的空间。执行此简单图像交换的最佳方法是什么？

<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

你忘记设置类了:

<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>

但是......有一个更好的方法来做到这一点，只使用 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;
}