My website will have a logo on the header that will play as a flash movie (animated flash movie .swf). I am looking for code / algorithm that will display an image with the same dimensions as the flash movie if Flash is not installed or enabled for the current user accessing the site. How do I do this?

My website will have a logo on the header that will play as a flash movie (animated flash movie .swf). I am looking for code / algorithm that will display an image with the same dimensions as the flash movie if Flash is not installed or enabled for the current user accessing the site. How do I do this?

• javascript
• image
• flash

2 Answers 2

You can use general object fallback detection. The way this works is that anything the browser doesn't know how to render in the object tag, it will fall through to the content inside.

A clipped version of your code would look similar to this:

<object id="my-flash" src="movie.swf" width="800" height="600">
    <img src="fallback_image.jpg" width="800" height="600" />
</object>

Of course, you would need to wrap your actual Flash embed HTML around the image, but that's the idea.

I suggest using SWFObject for this. It works great, it will work cross-browser, and you can specify which version of Flash you are looking for (this could be key since there are some major differences). Check this tutorial on providing alternative content, which is exactly what you want to do.