How to show an image if flash is disabled?

I have a new site for a client who wanted to keep his old flash gallery until I got him a new portfolio. I have it being pulled in through an iframe, but now he wants a static image to show so the infamous i-phone people don’t get left with a blank box. I tried some code I found around the internet but it isn’t working. Most of the posts are very old. I am not real familiar with .js so does anyone have a plug and play option or advice?

If you use the <object> element to run the flash items, you can provide a fallback. E.g.

<object type="application/x-shockwave-flash" data="flash-file.swf" width="xxx" height="xxx"
        <param name="movie" value="flash-file.swf">
        <img src="path-to/fallback-image.jpg" alt="">
</object>

I tried that but it still doesn’t show… Im wondering if its how I have it set up. Thanks to you Ralph I am now able to set proper z-index which Is what I have going on here. The old site was just one html page with the flash embedded. It is behind the new Wordpress site I built have pulled in through iframe with a custom border, etc., all stacked. Is that whats interfering? I added the img src to the html file where the flash is like this…

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" id="detailexchangellc" align="middle" height="600" width="880">
<param name="allowScriptAccess" value="sameDomain">
<param name="movie" value="detailexchangellc2.swf"><param name="quality" value="high"><param name="bgcolor" value="#1E1E1E"><embed src="detailexchangellc2.swf" quality="high" bgcolor="#1E1E1E" name="detailexchangellc" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" align="center" height="600" width="880">
<img src="http://detailexchangellc.com/altflash.jpg" width="650" height="477" alt="NoFlash" />

the site is http://detailexchangellc.com

Hm, odd, the image is there, but you have to scroll down to see it, which is weird. A blank box with a No flash message appears above it. I wonder if that message would disappear if those links to Flash were removed. Worth a try, anyway.

If the Flash is inside <object> tags, you can have a fallback child element inside <object>. Something like this is common:


<object id="someFlashThing" type="application/x-shockwave-flash" width="800" height="200">
  <param name="movie" value="theFile.swf">
  [b]<p><a href="optional link to more portfolio images, if they exist"><img src="anImage.png" width="800" height="200" alt="Either what the image is showing, or if a link, where the link goes"></a></p>[/b]
</object>

Something like that is how the object element is supposed to work. You’re using an iframe but I’m still assuming that inside the iframe is still an <object> tag (or possibly an <embed> tag, which I dunno if those can have fallback children).

So, ideally this is something the browsers should do automagically for you, so long as you simply provide the image. This way, not just iThings but any other browser who happens to not have the Flash plugin will get an image.

And then, as in my example, if there’s something non-Flash you can link to that would be nice for folks.

Threads merged to avoid further confusion.

The second part was in an embed tag, after I switched it to object tag it worked, thanks guys!

arg, yes. I wondered how I could have missed ralph’s answers! But I noticed when I answered my thread, it had been sitting in Javascript forums for a long time. Prolly why the OP started another thread.

I would make it HTML5 if I were you so it works on all devices.

Ha ha, does HTML5 work in all devices? I think not … unless you provide JS support or whatever.

Feel free to post example, code. :slight_smile: