iPad Replace Flash With Image JavaScript Example
Do you just need a simple way to replace a Flash SWF with an image for the iPad, so you can avoid the anoing "no flash" "missing plugin"
Apple icon?
Code Example:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>iPad No Flash Replace With Image</title>
<script type='text/javascript' src='js/iOS.js'></script>
<style type="text/css">
<!--
a img {border:none;}
-->
</style>
</head>
<body>
<div id="swf">
<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="300" height="250">
<param name="movie" value="swf/ad.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="9.0.45.0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don't want users to see the prompt. -->
<param name="expressinstall" value="js/expressInstall.swf" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="swf/ad.swf" width="300" height="250">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="9.0.45.0" />
<param name="expressinstall" value="js/expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<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" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div><!-- /swf -->
<div id="no-swf"><a href="#"><img src="images/advertisement.jpg" width="300" height="250" alt="advertisement" /></a></div>
<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
//-->
</script>
</body>
</html>
Explanation:
To start off, I am using the most conventional way to mount the flash using DreamWeaver CS4 and I am not using the space in the "alternative content" space that is provided by the Flash script because it triggers the "missing plugin" icon. I have tucked away the JavaScript into a folder called "js" just to keep things tidy. The nuts and bolts of what is going on here is that am using a script to turn hide the div "<div id="swf">" if the JavaScript detects an iPad, then it reveals the div "<div id="no-swf">."
Just to start, I placed "a img {border:none;}" in the styles to prevent any border being drawn around the image for this example. Next take a look at "iOS.js" in the js folder.
if(navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i))
{document.write ('<style type="text/css"><!--#swf{display:none;}--></style>')
}
else
document.write('<style type="text/css"><!--#no-swf{display:none;}--></style><script src="js/swfobject_modified.js" type="text/javascript"></script>')
Note: If you want to use this script to detect iPad only simpley replace this line inside of "iOS.js" with this:
if(navigator.userAgent.match(/iPad/i))
See:
How To Hide URL On iPhone iPod
How To Make Java Script Detect For iPhone & iPod
How To Make Apple Touch Icon Favicon For iPhone iPod