Question

我对使用JavaScript的翻转效果有疑问。

我已经读过，在使用JS处理onmouseover时，可以在CSS偏移的帮助下使用图像精灵（图像侧面有另一个图像）来实现基本翻转。还阅读了有关使用JS（className）更改类本身以实现上述效果的可能性。

我的问题是，我可以使用JavaScript修改图像src本身，以实现翻转效果吗？

这样的代码，可能 -

document.getElementByID("button1").onmouseover = rolloverFunction;
function rolloverFunction(){
this.src = "button1-image2.png";
}

我键入了这样的内容，看看是否可以在翻转时修改图像的src，但它不起作用。你能不能告诉我哪里出错了？

Answer 1

您需要mouseover和mouseout个活动。悬停图像时，mouseover在图像中mouseout悬停时会触发。使用普通的'JS将产生：

<img src="default.png" id="image" alt="">

<script>
var image = document.getElementById("image");
image.onmouseover = function () {
    this.src = "rollover.png";
};
image.onmouseout = function () {
    this.src = "default.png";
};
</script>

或使用常用功能避免重复URL：

function rollover_effect(img_elm, rollover_src) {
    var default_src = img_elm.src;
    img_elm.onmouseover = function () {
        img_elm.src = rollover_src;
    };
    img_elm.onmouseout = function () {
        img_elm.src = default_src;
    };
}
rollover_effect(document.getElementByID("image"), "rollover.png");

使用JavaScript可以在翻转时更改图像的来源吗？

1 个答案: