miércoles, 19 de agosto de 2009

Javascript onclick for flash embeded objects

Technology: Javascript-Flash

Problem: I need to execute a javascript function when a flash embeded in a webpage is clicked. When you have a flash object embedded in a website, by default it handles the onclick event and you cannot handle with Javascript.

This is usually solved by programming the event on the flash object, but in this case I am not able to modify the object, because the user can upload new flash objects which I cannot control.

Solution:
1) Set the param wmode to transparent. This allows the object containing the flash to receive the javascript onclick.
2) Use onmousedown insted of onclick. In spite of using wmode transparent, some browsers still wont call the onclick, but they do call onmousedown.
The code looks like this:

<div onmousedown="clickBanner(1)">
<object>
<param name="movie" value="3.swf">
<param name="wmode" value="transparent" />
<embed wmode=transparent allowfullscreen="true" allowscriptaccess="always" src="3.swf"></embed>
</object>
</div>

Note that wmode has to be set in two different ways, because Firefox and IE have different syntax.

Tested on: IE 7, Firefox 3.5 and Chrome.