Recently i have had a few requests on how to insert images and Flash Banners into there HTML within there website, Not difficult i have to admit. Further this we discussed how to insert the code within the website along with best practices an optimizing certain images to increase web page load time and overall website speed.
A few comments happened to be mentioned which really surprised me and after creating a poll, running it for 8 weeks it turns out that 56% was actually favoring this comment. What was the comment? Well...
This question really surprised me as i found most people that i asked were under the impression that there is no xHTML Valid code to insert flash code upon there website, with this thought i began to wonder if there were more people believing this and by the poll that i run which was submitted as a question to many web designers, colleges and University's it appears that 56% believed that there was actually no way to insert Flash into there website while still validating there web sites against W3C. So for you 56% i have decided to explain and show you the xHTML code that you need to insert to use and validate Flash into your web sites. Before we begin you can check and validate your website by using the W3C markup validator.
Flash banners are animated files in Macromedia Flash format (Shockwave Flash Object .SWF). These files can be displayed in a website with a plugin. The Flash files, or Flash films too, offer many different kinds of animation with a small data file size. Below is an example of a banner i have created for the use with this website.
In XHTML the embed tag is not supported anymore and using it creates a non-valid, not DTD conform XHTML file. But using the object tag in Mozilla, Netscape & Co.? Yes, it works - with the data attribute and a few other modifications in the original example by Macromedia (the attributes classid and codebase, which other browsers but the IE do not explain correctly, are eliminated):
<object type="application/x-shockwave-flash" data="URL of your SWF File on Server.swf" width="468" height="60" id="xy">
<param name="movie" value="Name of your SWF File on Server.swf" />
<param name="loop" value="false" />
<param name="menu" value="false" />
<param name="scale" value="exactfit" />
<param name="quality" value="high" />
<param name="bgcolor" value="#FFFFFF" />
</object>
Banners in Flash format with ending .swf are a bit more difficult to include because the HTML code is a lot more complex and the browsers interpret it variably. Mozilla based browsers use the embed tag, on the other hand, the MS Internet Explorer prefers the object tag. But they offer on principle the option to adapt the background. Modify the values in BOTH bgcolor attributes! That´s because it is necessary to write a HTML construct which supports both browser types. For that purpose, you have to convolute the embed tag with the object tag, e.g.:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" width="468" height="60" id="myMovieName">
<param name="movie" value="URL of your SWF File on Server.swf">
<param name="quality" value="high">
<param name="bgcolor" value="#FFFFFF">
<embed src="URL of your SWF File on Server.swf" quality="high" bgcolor="#FFFFFF" width="468" height="60" name="Name of your SWF File on Server.swf" type="application/x-shockwave-flash" pluginspace="http://www.macromedia.com/go/getflashplayer">
</embed>
</object>
By using the first instance given, The modern way of inserting flash into your HTML you will be able to validate your web page as valid xHTML Strict while having a Flash banner on the web page. Hopefully this small resource will pass around and wake up the remaining 56% who are still using the Conventional flash code to insert into HTML.
Good look with your Web Designing!