How to prevent Flash from covering HTML div elements

How to prevent Flash from covering HTML div elements
Today when I was writing a flash advertising code, because the links that come with flash can easily be mistaken for pop-up ads, I made a div layer and put it on top of the flash, so that the links are triggered by a and will not be intercepted. However, I found that flash has always been on the div layer. It turns out that flash needs to add a parameter.

The method to place flash under the DIV layer so that flash does not block the floating layer or drop-down menu, and the key parameter to prevent Flash from blocking the floating objects or layers is: wmode=opaque.

Here’s how:

For IE, add the parameter <param name="wmode" value="opaque" /> in <object></object>
For FF, add the parameter wmode="opaque" in <embed />

123WORDPRESS.COM Use code:

XML/HTML CodeCopy content to clipboard
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >   
  2. < html   xmlns = "http://www.w3.org/1999/xhtml" >   
  3. < head >   
  4. < meta   http-equiv = "Content-Type"   content = "text/html; charset=gb2312"   />   
  5. < title > 22cn </ title >   
  6. < style   type = "text/css" >   
  7. <!--
  8. body {
  9. position:relative;
  10. z-index:0;
  11. margin:0; padding:0
  12. }
  13. body,td,th {
  14. color: #333333;
  15. }
  16. *{margin:0; padding:0}
  17. img{ border:0}
  18. #jb51{ position:relative; width:300px; height:250px}
  19. #div1 {
  20. position:absolute;
  21. left:0;
  22. top:0;
  23. width:300px;
  24. height:250px; z-index:-1
  25.   
  26. }
  27. #div2 {
  28. position:absolute;
  29. left:0;
  30. top:0;
  31. width:300px;
  32. height:250px;
  33. z-index:99999;
  34. }
  35. -- >   
  36. </ style > </ head >   
  37. < body >   
  38. < div   id = "jb51" >   
  39. < div   id = "div1" >   
  40. < script   type = "text/javascript" >   
  41. document.write(' < 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 = "300"   height = "250" > ');
  42. document.write(' < param   name = "movie"   value = "http://img.jb51.net/image/22cn_jb51net.swf"   /> ');
  43. document.write(' < param   name = "quality"   value = "high"   /> < param   name = "wmode"   value = "opaque"   /> ');
  44. document.write(' < embed   src = "http://img.jb51.net/image/22cn_jb51net.swf"   quality = "high"   pluginspage = "http://www.macromedia.com/go/getflashplayer"   type = "application/x-shockwave-flash"   width = "300"   height = "250"   wmode = "opaque" > </ embed > ');
  45. document.write(' </ object > ');
  46. </ script >   
  47. </ div >   
  48. < div   id = "div2" >   
  49. <​   href = "http://i.am.cn/?s=jb51pic2"   target = "_blank" > < img   src = "http://img.jb51.net/image/touming.png"   width = "300"   height = "250" /> </ a >   
  50. </ div >   
  51. </ div >   
  52. </ body >   
  53. </ html >   
Standard Flash Insert

XML/HTML CodeCopy content to clipboard
  1. <!-- Standard Flash insert
  2. Set the height and width:
  3. width = "400"   height = "400"   
  4. Set the path:
  5. data = "style/flash/001.swf" and value = "style/flash/001.swf"   
  6. Alternative text or alternative image:
  7. <​   href = ""   title = "" > < img   src = ""   alt = ""   /> </ a > You can also omit this part
  8. -- >   
  9. < object   type = "application/x-shockwave-flash"   data = "style/flash/001.swf"   width = "400"   height = "400" >   
  10. < param   name = "movie"   value = "style/flash/001.swf"   />   
  11. <​   href = "style/flash/001.swf" > < img   src = "style/img/001.jpg"   alt = "Flash Animation"   /> </ a >   
  12. </ object >   
Flash that does not cover the layer

