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

Vue3 navigation bar component encapsulation implementation method

Encapsulate a navigation bar component in Vue3, a...

Analysis of Sysbench's benchmarking process for MySQL

Preface 1. Benchmarking is a type of performance ...

Detailed explanation of the pitfalls of nginx proxy socket.io service

Table of contents Nginx proxies two socket.io ser...

Alignment issue between input text box and img verification code (img is always one head higher than input)

In web page production, input and img are often pl...

Vue uses better-scroll to achieve horizontal scrolling method example

1. Implementation principle of scrolling The scro...

Solution to the problem of not being able to obtain the hostname of the host in the docker container

The test is passed in the nodejs environment. The...

JavaScript to achieve text expansion and collapse effect

The implementation of expanding and collapsing li...

MySQL join buffer principle

Table of contents 1. MySQL join buffer 2. JoinBuf...

How to deploy gitlab using Docker-compose

Docker-compose deploys gitlab 1. Install Docker I...

Solve the problem of IDEA configuring tomcat startup error

The following two errors were encountered when co...

Docker container monitoring principle and cAdvisor installation and usage instructions

It is very important to monitor the operating sta...

A brief analysis of MySQL backup and recovery

Table of contents 1. Introduction 2. Simple defin...

JavaScript Document Object Model DOM

Table of contents 1. JavaScript can change all HT...

Common naming rules for CSS classes and ids

Public name of the page: #wrapper - - The outer e...

MySQL database basic syntax and operation

MySQL database basic syntax DDL Operations Create...