Flash & DHTML Menus DEMO

I ran across an article that discussed an issue I had encountered many months before. The issue - How do you get DHTML menus to appear on top of a flash object. If you have never experienced this it is basically when you have a menuing system that uses drop down DIV’s (Dynamic HTML) made visible with mouse overs and/or mouse clicks to show sub categories and pages. The issue is the menuing system will not show above a flash animation if the menuing system and the flash overlap on the page (see the demo). I have complained about this forever. Any time a client wanted a flash animation on there site I explained it would have to be placed away from any menuing system we design. This was my patented answer.

After a little research (googling) I found an article on Community MX by Stephanie Sullivan discussing this very topic. I loved it. It is a must read for this topic. The link above and below this post are to an updated demo for the article by Stephanie Sullivan.

When you first bring up the link demo the ‘wmode’ of the flash animation is set to ‘window’ (default). As you mouse over the DHTML Trigger a DIV is brought up and you can see how it is covered (behind) the flash animation. To fix this the wmode needs to be set to ‘transparent’ or ‘opaque’. The transparent setting will allow any image you place behind the transparent portion of your flash animation to show through. The opaque mode sets the flash animations background to opaque so the image below the animation is not visible. Both the ‘transparent’ and ‘opaque’ modes allow the DHMTL DIV to show up above the flash animation.

You can change the mode by clicking one of the three boxes below the orbiting star flash animation. Click on the demo link and have some fun. If you have questions please post and I will try to answer them to the best of my knowlege.

And of course the idea for this post and demo were blatantly stolen from the internet.