How to show an image if flash is disabled?

**satori83** · Sep 27, 2012 15:36

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?

**ralph.m** · Sep 27, 2012 16:18

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

Code:

<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>

**satori83** · Sep 27, 2012 16:52

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..

HTML Code:

<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

**ralph.m** · Sep 27, 2012 17:13

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.

**Stomme poes** · Sep 28, 2012 02:01

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

Code:

<object id="someFlashThing" type="application/x-shockwave-flash" width="800" height="200">
  <param name="movie" value="theFile.swf">
  <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>
</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.

**TechnoBear** · Sep 28, 2012 04:55

Threads merged to avoid further confusion.

**satori83** · Sep 28, 2012 10:09

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

**Stomme poes** · Oct 2, 2012 12:47

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.