I. The Problem
For the past couple years, I’ve been using alternate XHTML for my Flash pages for purposes of both accessibility and SEO. The code generally looks something like this:
<div id="flashContent">
<object type="application/x-shockwave-flash" data="swfFileNameHere.swf" height="650" width="950"> <param name="movie" value="swfFileNameHere.swf" />
<div id="noFlashContent">
<h1>Some Title</h1>
<p>Some content here.</p>
</div>
</object>
</div>
The SWF is then displayed on the XHTML page:
To view the alternate XHTML content, I change the name of the SWF file in the object
tag to a dummy file that doesn’t exist:
<div id="flashContent">
<object type="application/x-shockwave-flash" data="nonExistentFileNameHere.swf" height="650" width="950"> <param name="movie" value="swfFileNameHere.swf" />
<div id="noFlashContent">
<h1>Some Title</h1>
<p>Some content here.</p>
</div>
</object>
</div>
After uploading to my web host with Dreamweaver, the alternate XHTML is visible in Firefox, IE and Opera:
Strangely though, the alternate XHTML content is not visible in Google Chrome or Safari; it is completely “whited-out”.
II. The Solution
The alternate XHTML content can be placed outside the object
tags, and then positioned directly under the Flash object
. For this to work, the Flash object
must be set to transparent:
<div id="flashContent">
<object type="application/x-shockwave-flash" data="nonExistentFileNameHere.swf" height="650" width="950"> <param name="movie" value="swfFileNameHere.swf" /> <param name="WMode" value="transparent" /> </object>
<div id="noFlashContent">
<h1>Some Title</h1>
<p>Some content here.</p>
</div>
</div>
The required CSS for this is:
#flashContent{
height: 650px;
width: 650px;
/* IMPORTANT FOR ABSOLUTE POSITIONING TO WORK */
position: relative;
/* CANNOT USE ANY OTHER BACKGROUND COLOR!!! */
background-color: transparent;
}
#noFlashContent{
height: inherit;
width: inherit;
padding: 0px;
position: absolute;
top: 0px;
left: 0px;
z-index: -1;
/* ANY BACKGROUND COLOR WILL DO... */
background-color: white;
}
III. Static Image Replacement
Several of my Flash pages feature an animated panorama of Calgary, with an alternative static JPG image displayable using the following code:
<div id="flashFooter">
<object type="application/x-shockwave-flash" data="myPathway/animatedCalgary.swf" height="66" width="965"> <param name="movie" value="animatedCalgary.swf" />
<img src="myPathway/staticCalgary.jpg" alt="Calgary Skyline" />
</object>
</div>
Again, the replacement image doesn’t display in Google Chrome or Safari. This can be fixed with the following code:
<div id="flashFooter" style="position: relative;">
<object type="application/x-shockwave-flash" data="myPathway/animatedCalgary.swf" height="66" width="965"> <param name="movie" value="animatedCalgary.swf" /> <param name="WMode" value="transparent" /> </object>
<img src="myPathway/staticCalgary.jpg" alt="Calgary Skyline" style="position: absolute; top: 0px; left: 0px; z-index: -1;" />
</div>
IV. Solutions In Search Of A Problem?
A day after coming up with the fix, I faced the task of manually changing the code for 40 or 50 Flash pages on this site.
At that point, I tried temporarily disabling Flash on various browsers. Doing so eliminated the “whited-out” effect entirely!
In other words, visitors without Flash never encounter the problem I thought they would. The only time this is ever a problem is when a dummy SWF file is uploaded during testing. But disabling Flash on my machine is a better method of testing alternate XHTML content anyways, and doesn’t result in the problem of “whited-out” alternate content.