Question

我在两个图像上遇到了javaScript hover函数的一些问题。当用户将鼠标悬停在箭头图像上时，它应该变为该图像的悬停版本，如果用户点击它，它应该启动另一个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。

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

Answer 2

img标签没有任何关闭对，如＆lt; / img＆gt;。试试这段代码

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

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

2 个答案: