How to show image instead of flash object on mobile devices

Question

I have a flash object currently on website which many mobile devices cannot read. At some point I plan to recreate the object in a format that mobile devices can read, but in the meantime need a work around so that they will see an image instead of the flash animation. I cannot use a background image because the flash object has transparent background and would see the image under it. I also tried adding the image right before the object closing tag, but that did not work - the block for the flash object remains and the image also shows under the object.

Here is the original HTML for the object that I have on the website right now:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" id="swf%20files/SBC-Header" width="652" height="63">
<param name="movie" value="swf%20files/SBC-Header.swf" />
<param name="bgcolor" value="#222A4F" />
<param name="quality" value="best" />
<param name="wmode" value="transparent" />
<param name="seamlesstabbing" value="false" />
<param name="allowscriptaccess" value="samedomain" />
<embed type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" name="swf%20files/SBC-Header" width="652" height="63" src="swf%20files/SBC-Header.swf" bgcolor="#222A4F" quality="best" wmode="transparent" seamlesstabbing="false" allowscriptaccess="sameDomain"></embed>
</object>

Here is the HTML is tried using to get an alternate image to show:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" id="swf%20files/SBC-Header" width="652" height="63">
    <param name="movie" value="swf%20files/SBC-Header.swf" />
    <param name="bgcolor" value="#222A4F" />
    <param name="quality" value="best" />
    <param name="wmode" value="transparent" />
    <param name="seamlesstabbing" value="false" />
    <param name="allowscriptaccess" value="samedomain" />
    <embed type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" name="swf%20files/SBC-Header" width="652" height="63" src="swf%20files/SBC-Header.swf" bgcolor="#222A4F" quality="best" wmode="transparent" seamlesstabbing="false" allowscriptaccess="sameDomain"></embed>
<img src="Images/Compage/SBC_Header.png" width="652" height="63" alt="" />
</object>

Any help with a solution would be greatly appreciated.

Answer 1

Wrap the object in a DIV. Set the image as the background of the DIV.