17

Are there any ways providing an alternate GIF/PNG image, in case the user has no Adobe Flash installed and/or deactivated. I’ve found recommendations, like the following from W3C, which determine via JavaScript the existence of Adobe Flash on the client: W3C Providing alternative images

Honestly, I would prefer a non JS technique. I’m thinking of some XHTML tag, equivalent to <noscript>. (like <noobject> if the object (in our case Flash) can’t be displayed/loaded).

The reason for needing this separation is the following: The bank I’m working for will preferably display their banners in Flash format. In case it isn’t possible a simple image should be shown. In the past it was solved very likely in the way mentioned before. We’re currently working on a design refresh and that’s where I stumbled upon this piece of code which makes me wonder if it’s really the most elegant and compatible way of doing so.

Another idea that strikes me: Is it actually possible to load Flash-objects in a JavaScript disabled environment?

1
  • 1
    Since your "another idea" is dominating the discussion, how about editing your question to pose this as the main idea? The answers are very useful, but hard to find with the current title and tags.
    – bzlm
    Feb 19, 2009 at 13:25

6 Answers 6

13

Actually having flash installed but javascript turned off is a valid scenario. This should work across most browsers:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="600" id="flashContent">
  <param name="movie" value="flash.swf" />
  <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="flash.swf" width="800" height="600">
  <!--<![endif]-->
      <img src="(...)" alt="Put your alternate content here" />
  <!--[if !IE]>-->
    </object>
  <!--<![endif]-->
</object>
5
  • if in my example the javascript is turned off, then the script does not run, and for that does not replace the image, and ... you will see the image ! :) so: same thing at the end ;)
    – balexandre
    Jan 16, 2009 at 9:04
  • that is way I do love SWFObjects library ;) runs everywhere perfectly
    – balexandre
    Jan 16, 2009 at 9:05
  • Since when do other browsers do anything with conditional comments? That is not part of any w3c spec I've seen.
    – cdeszaq
    Jan 16, 2009 at 17:03
  • well, in my opinion it doesn't matter if all non-IE browser will ignore the [if !IE] tag. they'll do exactly what the command tells us: interpret the second object tag. only IE will skip the tag. Jan 19, 2009 at 13:22
  • 1
    The conditional comments are only for IE. That's the whole point.
    – bzlm
    Feb 19, 2009 at 13:24
5

I use the following code for graceful degradation. It works well.

<!--[if !IE]> -->
<object type="application/x-shockwave-flash" data="flash.swf" width="500" height="100">
<!-- <![endif]-->

<!--[if IE]>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
    codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" 
    width="500" height="100">
  <param name="movie" value="flash.swf" />
<!--><!--dgx-->
  <param name="loop" value="false">
  <param name="menu" value="false">
  <param name="quality" value="high">
  <img src="flash_replacement.png" width="500" height="100" alt="No Flash">
</object>
<!-- <![endif]-->
4

I don't know why you want to avoid javascript, it is the best solution when dealing with Flash.

using the SWFObjects Library (the best known so far for the matter) you can do this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
 <title> My Home Page </title> 
 <meta name="viewport" content="width=780"> 
 <script type="text/javascript" src="swfobject.js"></script> 
</head> 
<body> 
 <div id="splashintro"> 
   <a href="more.html"><img src="splash_noflash.png" /></a> 
 </div>
 <script type="text/javascript"> 
   var so = new SWFObject("csplash.swf", "my_intro", "300", "240", "8", "#338899"); 
   so.write("splashintro"); 
 </script> 
 </body> 
</html>

what the script does is replace the splashintro div with the flash file, if the browser does not support Flash, then does nothing and the splash_noflash.png will be shown.

P.S. With this technique you are ready for the iPhone, instead of showing the blue cube, it will show the image :)

4
  • 2
    Some people allow Flash, but have Javascript turned off. Why depend on Javascript when you can have the best of both worlds?
    – Raithlin
    Jan 16, 2009 at 16:51
  • 1
    And still others turn both off because they don't have enough bandwidth or don't like scripts running without their knowledge.
    – cdeszaq
    Jan 16, 2009 at 17:02
  • thx for pointing me to the SWF Object Library. one up vote for this. though i didn't choose it as the perfect answer as the usage of the JS library isn't necessary in my particular case. Jan 19, 2009 at 13:10
  • there is some changes with swfobject 2.0 : code.google.com/p/swfobject/wiki/documentation Jun 14, 2010 at 12:37
2

I find using inline styling to do the trick.

For example:

<div style="background-image: url('...');">
    <object>
     /* Embedded Flash */
    </object>
</div>
1
  • only problem with this is that you cannot have links or anything else, very limited just having a static background. No links, tables, ajax or other areas .. but for a quick fix and a alternate... I suppose.. the other issue is that you have just the object tag.. poor. Oct 18, 2011 at 12:23
2

We can provide an alternate GIF/PNG image, in case the user has no Adobe Flash installed and/or deactivated.

<object id="flashcontent classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="550px" height="400px">
<param name="movie" value="mymovie.swf" />

<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="mymovie.swf" width="550px" height="400px">
<!--<![endif]-->

<p>
Fallback or 'alternate' content goes here.
This content will only be visible if the SWF fails to load.
</p>

<!--[if !IE]>-->
</object>
<!--<![endif]-->

</object>

And also add this...

<script type="text/javascript">
swfobject.registerObject("flashcontent", "9", "/path/to/expressinstall.swf");   
</script>
0

I have written an easy way to do this in CSS - no extra JavaScript at all.

Name your ID/Class where your Flash movie resides and use a background image. Wrap your Flash movie within that div.

For example:

<div ID="MyFlashMovie"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="600" id="flashContent">
  <param name="movie" value="flashMovie.swf" />... etc., etc.</object>
</div> etc.

Then in your CSS:

#MyFlashMovie {
background: url("alternateGraphic.png");
background-repeat: no-repeat;
height: XXpx;
width: XXpx;
}

When the Flash isn't available, say on the iphone/pad, the graphic will display. The only drawback with this, that I have found, is that if your Flash movie uses a transparent background, you will see the alt graphic through the transitions. Just make a solid color within the Flash movie as your lowest layer (make sure it's the same bg color as the website) and it will look fine.

~GreaseJunkie

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.