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

发布于 2024-12-09 02:06:31 字数 455 浏览 2 评论 0原文

我有一个关于使用 JavaScript 的翻转效果的问题。

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

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

也许是这样的代码 -

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

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

原文

I have a question on rollover effects using JavaScript.

I have read that image sprites (image with another image on its side) can be used with help of CSS offsetting to achieve basic rollover when onmouseover is handled using JS. Have also read about the possibility of changing classes itself using JS (className) to achieve the above effect.

My question is, can I modify the image src itself using JavaScript, to achieve the rollover effect?

A code like this, maybe -

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

I typed something like this to see if the src of the image can be modified upon rollover, but it is not working. Could you please let me know where I am going wrong?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

单挑你×的.吻 2024-12-16 02:06:31

您需要 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");

You need the mouseover and mouseout events. mouseover is triggered when hovering in the image, mouseout on leaving the image. Using plain ol' JS would yield:

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

Or using a common function to avoid duplicating the 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");

回复收藏 0 原文

~没有更多了~