askapache — Sat, 10 Feb 2007 04:54:30 +0000

JeevesBond;214843 wrote: Nice one askapache! Which browsers does this work in?

If it's all of them: you know how to fix a bug even the owners of Flash don't. Sadly I expect that to just be IE7 for Windows.

Very aggravating for the rest of us.

This is a trick that I learned towards the end of 05' for a site that I was developing. I'm obsessed with cross-browser functionality and I got the flash element to disappear behind other content by using the zIndex css attribute with javascript.

I had 5 elements to control, 5 divs that held various content, including flash video. By apsolutely positioning each of the 5 divs within 1 relative parent div I was able to manipulate the stacking order of the divs by applying a className.

.z6 {z-index:9119;}
.z0 {z-index:459;}
.z1 {z-index:449;}
.z2 {z-index:439;}
.z3 {z-index:429;}
.z4 {z-index:419;}

You can check out the final result at
myinmed org /products/business/health-savings-account/

From the official flash documentation:

Quote: wmode attribute/parameter
Value:
Window | Opaque | Transparent

Description:
(Optional) Lets you use the transparent Flash content, absolute positioning, and layering capabilities available in Internet Explorer 4.0. This attribute/parameter works only in Windows with the Flash Player ActiveX control.

Window plays the application in its own rectangular window on a web page. Window indicates that the Flash application has no interaction with HTML layers and is always the topmost item.

Opaque makes the application hide everything behind it on the page.

Transparent makes the background of the HTML page show through all the transparent portions of the application and can slow animation performance.

Opaque windowless and Transparent windowless both interact with HTML layers, letting layers above the SWF file block out the application. The difference between the two is that Transparent allows transparency so that HTML layers below the SWF file might show through if a section of the SWF file has transparency; opaque does not.

The default value is Window if this attribute is omitted. Applies to object only.

JeevesBond — Sat, 10 Feb 2007 04:19:16 +0000

Nice one askapache! Which browsers does this work in?

If it's all of them: you know how to fix a bug even the owners of Flash don't. Sadly I expect that to just be IE7 for Windows.

Very aggravating for the rest of us.

askapache — Fri, 09 Feb 2007 20:59:32 +0000

Oh and then if that doesn't immediately work than you need to change the z-index value of the elements by absolutely positioning them.

askapache — Fri, 09 Feb 2007 20:57:57 +0000

GlenJones;214799 wrote: Basically the "hover" buttons I've created using css, are placed under the flash animation clip. I can't come up with a good solution. Any ideas??

I used to have this problem all the time too! Very frustrating. I figured out that there is a parameter for embedding flash files that change the way the flash is displayed in the DOM..

Basically to get your site working change:

&lt;script type="text/javascript"&gt;
var so = new SWFObject("intro.swf", "flashcontent", "800", "290", "7", "#ffffff");
so.write("flashcontent");
&lt;/script&gt;

'
to

&lt;script type="text/javascript"&gt;
var so = new SWFObject("intro.swf", "flashcontent", "800", "290", "7", "#ffffff");
so.addParam("wmode", "transparent");
so.write("flashcontent");
&lt;/script&gt;

That should work..

JeevesBond — Fri, 09 Feb 2007 17:29:42 +0000

You need to move the Flash unfortunately. This has been a problem for Opera and Firefox users for years, somehow IE operated differently, but now seems to treat plugins the same way.

I noticed that you moved the animation, that's the best answer. I'm not a fan of those huge Flash animations anyway, they don't really add any value, just slow down peoples computers!