I think I finally have a workable solution to the Eolas IE issue with the Flash navigation on our college Web site. My hope is that we’ll be able to hit the largest audience possible with at least some measure of functionality, while simultaneously maintaining a semblance of Web Standard-itude. How’s that for ambitious?!?!
My solution is basically a three-tiered approach:
- Object tag-based embedding (a la the Flash Satay method) of the primary navigation bar .swf file
- Alternative content — an ordered list of images/links mimicking the links in the Flash swf with javascript mouseover effects. These two tiers are embedded in the page using a static JavaScript file that document.write()s the content into the page.
- A second set of images/links as an all-else-fails backup for users with no scripting support, served by <noscript> tags.
Some downsides:
- Users who have no scripting, or have it turned off, will never see the Flash version, whether they have the plugin or not
- Non-IE users will always have their navigation built with JavaScript. Seems inefficient, but without walking down the path of browser detection, I don’t see a way around this.
- Our current set of non-Flash alternative images are PNGs, which look really awful in IE6. Hopefully we can remedy this soon.
- With potentially two copies of the alternative content in the page (one in the JavaScript-generated object tag, the other in the <noscript> block), there may be difficulties that I’m not seeing.
I’m working on a more thorough writeup of this process to post somewhere, but that’s a summary. Feel free to poke around the code — if anyone has suggestions for improvements to the method, I’m all ears. I’m in the process of working up a solution for our QuickTime movies following a similar path, with some ideas pulled from unobtrusive JavaScript.
