rollovers/opacity - cross-browser issues - advice please

Wondering if anyone could offer some suggestion, as I've spent a very long time fruitlessly searching for possible reasons and/or solutions to a problem.

I've made a new photo gallery page on which all the images are linked from blank spacer gifs lined up across the page. A mouseover loads each image into a designated area on screen, after which the image (via JS functions) fades out.

Apart from a scrolling issue, everything works wonderfully on my Mac using Firefox, but I'm having serious cross-browser problems. Both Safari and Opera are non-functional. There are no external style sheets etc, the page is self-contained. I haven't yet tested on IE as I'm working on a Mac and have no Windows access at present. Perhaps someone could advise on any IE problems that exist.

For cross-browser compatibility I have statements:

setOpacity: function(obj, opacity)
{
obj.style.filter = "alpha(opacity=" + opacity + ")"; // For IE filter to work, obj MUST have layout
obj.style.KHTMLOpacity = opacity / 100; // Safari and Konqueror
obj.style.MozOpacity = opacity / 100; // Old Mozilla and Firefox
obj.style.opacity = opacity / 100; // CSS3 opacity for browsers that support it
},

but obviously something's not right there.

All the CSS validates, although the HTML gives a few messages which don't make any sense to me as it seems to be pointing out standard syntax in some if..else statements as errors. However as I said the page functions fine in Firefox.

The page is at: http://moonmilk.org/test/fadelinkline.htm

Any suggestions would be gratefully appreciated.

By the way, my reasons for not displaying thumbnails and for preventing wrapping is purely aesthetic....the Firefox scrolling issue which arises from this I'm sure is a problem with overflow statements although I haven't yet been able to isolate it.

Thanks very much in advance for any help anyone might be able to offer.

You need to stop the validator parsing your JavaScript as raw character data. Use this as your script block instead:

<script type="text/javascript">
// <![CDATA[
var fadeElement =
{
initialise: function(obj)
{
// Set initial opacity for the object:
fadeElement.setOpacity(obj, 100);
// Add the object to objArray:
fadeElement.objArray.push(obj);
// Initialise the fadeState property:
obj.fadeState = '';
// obj.onmouseover = function() { document.large.fadeState = 'fadingIn'; }
// obj.onmouseout = function() { document.large.fadeState = 'fadingOut'; }

// Set a timer to call the fader method:
if (!window.fadeTimer) window.fadeTimer = setInterval(fadeElement.fader, 50);
},

setOpacity: function(obj, opacity)
{
obj.style.filter = "alpha(opacity=" + opacity + ")"; // For IE filter to work, obj MUST have layout
obj.style.KHTMLOpacity = opacity / 100; // Safari and Konqueror
obj.style.MozOpacity = opacity / 100; // Old Mozilla and Firefox
obj.style.opacity = opacity / 100; // CSS3 opacity for browsers that support it
},

fader: function()
{
// Loop through all objects in objArray:
for (var i = 0; i < fadeElement.objArray.length; i++)
{
var obj = fadeElement.objArray[i];
var opacity = obj.style.opacity * 100;

// Set fade in opacity and increment here:
if ((obj.fadeState == 'fadingIn') && opacity < 100)
fadeElement.setOpacity(obj, opacity + 10);
// Set fade out opacity and increment here:
else if ((obj.fadeState == 'fadingOut') && opacity > 0)
fadeElement.setOpacity(obj, opacity - 2);
}
},

objArray: [] // This array stores each object passed to the script.
}

window.onload = function()
{
for (var i = 0; i < document.images.length; i++)
fadeElement.initialise(document.images[i]);
}


function swap(file)
{
document.large.src=file;
fadeElement.setOpacity(document.large, 100);
document.large.fadeState = 'fadingIn';
document.large.fadeState = 'fadingOut';
}
// ]]>
</script>

This should make the validator play nicely.

Also, there is no border attribute. Use the CSS equivalent instead.

Thanks CyanLight, that certainly helps it validate without errors.
I've also sorted the scrolling issues using "fixed" rather than "absolute" positioning.

However the page remains non-functional in Safari and Opera.
I assume there's some error in those cross-browser lines I've included but my searches indicate I'm using the correct syntax to cover the various browsers.

The onMouseover statements also seem valid, so I'm at a dead end.

Any suggestions most appreciated.

I'd also be grateful if someone could look at it in IE and let me know whether it works there. Thanks.

OK, I've managed to get things vaguely working on Firefox, safari and Opera by replacing the document.large instances with document.getElementById('large')

The updated page is: http://www.moonmilk.org/test/fadelinkline2.htm

Haven't been able to confirm whether IE is working, but my main issue now is the lag time between mouseovers and image display.
It was instantaneous on my computer at home but on the web is slow and makes for a confusing experience.
Obviously preloading all the images is out of the question - there will be 365 images each year which would take a ridiculous amount of time.

Does anyone have any ideas for alternative ways around this?
I did try using a div with a "page loading" message which became hidden on <body onload=...> but for some reason this stopped the fading effect from working on the images.

Thanks again in advance for any suggestions.

pavinder,

Your page works OK in IE7, but not in IE6 on Windows. By 'OK' I am implying that it works in IE7 the same as it does in Firefox! It is unclear what it is supposed to do. I wave the mouse cursor around, and different images appear, then fade away. In IE6, I just get a black page with a couple of off-black horizontal lines. However, hovering the mouse cursor in certain places gives an image name in the status bar.

John

Your page works OK in IE7, but not in IE6 on Windows. By 'OK' I am implying that it works in IE7 the same as it does in Firefox! It is unclear what it is supposed to do. I wave the mouse cursor around, and different images appear, then fade away. In IE6, I just get a black page with a couple of off-black horizontal lines. However, hovering the mouse cursor in certain places gives an image name in the status bar.

Valuable feedback John. Thanks.
Strange and annoying about IE6....I almost go insane trying to fix IE issues. Where to begin?

I better explain about the idea of the page - this is not your standard image gallery with which to view photos. It's part of an art-related project on the theme of fading memories and timelines, so that's why I didn't use a conventional layout and clear thumbnails - wanted to merge everything into a vaguely undefined format and not have it all clearly decipherable. But I agree it's maybe a bit TOO undefined - there could be at least some subtle indication of individual spots to navigate, so I'm currently working on some subtle backgrounds for the links.

Any ideas for IE6 debugging/hacking?