Javascript onmouseout事件

Question

所以我有一个带3个圆圈的导航和一个jquery滑块。

默认情况下，第一个圆圈亮起，当用户单击第二个圆圈时，滑块移动到第二个div，然后那个圆圈亮起，第一个圆圈变暗。这与第三个圆的工作方式相同。

一切运行正常，代码如下所示

<img name="bullet1" height="30px" width="30px" src="img/bulletwhite.png" onmousedown="this.src='img/bulletwhite.png';document.images['bullet2'].src='img/bullet.png';document.images['bullet3'].src='img/bullet.png'" style="opacity:0.4;filter:alpha(opacity=40)"/>

<img name="bullet2" height="30px" width="30px" src="img/bullet.png" onmousedown=" this.src='img/bulletwhite.png';document.images['bullet1'].src='img/bullet.png';document.images['bullet3'].src='img/bullet.png'" style="opacity:0.4;filter:alpha(opacity=40)"/>

<img name="bullet3" height="30px" width="30px" src="img/bullet.png" onmousedown=" this.src='img/bulletwhite.png';document.images['bullet1'].src='img/bullet.png';document.images['bullet2'].src='img/bullet.png'" style="opacity:0.4;filter:alpha(opacity=40)"/>

我的下一个任务是给圆圈添加一个悬停效果，但是当我给它一个悬停效果时，它会改变图像的src，对吗？因此，当onmouseout被触发时，为了将其改回，它将始终是一个暗淡的圆圈，即使该圆圈之前是亮起的。

所以我的基本问题是，有没有办法让它在onmouseover更改图像之前记住图像的src，然后在onmouseout被触发时使用它返回到以前的状态，我希望这是有意义的:)

任何建议都会有帮助！

Answer 1

您可以尝试添加自定义属性来扩展该类，或者创建自己的JavaScript对象，该对象将存储当前和目标图像(或基础图像、活动图像和悬停图像)，然后将其绑定到主脚本中。将JS移出本地事件并使用像prototype.js或jquery这样的库来连接事件可能会大大简化您的逻辑(尽管这有点夸张--可能在其他地方很有用！)