JavaScript HTML：具有悬停功能的图像消失

Question

我在两个图像上的 javaScript 悬停功能遇到了一些问题。当用户将鼠标悬停在箭头图像上时，它应该变成该图像的悬停版本，如果用户单击它，它应该启动另一个 javascript 函数来展开/折叠下面的选项卡。 Here 是现场直播。问题在于导航下方右侧的箭头。

起初我尝试只使用 HTML 代码（onMouseOver 和 onMouseOut，并且只加载不同的图像）来执行此操作，但是遇到了一个令人讨厌的错误，如果用户将鼠标悬停在第一个箭头上，然后是第二个箭头，然后返回第一个箭头，然后第二个将完全消失。

现在我尝试使用 JavaScript，但现在您只能看到第一个箭头，如果您将鼠标悬停在它的右侧，它就会消失。

令人讨厌的部分是它在本地服务器上运行良好，但在 Web 服务器上却不行。我以前没有使用过多的 HTML/Javascript，也从未使用过 JQuery。如果可以通过类似的方法轻松解决此问题，我将非常感谢您提供有关如何做到这一点的帮助。我已经阅读了一些具有 CSS 背景的解决方案，但认为这不起作用，因为图像也必须作为按钮工作？

这是改变图片的JS代码

var images= new Array();
images[0] = "img/ArrowDown.png";
images[1] = "img/ArrowDownHover.png";
images[2] = "img/ArrowUp.png";
images[3] = "img/ArrowUpHover.png";

function DownChange()
{
    document.getElementById("expandAll").src = images[1];
}

function DownGoBack()
{
    document.getElementById("expandAll").src = images[0];
}

function UpChange()
{
    document.getElementById("collapseAll").src = images[3];
}

function UpGoBack()
{
    document.getElementById("collapseAll").src = images[2];
}

这是 HTML 代码

<div id="collapse"> 
    <img src="img/arrowDown.png" id="expandAll" onMouseOver="DownChange()" onMouseOut="DownGoBack()" onClick="openAll()"></img>
    <img src="img/arrowUp.png" id="collapseAll" onMouseOver="UpChange()" onMouseOut="UpGoBack()" onClick="closeAll()"></img>
</div>

Answer 1

如果它在您的本地机器上运行，则问题不是来自您的 JS。

我猜的问题是您的图像在您的网络服务器上没有正确引用。尝试在本地和远程计算机上使用来自服务器根目录的显式路径，并尝试让两台计算机相互镜像对方的文件夹结构。

Answer 2

img 标签没有像 这样的闭合对。试试这个代码

<div id="collapse"> 
    <img src="img/arrowDown.png" id="expandAll" onMouseOver="DownChange();" onMouseOut="DownGoBack();" onClick="openAll();" />
    <img src="img/arrowUp.png" id="collapseAll" onMouseOver="UpChange();" onMouseOut="UpGoBack();" onClick="closeAll();" />
</div>

如果这不起作用，请尝试查找图像是否在正确的文件夹中或图像的名称是否正确。

编辑：

我使用了这段代码，并且在 mozilla firefox 和 IE 6 上运行良好 -

<script type="text/javascript">
<!--
var images= new Array();
images[0] = "img/ArrowDown.png";
images[1] = "img/ArrowDownHover.png";
images[2] = "img/ArrowUp.png";
images[3] = "img/ArrowUpHover.png";

function DownChange()
{
    document.getElementById("expandAll").src = images[1];
}

function DownGoBack()
{
    document.getElementById("expandAll").src = images[0];
}

function UpChange()
{
    document.getElementById("collapseAll").src = images[3];
}

function UpGoBack()
{
    document.getElementById("collapseAll").src = images[2];
}
-->
</script>


<div id="collapse"> 
    <img src="img/arrowDown.png" id="expandAll" onMouseOver="DownChange();" onMouseOut="DownGoBack();" onClick="openAll();" />
    <img src="img/arrowUp.png" id="collapseAll" onMouseOver="UpChange();" onMouseOut="UpGoBack();" onClick="closeAll();" />
</div>