0

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

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

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

像这样的代码，也许——

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

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

4

1 回答 1

1

你需要mouseover和mouseout事件。mouseover在图像中悬停时触发，mouseout离开图像时触发。使用普通的 ol' 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");
于 2011-10-08T10:05:59.877 回答