Insane onmousover problem

[Imperator]

Hi, I've got a very weird problem.
Check the page:
http://ds5.agh.edu.pl/~keanux/Ewa3/pl/java2.php

You'll notice a small arrow that is supposed to change color when onmouseovered. Everything works fine until I run the script under IE 6.x. The funny thing is that the script is working when I engage the page from the localhost but it crashes after uploading to the server (the link I provided).

Error displayed:
'document[...]' is empty or not an object

The script looks like this:

if (document.images) {
image1on = new Image();
image1on.src = "arrow1.png";
image1off = new Image();
image1off.src = "arrow4.png";
image2on = new Image();
image2on.src = "arrow2.png";
image2off = new Image();
image2off.src = "arrow3.png";
}
function changeImages() {
if (document.images) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = eval(changeImages.arguments[i+1] + ".src");
}}}

<a href="about2.php" onmouseover="changeImages('image1', 'image1on')" onmouseout="changeImages('image1', 'image1off')"><img src="arrow1.png" name="image1" class="arrow2" alt="dalej" /></a>

Any clues? Coz I'm about to go crazy...

[BLiZZaRD]

I believe IE6 requires the document.getElementById() instead of changeImages('image1', 'image1on')

[clueful]

The name attribute is invalid under an XHTML doctype.

Use of eval is not required. Change 'name' to 'ID' and try this function instead:

function changeImages() 
{
 if (document.getElementById && document.images) 
  for (var i=0; i<arguments.length; i+=2) 
   document.getElementById(arguments[i]).src = arguments[i+1].src;
}

Using this function, the second of each pair of parameters should not be in quotes.

[Imperator]

Ok, I picked up your advice, guys, and attempted to change the function. I came up with something like this: (I had some troubles with incorporating your code, clueful, so I decided to change it)

<script language="javascript" type="text/javascript">
function changeOverImage()
{
document.getElementById("img1").src = "arrow1.png";
}

function changeOutImage()
{
document.getElementById("img1").src = "arrow4.png";
}
</script>

<img id="img1" src="arrow4.png" alt="dalej" onmouseover="changeOverImage()" onmouseout="changeOutImage()" />

And the problem is the same. The script is working fine except when I run it under IE6x (it works on localhost but fails after uploading to the server). The only change is that there is no error. The image just doesn't change.

http://ds5.agh.edu.pl/~keanux/Ewa3/pl/java2.php

[clueful]

Ok, I picked up your advice, guys, and attempted to change the function. I came up with something like this: (I had some troubles with incorporating your code, clueful, so I decided to change it)

I have revised the function in my first post, but as indicated the second parameter (image object name) must not be passed in quotes. That will work.

[codeexploiter]

I think you can do this in a number of ways. I've mentioned some of it below:

1. Inline event handling for onmouseover and onmouseout like the following code:
[CODE]<img id="img1" src="arrow4.png" alt="dalej" onmouseover="this.src='arrow1.png';" onmouseout="this.src='arrow4.png';" />[CODE]

2. Replace your current img tag with the following one. It looks similar to your but there is one key difference in the way the JS function being called. Insert the JS function below in place of the current functions.

<img id="img1" src="arrow4.png" alt="dalej" onmouseover="changeOverImage(this);" onmouseout="changeOutImage(ICODE]this[/ICODE]);" />

function changeOverImage(obj){
	obj.src = 'arrow1.png';
}
function changeOutImage(obj){
	obj.src = 'arrow4.png';
}

3.
Use the following img tag. There is no event related attributes in the tag

<img id="img1" src="arrow4.png" alt="dalej"/>

After that insert the below mentioned script element after the img tag mentioned above. This is very important you need to put the below script element after the above mentioned img tag otherwise it will not work as expected.

<script type="text/javascript">            
(function() {
	if (document.getElementById('img1')) {
		document.getElementById('img1').onmouseover = function() {
			this.src = '2.gif';
		};
		document.getElementById('img1').onmouseout = function() {
			this.src = '1.gif';
		};
	}
})();      
</script>

Hope this helps.

[Imperator]

Damn, still nothing. I mean I tried all suggested ways but the problem is still the same: everything works fine until I upload the page to the server and run it under IE6x. I gotta check if the problem occurs on different computers. Thanks, guys.

[clueful]

Damn, still nothing. I mean I tried all suggested ways but the problem is still the same: everything works fine until I upload the page to the server and run it under IE6x. I gotta check if the problem occurs on different computers. Thanks, guys.

This can only be .png-related issue. I think there are fixes available but can't you just change to a gif?