Alternative image when flash banner is not available USING HTML/CSS?

Question

i'm looking for a solution to my problem, I have a site I have created for a client which features a flash header image, the only problem is he accessed a draft of the site on his iPhone and was put off by the fact it didn't display any of the head image as it was an iPhone (which as we know are not flash happy!). Also, I would need this anyway incase the visitor has flash turned off or uninstalled (I have provided the usual 'install flash' link when flash isn't displayed).

Is there a way I can do this with just HTML/CSS or will I have to use JS or something similar?

I have tried adding tags but this does nothing.

Here is my code if this helps anyone :).

<div id="container">
<div id="header"><a href="index.html"><img src="images/logo.jpg" width="214" height="50" alt="Tom Frost - Personel Trainer in Leeds, West Yorkshire" style="border:none;"/></a></div>
<div id="navigation">
<ul id="nav">
<li><a href="index.html" id="index">Home</a></li>
<li><a href="about.html" id="menu-about">About</a></li>
<li><a href="services.html" id="menu-services">Services</a></li>
<li><a href="testimonials.html" id="menu-test">Testimonials</a></li>
<li><a href="/blog/" id="menu-blog">Blog</a></li>
<li><a href="articles.html" id="menu-articles">Articles</a></li>
<li><a href="contact.html" id="menu-contact">Contact</a></li>        
</ul>
</div>
<div id="title_box">
<embed src="images/flash.swf" 
quality="high" 
pluginspage="http://get.adobe.com/flashplayer/" 
type="application/x-shockwave-flash" 
width="960" height="450" 
alt="images/header.jpg">
</embed></div>`

Obviously my flash image is in the title_box div.

Thanks for your answers in advance, I had a look around the site but couldn't find a html answer to this. If js is the only way a simple link to the answer on this site or a tutorial on how to do it would be all I need.

Thanks.

Answer 1

If you include the flash image using the object tag instead of embed you can put fallback content inside the tags. Some cross browser markup is explained at http://www.alistapart.com/articles/flashsatay. The gist of it is:

<object type="application/x-shockwave-flash" 
        data="images/flash.swf" 
        width="450" height="960">
  <param name="movie" value="images/flash.swf" />
  <img src="images/header.jpg" />
</object>

Answer 2

You can use <noembed>..</noembed> although it's a bit deprecated. A better solution is to use the tag, and insert your alternative content inside the object's content, like so:

 <object>
     <param name="" value="" /> 
     <!-- more params... -->
     <img src="images/noflash.png" />
 </object>

Another way is to use the flash auto - generated script for player detection, although it requires understanding it a bit, first.