This is a message.

Loading flash on a mouse click

Many times it's good practice to defer loading of the Flash object until the user clicks on the Flash container. This makes the page load faster, especially if the Flash component is large. Here we have an example:

Click here to play movie

standalone demo

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, "/media/swf/global/flash10.swf");
}
</script>

HTML

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:

standalone demo

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");
  });
});

JavaScript