Alternate image (for IPad) attempts don't work in IE8 or IE9

[keltoid]

Hello - I have made 2 attempts to show alternate image content for IPad (no Flash) - one using an animated gif, and one using swiffy. I want to have desktops still show the Flash, but Ipads show the alternate animations. Both of these solutions worked great! Except for one problem -- the Flash showed as usual in Chrome, Safari and FFox, but guess who now doesn't show the Flash. IE8 & 9.

I have 2 divs, one for the .gif, one for the Flash -- I can paste the javascript below, can anyone tell me if there is something I can add to it to force the IE browsers to still show the Flash?

<script language="javascript">
if ((navigator.userAgent.match(/iPad/i) != null) || (navigator.userAgent.match(/iPhone/i) != null) || (navigator.userAgent.match(/iPod/i) != null)) { document.getElementById("altimage").style.display = "block"; document.getElementById("origflash").style.display = "none"; }
</script>

The first div is <div id="altimage" style="display:none">
Second is <div id="origflash" style="display:block">


For the Swiffy html5 attempt:

The only difference is the first div pulls the Swiffy html into an iframe:

        <div id="althtml5" style="display:none">
      <iframe vspace="0" hspace="0" width="630" height="220" src="http://beta.patternworks.com/test/pw1ST.swf.aspx" scrolling="no"
style="overflow:visible">
</iframe></div>

The javascript is the same, but references the first div differently

<script language="javascript">
if ((navigator.userAgent.match(/iPad/i) != null) || (navigator.userAgent.match(/iPhone/i) != null) || (navigator.userAgent.match(/iPod/i) != null)) { document.getElementById("althtml5").style.display = "block"; document.getElementById("origflash").style.display = "none"; }
</script>

-- need a resolution to show the Flash on the desktop IE browsers. Thank you in advance, I really, really hope someone can help me with one or the other (or both! : ) of these options.

[clueful]

<script language="javascript">
if ((navigator.userAgent.match(/iPad/i) != null) || (navigator.userAgent.match(/iPhone/i) != null) || (navigator.userAgent.match(/iPod/i) != null)) { document.getElementById("altimage").style.display = "block"; document.getElementById("origflash").style.display = "none"; }
</script>

That code must be positioned below the elements to which it refers. Is it?