How to keep flash from obscuring HTML div elements

Time:2019-10-18

Today, when writing a flash advertisement code, because the link brought by flash is easy to be regarded as pop-up advertisement, a div layer is made on flash, so that the link triggered by a will not be blocked, but it is found that flash is always above the div layer, and the original flash needs to add a parameter.

The method of putting flash under the div layer makes flash not block the floating layer or the pull-down menu, and makes flash not block the floating object or the key parameters of the layer: wmode = opaque.

The method is as follows:

For ie, add the parameter < param name = “wmode” value = “opaque” / >
Add the parameter wmode = “opaque” in < embedded / > for FF

Developepaer 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. <a href=“http://i.am.cn/?s=jb51pic2” target=“_blank”><img src=“https://imgs.developpaper.com/imgs/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 height and width:
  3. width=“400” height=“400”  
  4. Set path:
  5. data=“style/flash/001.swf”Andvalue=“style/flash/001.swf”  
  6. Alternate text or alternate picture:
  7. <a href=“” title=“”><img src=“” alt=“” /></a>You can’t do this.
  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. <a href=“style/flash/001.swf”><img src=“style/img/001.jpg” alt=Flash animation /></a>  
  12. </object>  

Does not mask layer flash

XML/HTML CodeCopy content to clipboard
  1. <! — does not mask the flash of the layer
  2. Let flash not block the key properties of 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. <a 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 attributes 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. <a 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 variable: $WM, (optional) allows transparent flash content, absolute positioning, and hierarchical display in Internet Explorer 4.0. This tag / property is only valid in windows with the flash player ActiveX control.

Window uses the movie’s own rectangular window on the web page to play the application. Window indicates that this flash application has no interaction with the HTML layer and is always at the top level.
Opaque causes the application to hide everything on the page that follows it.
Transparent enables the background of an HTML page to be displayed through all transparent parts of the application, and may degrade animation performance.
Both opaque windowless and transparent windowless interact with the HTML layer, allowing the layer above the SWF file to obscure the application. The difference between the two options is that “transparent” allows transparency. Therefore, if a part of the SWF file is transparent, the HTML layer under the SWF file can be displayed through that part, while “opaque” will not be displayed.

If this property is ignored, the default value is window. Only for objects.

Recommended Today

Deeply analyze the principle and practice of RSA key

1、 Preface After experiencing many dark moments in life, when you read this article, you will regret and even be angry: why didn’t you write this article earlier?! Your darkest moments include: 1. Your project needs to be connected with the bank, and the other party needs you to provide an encryption certificate. You have […]