ImageReady Rollover Code Not Working in IE 4

[Spire2000]

I have used ImageReady to create some rollover Javascript code for some buttons I have designed for my site. Everything works great on my development machine, but when moved to the server and viewed with IE 4 (which is what we're limited on our Intranet), the rollover features don't work. The image is displayed fine, and the hyperlink still works, but nothing else.

Here is the Javascript in the header:

<SCRIPT TYPE="text/javascript">

function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}

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

var preloadFlag = false;
function preloadImages() {
if (document.images) {
diob_move_01_over = newImage("images/diob_move_01-over.gif");
diob_move_01_down = newImage("images/diob_move_01-down.gif");
preloadFlag = true;
}
}

// -->
</SCRIPT>

And here are the rollovers:
$output->Text('<table>');
$output->Text('<tr>');
$output->Text('<td><A HREF="#" ONMOUSEOVER="changeImages(\'diob_move_01\', \'images/diob_move_01-over.gif\'); return true;"
ONMOUSEOUT="changeImages(\'diob_move_01\', \'images/diob_move_01.gif\'); return true;"
ONMOUSEDOWN="changeImages(\'diob_move_01\', \'images/diob_move_01-down.gif\'); return true;"
ONMOUSEUP="changeImages(\'diob_move_01\', \'images/diob_move_01-over.gif\'); return true;">
<IMG NAME="diob_move_01" SRC="images/diob_move_01.gif" WIDTH=72 HEIGHT=29 BORDER=0 ALT="DIOB"></A>');
$output->Text('</td>');
$output->Text('<td><A HREF="#" ONMOUSEOVER="changeImages(\'diob_move02_01\', \'images/diob_move02_01-over.gif\'); return true;"
ONMOUSEOUT="changeImages(\'diob_move02_01\', \'images/diob_move02_01.gif\'); return true;"
ONMOUSEDOWN="changeImages(\'diob_move02_01\', \'images/diob_move02_01-down.gif\'); return true;"
ONMOUSEUP="changeImages(\'diob_move02_01\', \'images/diob_move02_01-over.gif\'); return true;">
<IMG NAME="diob_move02_01" SRC="images/diob_move02_01.gif" WIDTH=72 HEIGHT=29 BORDER=0 ALT="DEM"></A>');
$output->Text('</td>');
$output->Text('<td><A HREF="#" ONMOUSEOVER="changeImages(\'diob_move03_01\', \'images/diob_move03_01-over.gif\'); return true;"
ONMOUSEOUT="changeImages(\'diob_move03_01\', \'images/diob_move03_01.gif\'); return true;"
ONMOUSEDOWN="changeImages(\'diob_move03_01\', \'images/diob_move03_01-down.gif\'); return true;"
ONMOUSEUP="changeImages(\'diob_move03_01\', \'images/diob_move03_01-over.gif\'); return true;">
<IMG NAME="diob_move03_01" SRC="images/diob_move03_01.gif" WIDTH=72 HEIGHT=29 BORDER=0 ALT="DCDS"></A>');
$output->Text('</td>');
$output->Text('<td><A HREF="#" ONMOUSEOVER="changeImages(\'watch_01\', \'images/watch_01-over.gif\'); return true;"
ONMOUSEOUT="changeImages(\'watch_01\', \'images/watch_01.gif\'); return true;"
ONMOUSEDOWN="changeImages(\'watch_01\', \'images/watch_01-down.gif\'); return true;"
ONMOUSEUP="changeImages(\'watch_01\', \'images/watch_01-over.gif\'); return true;">
<IMG NAME="watch_01" SRC="images/watch_01.gif" WIDTH=144 HEIGHT=29 BORDER=0 ALT="NDCC Watch"></A>');
$output->Text('</td>');
$output->Text('</tr>');
$output->Text('</table>');

Ignore the $output->text stuff, as that's just my method of plugging it into my PHP script. Also, I have added a few carriage returns to the code above to make it readable on these fourms without stretching the page across the horizon.

Anyone have any ideas what I can do to makethis work in IE 4? I'm not sure what part of the ImageReady code is causing a conflict with the browser, so I don't know quite where to start looking for a solution.

Any help would be greatly appreciated.

[Spire2000]

Anyone have any thoughts or ideas?

[Willy Duitt]

Originally posted by Spire2000
Anyone have any thoughts or ideas?

Although you stated that you added line breaks here to
avoid horizontal scrolling. When I placed your code into
my editor, there were numerous line breaks. Some of
which did not appear to be purposely placed.

Since you are outputting these codes via PHP.
I would check that the server is not corrupting
the code when written to the file.

Other than that, I would suggest finding another script.
That seems to be a discombobulated mess and a difficult
way to achieve your goal.

.....Willy

[blackbox]

u dont need to use all that mumbo jumbo just use a simple onMouseOver inside the button.


for example

<html>
<head> <title>onMouseOver Test Page</title>

</head>

<body>

<img src="button.gif" name="button"><!-----write here i names the button image--->

<a href="www.link.html">

<img src="button.gif" onMouseOver="document.button.src='Changed_button.gif';" onMouseOut="document.button.src='button.gif';">

</body>
</html>


thats the easyer way if u have any problems or questions dont hesitate to ask. email me veil_side69@hotmail.com

[Dr. Web]

I do agree to a certain extent with the comments thus far. First off, the version of imageready that you are using probably does not write javascript for IE4.0 (why are you supporting that old version?).

I'd suggest grabbing a rollover script from www.a1javascripts.com and customizeing it to suit your needs.




Blackbox, there is a reason for the extra code. Have a look and see if you can see where the code preloads images, checks to see that images have been preloaded prior to swapping them, and reuses the functions for all calls... instead of rewriting it for each image. If you cannot see these advantages, you'll probably not understand why it wasn't done 'the easy way'.

Keep in mind that imageready created this script for imageready and certain versions of IE... not human coders. Thats part of the reason it looks a bit confusing (but not that bad actually).

[Spire2000]

Thanks for the help guys. Javascript is something that confuses me a fair extent, basically because there appears to be a million ways to accompish any given goal..

Dr. Web, thanks for the link; I'll be heading there now. I am forced to support IE4, because I am working on a secure government intranet system, and the Powers That Be have not deemed anything higher than IE4 to be secure enough to install across the network. So for the time being, I am stuck with programming that is dated by 4-5 years.