Float HTML elements over .swf file without triggering flash events.

Question

I was wondering if anyone has came up with a way to float html elements, with some content, over .swf without triggering any flash events.

In my case the problem is I have flash map, and drop down menu on top of it.

I simplified this into the following example:

http://f1vlad.com/etc/d.html

If you mouseover any elements in gray box, you will see that stuff behind it, in a flash file, triggers hover effects.

Answer 1

Have you tried adjusting the z-index of the HTML elements with CSS.

Try applying this to your HTML element: z-index: 1000;

Update: I have placed HTML elements over an .swf and had the area of the flash that is covered by the HTML not respond to click events. Is this essentially the same symptoms you want to correct?

try

display: block;

Answer 2

In Firefox 3.5, your page sort of works. When I mouseout of the floating box and on to Canada it will trigger the mouseover event for Canada. However, if I mouseover the floating box again the SWF doesn't receive the mouseout event so Canada stays highlighted. I assume you want to have Canada receive the mouseout event when this happens?

I would use ExternalInterface to have the floating box call methods in the SWF when the mouse enters and leaves the floating box. That way you can simulate the mouseleave event to reset the country highlight and popups, then when the mouse leaves the floating box you can check to see if the mouse is over a country and perform the mouseover event normally.