How to ensure a DOM element triggers mouseover when it contains a Flash object

Question

I have a div that contains several child elements, one of which is a flash movie.

When rolling over this div, I want it to change style to indicate it is rolled over. My problem is that the mouseover and mouseout javascript events don't always trigger, especially if the user moves the mouse over the flash element too quickly.

Any suggestions for how I can ensure that a mouseover event always get triggered.

I can't add an event to the flash movie itself because it is proprietary code that I don't have the source for.

Also I can't cover the flash movie in a div/image because I need rollover and click events to occur within the flash itself.

Answer 1

What you could do is cover the flash element with an invisible div. Place your onmouseover handler on that div, and add a line to the handler to hide the covering div. At the same time, add an onmouseover function to the window - this should get triggered when the mouse leaves the flash element. (I hope).

1. There's a <div> covering your flash.
2. When the user mouses over it:
   1. It calls whatever function it needs to do.
   2. It hides itself, allowing normal interaction with the SWF.
   3. It places a mouseover function on the window which will:
      1. Show the original div again.
      2. Calls your "mouseout" function.
      3. Removes the window.onmouseover function.

Answer 2

The simple answer is you can't, given your constraints.

The complex answer you seem to know already. The flash movie runs in a sandbox that doesn't trigger regular DOM events. If you want to trigger mouse events in the flash, you can't cover it up with DOM elements. If you don't have access to the source of the flash movie, you can't build "bridges" to the JS world.

I think you have a no-win situation.

Answer 3

Change the wmode parameter of the object/embed tag to opaque.

Your code should look something like the following.

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia
.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="800" height="600">
    <param name="movie" value="movie.swf">
    <param name="wmode" value="opaque">
    <embed src="movie.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="800" height="600"></embed>
</object>

Answer 4

I have the same problem with pure javascript/dom. Im testing with MSIE6 and Firefox3. I've made script which simply changes the color of "A" elements in LIs in UL. And the mouseover/out events arent always trigger, which leaves some elements colored like hovered especialy if user moves the mouse out of them fast.