XML/HTML CodeCopy content to clipboard
  1. <!-- Flash that does not cover the layer
  2. Key properties to prevent Flash from blocking floating objects or layers:
  3. < param   name = "wmode"   value = "opaque"   />   
  4. < embed   wmode = "opaque" > </ embed >   
  5. -- >   
  6. < object   type = "application/x-shockwave-flash"   data = "style/flash/001.swf"   width = "400"   height = "400" >   
  7. < param   name = "movie"   value = "style/flash/001.swf"   />   
  8. < param   name = "wmode"   value = "opaque"   />   
  9. < embed   wmode = "opaque" > </ embed >   
  10. <​   href = "style/flash/001.swf" > < img   src = "style/img/001.jpg"   alt = "Flash Animation"   /> </ a >   
  11. </ object >   
Transparent Flash

XML/HTML CodeCopy content to clipboard
  1. <!-- Transparent Flash
  2. Key properties to make Flash transparent:
  3. < param   name = "wmode"   value = "transparent" >   
  4. -- >   
  5. < object   type = "application/x-shockwave-flash"   data = "style/flash/001.swf"   width = "400"   height = "400" >   
  6. < param   name = "movie"   value = "style/flash/001.swf"   />   
  7. < param   name = "wmode"   value = "transparent" >   
  8. <​   href = "style/flash/001.swf" > < img   src = "style/img/001.jpg"   alt = "Flash Animation"   /> </ a >   
  9. </ object >   
wmode Property/Parameter Value Window | Opaque | Transparent
Template variables: $WM, (optional) Enables the use of transparent Flash content, absolute positioning, and layered display features in Internet Explorer 4.0. This tag/attribute is only valid on Windows with the Flash Player ActiveX control.

"Window" plays the application in its own rectangular window on the Web page. "Window" indicates that this Flash application has no interaction with the HTML layer and is always on top.
"Opaque" causes the application to hide everything behind it on the page.
"Transparent" causes the background of the HTML page to show through any transparent parts of the application and may degrade animation performance.
Both "Opaque windowless" and "Transparent windowless" interact with HTML layers, allowing a layer above a SWF file to obscure the application. The difference between the two options is that "Transparent" allows transparency, so if a portion of the SWF file is transparent, the HTML layer below the SWF file can show through that portion, while "opaque" does not.

If this property is omitted, the default value is Window. Applicable only to object.

<<:  Some conclusions on developing mobile websites

>>:  CSS to achieve the like card effect in the lower right corner of the web page (example code)

Recommend

Detailed steps for deploying Tomcat server based on IDEA

Table of contents Introduction Step 1 Step 2: Cre...

A summary of detailed insights on how to import CSS

The development history of CSS will not be introd...

Example code for implementing equal width layout in multiple ways using CSS

The equal-width layout described in this article ...

Detailed explanation of tinyMCE usage and experience

Detailed explanation of tinyMCE usage initializat...

Detailed explanation of the implementation process of dual-master synchronization of partial tables in MySQL 5.7

Preface Recently, I encountered a requirement. Du...

JavaScript implements circular progress bar effect

This article example shares the specific code of ...

The homepage design best reflects the level of the web designer

In the many projects I have worked on, there is b...

MySQL 8.X installation tutorial under Windows

I had been using MySQL 5.7 before, but because My...

Detailed explanation of the processing of the three Docker Nginx Logs

Because colleagues in the company need Nginx log ...

Deep understanding of the mechanism of CSS background-blend-mode

This article is welcome to be shared and aggregat...

The corresponding attributes and usage of XHTML tags in CSS

When I first started designing web pages using XH...

Docker Swarm from deployment to basic operations

About Docker Swarm Docker Swarm consists of two p...

Nginx implements dynamic and static separation example explanation

In order to speed up the parsing of the website, ...

JavaScript flow control (loop)

Table of contents 1. for loop 2. Double for loop ...

In-depth explanation of Set and WeakSet collections in ES6

Table of contents Set is a special collection who...