Articles :: Flash :: HTML over Flash

written by Toby Miller on September 21, 2007

September 21, 2007

All too often the question comes up about whether you can put HTML over Flash or not. The answer is yes you can and here is how.

How It Works

Create your Flash movie with the wmode parameter equal to transparent and the menu parameter equal to false. That's pretty much it. Here's a markup example using the SWFObject library and Mootools JavaScript syntax as well as a working example below it.

Markup Example

<div id="flashContainer"></div>
<script type="text/javascript">
/* <![CDATA[ */

window.addEvent('domready', function() {
	// Create the SWFObject
	var fo = new FlashObject('/flash/mymovie.swf', 'flashMovie', 300, 200, '8');
	fo.addParam('wmode', 'transparent');
	fo.addParam('menu', 'false');
	fo.addParam('quality', 'high');
	$('flashContainer').setHTML(fo.getSWFHTML());
});

/* ]]> */
</script>

Compatibility Chart

	Windows	Mac	Linux
IE 6+	Y	N/A	N/A
Firefox 1.5+	Y	Y	Y
Safari 2+	N/A	Y	N/A

Note: These are the only browsers that I currently consider worthy of my time.

Working Example

Hello there! Drag me around will ya?

This is a test link

permalink

   Natural Living (5)
      Heating & Cooling (1)
      Herbal Remedies (1)
   Personal (0)
      Family (1)
      Humor (11)
      Miscellaneous (1)
      Politics (5)
   Technology (2)
      System Administration (4)
            Linux (1)
            Solaris (0)
      Web Development (2)
            CSS (3)
            Design (1)
            Flash (1)
            JavaScript (11)
            PHP (1)
                        CakePHP (1)
            Web Browsers (2)
                        Firefox (1)
                        Internet Exploder (0)
                        Netscape (1)

printed @ tobymiller.com