Javascript works locally but not when uploaded

[Corrie]

Hi,
I've been trying to create a menu with animated mouseOvers using script instead of Flash. It works locally in Firefox but won't load at all in Safari (blank page). Then when I upload it to the server the mouseOvers stop working in Firefox.


The broken file is at :
http://www.chimpanzoo.co.uk/main_projects_no_flash.html

The animations should work like the Flash version at this site:
http://www.la-design.co.uk/english/html/main.html

I've tried changing my paths to the gifs from 'buttons/about.gif' to '../buttons/about.gif' in case this helps FF but it still won't work.

It's a work in progress so please ignore the links in the site!


Let me know if you need more info

Thanks for any help
Corrie

[dlite922]

Do you see any errors in Firefox? Go to Tools -> Error Console when accessing the page. If there are lots of stuff there. Hit Clear and refresh the page.

Is your page valid? Use w3c.org's validator to ensure you have correct HMTL or XHTML.

DM

[Corrie]

Thank you, I'll give that a go, may seem obvious, but I'm pretty new!
Thanks

[Corrie]

I'm such a donut!

I still had:
<script language="javascript>

instead of:

<script type="text/javascript">

That only fixes the animation problem though and it still won't open in Safari.

w3c's validator brings up a bunch of things that don't make sense to me e.g.
'end tag for element "body" which is not open'

I have an opening and closing body tag, no others so why is this wrong?

Other errors don't make sense to me either.

Any help would be greatly appreciated.

Thanks

[Corrie]

This block in my <head. tags is what's stopping it working in Safari:

<script type="text/javascript">
<!--
// PRELOADING IMAGES
if (document.images) {
button1_on =new Image(); button1_on.src ="buttons/about_hover.gif";
button1_off=new Image(); button1_off.src="buttons/about.gif";

button2_on =new Image(); button2_on.src ="buttons/product_areas_hover.gif";
button2_off=new Image(); button2_off.src="buttons/product_areas.gif";

button3_on =new Image(); button3_on.src ="buttons/news_hover.gif";
button3_off=new Image(); button3_off.src="buttons/news.gif";

button4_on =new Image(); button4_on.src ="buttons/contact_hover.gif";
button4_off=new Image(); button4_off.src="buttons/contact.gif";

}

function mouseOver(k) {
if (document.images)
eval('document.button'+k+'.src=button'+k+'_on.src' );
}

function mouseOut(k) {
if (document.images)
eval('document.button'+k+'.src=button'+k+'_off.src ');

}


</script>




If I remove this the page opens fine but without the above functionality. Put this back in and the page is blank again.

Any Ideas?

Thanks

[Corrie]

Fixed it...
My comment <!--// PRELOADING IMAGES
needed to have --> at the end
Because Firerfox worked without it I didn't suspect that to be the problem.

Thanks so much dlite922 for pointing me in the right direction.
C