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

Question

I am looking for a solution to my problem, I have a website that I created for a client that has a flash header image, the only problem is that he turned to the site project on his iPhone and the fact that he did not display the head image was postponed, because it was an iPhone (which, as we know, is not happy!). In addition, I still need the visitor to start or disable the flash (I provided the usual link "install flash" when the flash is not displayed).

Is there a way to do this using only HTML / CSS or will I have to use JS or something similar?

I tried adding tags, but that does nothing.

Here is my code if this helps someone :).

<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 div_ title_box.

Thank you for your answers in advance, I looked at the site, but could not find the html answer to this question. If js is the only way to simply link to the answer on this site or a tutorial on how to do this, all I need.

Thanks.

Answer 1

If you include a 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 . Its essence is as follows:

 <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 is a bit outdated. The best solution is to use a tag and insert your alternative content inside the contents of the object, for example:

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

Another way is to use the generated flash script to detect the player, although first you need to understand it a bit.