JavaScript HTML: Image with hover function disappears

Question

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>

score 2 · Accepted Answer · answered Dec 14 '12 at 11:41

2

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.

answered Dec 14 '12 at 11:41

Levi Botelho

24,626
5
61
96

Tried to use explicit path (public_html/img/arrowDown.png), but now it can't find any of the images apparently? The file structure is already identical on local machine and on web server, so nothing I can try there =/ – Lennev Dec 14 '12 at 12:50
Try putting the path into your browser. If you are using the correct path the image will show up onscreen. Your root path should start with a `/`. – Levi Botelho Dec 14 '12 at 13:10
I played around a bit, and found that it worked using the old directory but adding the / in front. Thank you for the help! :) – Lennev Dec 14 '12 at 13:42

user1844626 · Answer 2 · 2012-12-14T13:12:45.343

img tag doesn't have any closing pair like < / img>. try this code

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

if that doesn't work then try to find if the images are in the correct folder or the names of the images are correct.

Edit:

I used this code and working fine on mozilla firefox and 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>

Thanx for pointing it out :) Unfortunately it didn't fix the problem, and I can't find any problem with the naming or placement of the images either. — Lennev, Dec 14 '12 at 12:52
see my edit. and copy the entire code and paste on notepad and create a new html file and keep all those 4 images on 'img' folder. then see if that works on your pc. — user1844626, Dec 14 '12 at 13:14
and for your web server: check the image extensions if those are with '.png' or '.PNG' then write the extension according to the extension you see on server for each image. — user1844626, Dec 14 '12 at 13:19
thanks for good tips, found that the error was that I was missing a / in the beginning of the directory :) — Lennev, Dec 14 '12 at 13:43

JavaScript HTML: Image with hover function disappears

2 Answers2