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

Answer 2

这些天做翻转的标准方法是纯CSS;你不应该使用Javascreeept。例如：

<a href="#" class="rollover">&nbsp;</a>

.rollover { 
    width: 156px;
    height: 96px;
    background:url('img/Free-Gift.jpg') no-repeat;
}

.rollover:hover { 
    width: 206px;
    height: 156px;
    background:url('img/Free-Gift(Roll).jpg') no-repeat;
}

这不包括您的所有定位代码BTW。现在你可以从这里做很多事情。例如 - 不是使用 ，而是可以在其中放置单词以帮助访问/ SEO并将样式设置为text-indent，这样您就无法看到单词。或者如果你真的想在那里有一个图像，你可以嵌套它并改变css选择器以使图像也在那里（.rollover:hover img）。但是请不要使用javascript来做这么简单的事情。

使用两个不同大小的图像在CSS或Javascript中创建Rollover

2 个答案: