Click on Jpg - Get Flash Video loading?

I've seen it on some sites where an image is displayed, then when you click on the image...it loads a flv video in it's place...how to do this?

Thanks guys

 

You can put your image inside a div, and then, using javascript, substitute the content of that div with the flv video code.

For example:

<div class="container">
<div class="first">Hello</div>
</div>

Using jQuery, you can replace the content of the div ".first" :

<script>
$(".first").click(function () {
$(this).replaceWith("Bye");
});
</script>

And it will change into:

<div class="container">
<div class="first">Bye</div>
</div>

 

Thanks but is pretty complex to put all in the ("...") section?

 

Sorry, what section?

 

This bit: $(this).replaceWith("Bye");


Instead of Bye I'd need to insert the row of flash code?

 

Yes, you could pass it through a variable:

var cont = '<object width="480" height="385">...</object>';
$(this).replaceWith(cont);

I'm sure there is a better way to do that, but I think it'll do the job.

 

Use SWFobject.

<script type="text/javascript">
function c(){
var so = new SWFObject('http://google.com/movie.swf','player','480','640','9');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.write('player');
}
</script>
<div id="player"><img src="img" alt="" id="pswf" onclick="c();" /></div>