The setup

This is our HTML/JavaScript setup. You can find a standalone version here which includes the CSS settings for the container.

<!-- our flash container with some initial HTML inside it -->
<div id="flash">
	<h2>Click here to play movie</h2>
</div>
 
<script>
// get flash container and assign click handler for it
document.getElementById("flash").onclick = function() {
 
	// when being clicked -> load flash inside "this".
	flashembed(this, "http://jquerytools.org/media/swf/global/flash10.swf");
}
</script>

Same with jQuery

The above example uses traditional event binding using the onClick event listener. Some users don't like this because it allows you to bind only one event listener for the element. For this reason, we have a jQuery example of this same scenario:

We have set a background image for the container and the H2 title has been replaced with a play button.

// use the jQuery alternative for flashembed.domReady
$(function() {
  // bind an onClick event for this second Flash container
  $("#flash2").click(function() {
    // same as in previous example
    $(this).flashembed("/media/swf/global/flash10.swf");
  });
});