3

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

起初我尝试只使用 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>
4

2 回答 2

2

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

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

于 2012-12-14T11:41:23.977 回答
1

img 标签没有像 </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>
于 2012-12-14T12:14:38.873 回答