Solve the problem that the Flash blocking layer uses Z-index invalid

Source: Internet
Author: User

In HTML, if you embed Flash, the default will be to put flash on top of the page. In other words, the use of absolute positioning, the z-index set of infinite height, any element in the page can not cover it. At this time, there are two ways to control the Flash Z-index

1, in the embedded flash, set the wmode parameters for flash opaque
2, in the embedded flash, set the wmode parameters for flash transparent

The corresponding IE and Firefox code is shown below,

See IE and FF add this parameter different way, so for processing a bit, this can be.

Key parameters to let flash not hold floating objects or layers: wmode=opaque

Method:

For IE in <object></object> with parameters <param name= "wmode" value= "opaque"/>
Add parameters to ff in <embed/> wmode= "opaque"


Method One:

The code for inserting flash into a Web page is as follows:

The code is as follows Copy Code

<object type= "Application/x-shockwave-flash" Data= "style/flash/001.swf" width= "400″height=" 400″> <param Name= "movie" value= "001.swf"/> <param name= "wmode" value= "opaque"/> <embed wmode= "opaque" ></embed > </object>

Where Param has a property named Wmode, just set it to opaque and make sure that the <embed wmode= "opaque" ></embed> is included.

Note: The code must contain 2, 3 lines in the code.


Method Two: Set the transparent flash

This method is to set the flash transparency to achieve the desired effect. The practice is to set the attribute named Wmode in the code above to transparent, which is code: <param name= "wmode" value= "Transparent" >

Reason:

There are several modes of flash embedding:


1, Windows (window)
Display mode by default. In this mode, Flash Player has its own window handle, which means that the Flash movie is a display instance that exists in Windows and is above the browser Core display window, so flash appears in the browser only. But it is also the fastest and most efficient rendering mode for Flash. Because he is a browser-independent HTML rendering surface, this results in the default display mode where Flash always hides all of the DHTML layers that coincide with him. But most Apple browsers allow the DHTML layer to show up on Flash, but when the Flash movie is played it can be a bit weird, like the DHTML layer showing an exception as if it were scraped off by Flash.

2, opaque windowless (opaque)

This is a windowless mode in which Flash Player does not have its own window handle, which requires the browser to tell Flash Player the time and place to draw on the browser's render surface. The Flash movie will not be above the browser's HTML rendering surface but on the same page as other elements, so you can use the Z-index value to control whether the DHTML element is masking flash or being obscured.
3, transparent windowless (transparent)


Transparent mode, in which Flash Player will stage the background color alpha value of 0 and will only draw objects that are actually visible on stage, and you can also use Z-index to control the depth value of the Flash movie. However, unlike the opaque mode, this reduces the playback effect of the Flash movie, and the Flash Player version set wmode= "opaque" or "transparent" before 9.0.115 causes Full-screen mode to fail.

These three modes represent the three forms of flash in the page, according to these three forms, we have found a way to solve this problem, that is, the flash mode (wmode) in the page is set to opaque windowless (opaque) or transparent windowless ( Transparent), in both modes, the flash in the page will be at the same level as the HTML structure, so you can control whether the overlapping part of the page is displayed on the top or the HTML structure by Z-index.

This method can be used when we need to load a pop-up flash ad in the page and don't want it to be obscured by other flash in the page. Similarly, if this pop-up flash is an irregular shape, you can set the mode (wmode) to transparent windowless (transparent) so that you can remove the background of the flash itself.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.