我想在我的网站上实现一个swapImage，它将交换mouseover上的一个图像，以及mouseout上的另一个图像。从本质上讲，使用我发现的解决方案，我还可以交换不同的图像，甚至mousedown和mouseup。
我在 8 个不同的嵌套选项卡中发生这种情况，所有这些选项卡都在同一页面上。
javascript看起来像这样：
<script type="text/javascript">
function swapImageFiat(imgID, imgSrc) {
var theImage = document.getElementById(imgID)
theImage.src = imgSrc;
}
function swapImageHarley(imgID, imgSrc) {
var theImage = document.getElementById(imgID)
theImage.src = imgSrc;
}
function swapImageHotWheels(imgID, imgSrc) {
var theImage = document.getElementById(imgID)
theImage.src = imgSrc;
}
function swapImageVoltron(imgID, imgSrc) {
var theImage = document.getElementById(imgID)
theImage.src = imgSrc;
}
function swapImageBenchmade(imgID, imgSrc) {
var theImage = document.getElementById(imgID)
theImage.src = imgSrc;
}
function swapImageCrew(imgID, imgSrc) {
var theImage = document.getElementById(imgID)
theImage.src = imgSrc;
}
function swapImageReuters(imgID, imgSrc) {
var theImage = document.getElementById(imgID)
theImage.src = imgSrc;
}
function swapImageMarsVolta(imgID, imgSrc) {
var theImage = document.getElementById(imgID)
theImage.src = imgSrc;
}
function preLoadImages() {
for(var i = 0; i < arguments.length; i++) {
var theImage = new Image();
theImage.src = arguments[i];
}
}
</script>
每个图像的内联代码基本上是这样的：
<img class="diagram" src="img/fiat.gif" id="imgToSwapFiat" alt="Diagram" data-title="Fiat Diagram" onClick="swapImageFiat('imgToSwapFiat', 'img/fiat-animated.gif')" onmouseout="swapImageFiat('imgToSwapFiat', 'fiat.gif')" height="189" width="358" />
我希望能够使用更少的ID、更少的相同重复脚本和更短的内联代码。
但我也希望能够灵活地更改图像及其 ID，而不是对 JQuery 或其他脚本大惊小怪。这就是我使用getElementById的原因。
有没有更有效的方法来编写JavaScript和/或内联代码？
也
有没有办法让图像在动画停止播放后交换回原始图像，而不是在鼠标退出时？
使用this而不是元素 ID，因为您的函数最终需要实际的元素对象。
脚本示例：
function swapImageFiat(imgEle, imgSrc) {
imgEle.src = imgSrc;
}
图像 HTML 示例：
<img src="initial.jpg" onclick="swapImageFiat(this, 'clicked.jpg')" onmouseover="swapImageFiat(this, 'hovered.jpg')" onmouseout="swapImageFiat(this, 'left.jpg')" />
是的，当然有。正如 Jan 提到的 - 您的所有功能都是相同的。没有必要全部复制它们。此外，您可以从 html 中删除内联事件处理程序代码，只需附加鼠标悬停/鼠标退出或鼠标按下/鼠标向上即可。
只需向您希望效果的每个图像添加一个新属性，然后在页面加载时运行一些 js 来附加处理程序。
在这里，我刚刚使用了自定义属性(并检查了它们是否存在)。如果图像有它们，我会附加处理程序。如果没有，它与任何其他正常图像没有什么不同。这应该是一个很好的可重复使用且使用起来很少的努力。
至于在动画 gif 播放后重置图像，我可能会看看 Jan 的第一个建议。对这个想法的轻微修改是使最后一帧透明，然后简单地将动画图像放置在静态图像上(z 索引更高)。 完成后，您将再次看到原始图像。如果需要重播这些图像，您必须决定刷新这些图像的系统。我不确定，也许在将其设置回动画之前将他们的 src 设置为".gif会导致动画再次从头开始播放 - 您必须检查是否决定尝试这种方法。
<!DOCTYPE html>
<html>
<head>
<script>
function byId(e){return document.getElementById(e);}
function mInit()
{
var imgList = document.getElementsByTagName('img');
var i, n = imgList.length;
for (i=0; i<n; i++)
{
if (imgList[i].hasAttribute('img2'))
imgList[i].addEventListener('click', imgClick, false);
if (imgList[i].hasAttribute('img3'))
imgList[i].addEventListener('mouseover', imgHover, false);
if (imgList[i].hasAttribute('img4'))
imgList[i].addEventListener('mouseout', imgOut, false);
}
}
// because these function are attached with addEventListener, the 'this'
// keyword refers to the image element itself. No need for IDs..
function imgClick()
{
this.src = this.getAttribute('img2');
}
function imgHover()
{
this.src = this.getAttribute('img3');
}
function imgOut()
{
this.src = this.getAttribute('img4');
}
window.addEventListener('load', mInit, false);
</script>
<style>
</style>
</head>
<body>
<img src='img/gladiators.png'> <!-- this image won't be touched, as it doesn't have img1, img2 or img3 attributes -->
<img src='img/opera.svg' img2='img/chromeEyes.svg' img3='img/rss16.png' img4='img/girl2.png'/>
</body>
</html>
Jay 对你的函数有一个很好的建议，它们都做同样的事情。如果从函数中删除名称，您将看到它们在其他方面是相同的。函数名称根本没有区别，在这种情况下，重要的是您传递给函数的参数。
有没有办法让图像在 动画停止播放，而不是鼠标退出？
您可以使 gif 不循环，并使动画的最后一帧与原始图像相同。AFAIK 没有办法通过 Javascript 检测动画 GIF 在哪个帧上。
如果你真的希望它返回到原始图像，你可以通过Javascript完全对图像进行动画处理：编写一个预加载所有图像(或spritemap)的函数，然后逐帧加载它们。