Display an image in place of flash if browser has no flash support

Hello
How can i show an image instead of an empty space if a browser does not support any flash version, currently facing this problem with iphone....

I want the image to be loaded only if the browser in question does not have flash, and if for example am opening in firefox with flash support, then no image should be loaded, instead only the flash movie appears??

lordrt

Posting Whiz

385 posts since Jul 2010

Reputation Points: 30

Solved Threads: 33

1 Year Ago

You could try a free open-source javascript script called 'swfObject.js', which is a cross-platform, cross-browser compatible javascript file which can detect the type of browser being used and attempts to detect the version of flashplayer installed before generating appropriate, browser specific HTML to embed the .swf at runtime.

If no flashplayer is present, you can simply specify alternate content to use.

Check out the swfobject project page here:
http://code.google.com/p/swfobject/

With swfobject.js, you can: specify the .swf file to embed in the page
specify alternative content if no flashplayer is installed (i.e. the image you want to display!)
specify the minimum version of flashplayer required
pass flashvars, params, attributes to the target .swf.

It's a pretty robust script, it's used widely and it's got quite a large community of users and contributors/maintainers, so if you do get stuck you can always post a question on their forums.

There is also a downloadable tool which will help you to create the appropriate HTML/javascript code for your page (available as a dynamic HTML page or an Adobe AIR application). You just fill in the path/name of the swf to embed, set any of the other myriad of options and then click the 'generate' button to create some code which you can cut/paste into your HTML page.

If you download the latest version of the script and put a copy of it into the js folder of your website, then download and try the configuration tool to generate the appropriate code for your HTML page. You should be able to generate the code required for your web page in a couple of minutes.

It really is that simple!

Cheers for now,
Jas.

JasonHippy

Master Poster

772 posts since Jan 2009

Reputation Points: 590

Solved Threads: 125

1 Year Ago

thanks jason will give it a try, but is there no simpler way to do this, just in case I get confused with the swfobject...

lordrt

Posting Whiz

385 posts since Jul 2010

Reputation Points: 30

Solved Threads: 33

1 Year Ago

IMHO the swfobject script is the simplest and best way of embedding flash content in HTML pages.

Using swfObject will guarantee that all users of your website will be able to see something, even if it's the alternate content. The script runs when the page is viewed and can determine which type of browser is in use allowing the script to generate appropriate HTML embed tags for the users browser.

It also checks to see if flashplayer is installed and the version of flashplayer. If no flashplayer is detected, or the users installed version is too old, the script can display alternative content, or can be set up to redirect the user to a page where they can download a newer version of flashplayer.

Without swfobject, I think you can do it like 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" lang="en" xml:lang="en">
	<head>
		<title>page title</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	</head>
	<body>
		<div>
			<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="600" id="myFlashContent">
				<param name="movie" value="my_swf.swf" />
				<!--[if !IE]>-->
				<object type="application/x-shockwave-flash" data="my_swf.swf" width="800" height="600">
				<!--<![endif]-->
					Alternative content to go here, if no flashplayer is present
				<!--[if !IE]>-->
				</object>
				<!--<![endif]-->
			</object>
		</div>
	</body>
</html>

It's been a while since I've embedded any .swfs manually though, so for the code above, I just used the swfobject generator tool to create a statically published page and removed any reference to the swfobject script from the generated HTML. The remaining code should be more or less what you need.

The main caveat with doing it this way though, is that your page might not work properly on all browsers! Personally I'd use the swfobject script with a dynamically published page. It's really easy to use and really easy to configure. Especially if you use the swfobject generator tool which can generate appropriate code to embed your swf! If you use the generator tool to generate a dynamically published page, then you'll see the full benefits of using swfobject!

And you don't need to use the entire page generated by the tool either, you can cut/paste the most relevant parts and use them in your existing web pages.

Seriously, download the script and its associated generator tool and you will be off and running in literally minutes. It really is simple!

Cheers for now,
Jas.

JasonHippy

Master Poster

772 posts since Jan 2009

Reputation Points: 590

Solved Threads: 125

1 Year Ago

Just go through the tags and test with your swf and dummy images. Download the script attached here. Open dynamic html file in a editor (notepad, editplus or some other software). Replace your swf where you have the extension .swf with your file name. In alternative tag img src give the path of your dummy image. Thats it! You will not able to implement without going through the tags. There are very simple and minimal tags to embed the flash object. So go ahead! Almost JasonHappy explained it well. Lets download the attachment.

Attachments swfobject_2_2.zip (27.39KB)

rajarajan07

Nearly a Posting Virtuoso

1,447 posts since May 2008

Reputation Points: 167

Solved Threads: 239

1 Year Ago

thanks JasonHippy and rajarajan07, managed to test one page as you guys mentioned and it works well

lordrt

Posting Whiz

385 posts since Jul 2010

Reputation Points: 30

Solved Threads: 33

9 Months Ago

Hello!

Works great...except cannot get the transparency to work...any suggestions and insight would be great....I have tried many things with no luck...

Thanks for your time and expertise
Matt

<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
 <script type="text/javascript">
	var flashvars = {},
	params = {wmode:"transparent"},
	attributes = {};
        swfobject.embedSWF("flash/banner.swf", "flashcontent", "1054", "453", "9.0.0", flashvars, params, attributes);

 </script>   

//div Code//

<div id="flashcontent">

<img src="banner_images/image2.jpg" alt="" width="1054" height="453" />
         
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons  /get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>

</div>

mabron

Newbie Poster

1 post since Aug 2011

Reputation Points: 10

Solved Threads: 0

This question has already been solved

You