Flash animation improves website a lot, but unfortunately
Flash is not supported on iPhone and iPad. This tutorial will
guide you how to show an alternative image or alternative
content on iPhone and iPad where Flash is not supported.
We are going to use two DIVs. The first DIV contains the
alternative image, the second DIV includes the Flash animation.
By default, the first DIV is hidden, and the second DIV is
shown. We then use JavaScripts to detect the kind of web browser,
if it's iPhone, iPod or iPad, we will show the first DIV and
hide the second DIV.
The code is as following:
<div id="aleosoftimage" style="display:none">
<img src="flashmovie.gif">
</div>
<div id="aleosoftflash" style="display:block">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
width="540" height="140">
<param name="movie" value="flashmovie.swf"
/>
<param name="quality" value="high"
/>
<param name="allowScriptAccess" value="always"
/>
<param name="wmode" value="transparent"
/>
<embed src="flashmovie.swf"
quality="high"
type="application/x-shockwave-flash"
WMODE="transparent"
width="540"
height="140"
pluginspage="http://www.macromedia.com/go/getflashplayer"
allowScriptAccess="always" />
</object>
</div>
<script language="javascript">
if ((navigator.userAgent.match(/iPad/i) != null) || (navigator.userAgent.match(/iPhone/i)
!= null) || (navigator.userAgent.match(/iPod/i) != null))
{ document.getElementById("aleosoftimage").style.display
= "block"; document.getElementById("aleosoftflash").style.display
= "none"; }
</script>
There are two DIVs in the code. The first DIV <div
id="aleosoftimage" style="display:none">
contains the alternative image. By default, it's invisible.
The second DIV <div id="aleosoftflash"
style="display:block"> contains
the Flash movie.
The JavaScript is to detect the kind of web browsr, if it's
iPhone, iPod or iPad, it will show the first DIV aleosoftimage
and hide the second DIV aleosoftflash.
Below is an example. Try to view it from computer and your
iPhone or iPad.
