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

A brief talk about JavaScript parasitic composition inheritance

Composition inheritance Combination inheritance i...

Use of docker system command set

Table of contents docker system df docker system ...

Detailed steps for using AES.js in Vue

Use of AES encryption Data transmission encryptio...

JavaScript uses promise to handle multiple repeated requests

1. Why write this article? You must have read a l...

Implementing countdown effect with javascript

Use Javascript to achieve the countdown effect, f...

Use CSS to implement special logos or graphics

1. Introduction Since pictures take up a lot of s...

js to implement collision detection

This article example shares the specific code of ...

Reasons and methods for Waiting for table metadata lock in MySQL

When MySQL performs DDL operations such as alter ...

Basic use of javascript array includes and reduce

Table of contents Preface Array.prototype.include...

How are Vue components parsed and rendered?

Preface This article will explain how Vue compone...

Five solutions to cross-browser problems (summary)

Brief review: Browser compatibility issues are of...

Detailed explanation of Nginx process scheduling problem

Nginx uses a fixed number of multi-process models...

How to manage docker through UI

Docker is being used in more and more scenarios. ...

js realizes horizontal and vertical sliders

Recently, when I was doing a practice project, I ...

js realizes packaging multiple pictures into zip

Table of contents 1. Import files 2. HTML page 3....