gpt4 book ai didi

JavaScript 图像更改

转载 作者:行者123 更新时间:2023-11-28 19:54:08 25 4
gpt4 key购买 nike

Javascript 被用来制作一个简洁的注销按钮。它几乎完美地工作,除了我无法弄清楚如何将一条线附加到“跨度”,因此它还可以编辑图像,因为代码使用了 self 变量。如何获取要在附加到链接范围的脚本中使用的图像,以便无论我将鼠标悬停在链接还是图像上,图像都会发生变化。我尝试过使用一些解决方案,但要么没有按照我想要的方式工作,要么根本不起作用。 JQuery 也适合作为解决方案。就 Javascript/JQuery 而言,我非常无知,因为到目前为止我的大部分编码都是 PHP/CSS。

<a href="#logout">
<span>Logout</span>
<img src="images/logout.png"
onmouseover="this.src='images/logout_hover.png'"
onmouseout="this.src='images/logout.png'" />
</a>

最佳答案

由于事件传播,这应该有效:

<a id="login_link" href="#logout" onmouseover="document.getElementById('login_image').src='images/logout_hover.png'" onmouseout="document.getElementById('login_image').src='images/logout.png'">
<span>Logout</span>
<img src="images/logout.png" id="login_image" />
</a>

但如2pha提到过,使用简单的 CSS 效果要好得多:

#login_link span#logo_image {
display: inline-block;
width: 100px;
height: 30px;
background: transparent url(images/logout.png) top left no-repeat;
}
#login_link:hover span#logo_image {
background-image: url(images/logout_hover.png);
}

或者更好的是,合并 2 个图像并将新图像用作 Sprite ,这样它们就会一起预加载:

#login_link span#logo_image {
display: inline-block;
width: 100px;
height: 30px;
background: transparent url(images/logout.png) top left no-repeat;
}
#login_link:hover span#logo_image {
background-position: bottom left;
}

关于JavaScript 图像更改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22895740/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com