Search code examples
javascripthtmlonmouseoveronmouseout

JavaScript HTML: Image with hover function disappears

I am experiencing some problems with my javaScript hover function on two images. When the user hovers over the arrow image it should change into a hover-version of that image, and if the user clicks on it it should start another javascript function to expand/collapse the below tabs. Here is the live site. The problem is with the arrows on the right side below the navigation.

At first I tried doing this with only HTML code (onMouseOver and onMouseOut, and just load different image), but got a nasty bug where if the user hovered over the first arrow, then the second, and back to the first, then the second would completely disappear.

Now I tried with JavaScript instead, but now you can only see the first arrow, and that disappears if you hover to the right of it.

The annoying part is that it works perfectly fine from the local server, but not on the web server. I've not used much HTML/Javascript before, and never used JQuery. If this can be solved easily with something like that, I would be really grateful for some help on how to do so. I've read some solutions with CSS background, but don't think that would work because the image must work as a button as well?

Here is the JS code for changing the images

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];
}

Here is the HTML code

<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>
Solution

  • If it is working on your local machine, the problem isn't coming from your JS.

    The problem I would guess is that your images are not correctly referenced on your web server. Try using explicit paths from the server root on both your local and remote machine, and try to have both machines mirror each other's folder structure.