Detailed example of HTML element blocking Flash
|
Copy code The code is as follows:wmode parameters: Transparent mode: You can use z-index to control the hierarchy Opaque mode: You can use z-index to control the hierarchy Window mode: Flash is layered above the core display window of the browser, and Flash will cover the HTML that overlaps with it. Scenario 1 (Wmode parameter of flash can be modified) The DEMO is as follows: Copy code The code is as follows:<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML elements blocking Flash - Scenario 1</title> <style> html, body, object, embed{ padding: 0; margin: 0; } .m-box { position: relative; }</p> <p> .m-flash, .m-flash embed { width: 400px; } .m-shadow { position: absolute; top: 0; left: 0; width: 100px; height: 100px; background-color: #ccc; } </style> </head> <body> <!--transparent--> <div class="m-box"> <object class="m-flash" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"> <param name="src" value="<a href="http://www.aa.net/i/bookmark.swf">http://www.aa.net/i/bookmark.swf</a>"> <param name="wmode" value="transparent"/> <embed wmode="transparent" src="<a href="http://www.aa.net/i/bookmark.swf"></embed">http://www.aa.net/i/bookmark.swf"></embed</a>> </object></p> <p> <div class="m-shadow"> Jununx, welcome! --transparent </div> </div></p> <p><!--opaque--> <div class="m-box"> <object class="m-flash" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"> <param name="src" value="<a href="http://www.aa.net/i/bookmark.swf">http://www.aa.net/i/bookmark.swf</a>"> <param name="wmode" value="opaque"/> <embed wmode="opaque" src="<a href="http://www.aa.net/i/bookmark.swf"></embed">http://www.aa.net/i/bookmark.swf"></embed</a>> </object></p> <p> <div class="m-shadow"> Jununx, welcome! --opaque </div> </div></p> <p></body> </html> Scenario 2 (flash wmode parameter cannot be modified) -- flash and your iframe mask are on the same page Note: If you want to be compatible with Safari and Opera, please tell them directly that this mask cannot be used. The DEMO is as follows: Copy code The code is as follows:<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML elements blocking Flash - Scenario 2</title> <style> html, body, object, embed{ padding: 0; margin: 0; } .m-box { position: relative; }</p> <p> .m-flash, .m-flash embed { width: 400px; } .m-flash { position: relative; z-index: 1; } .m-shadow { position: absolute; top: 0; left: 0; z-index: 2; width: 100px; height: 100px; background-color: #ccc; } .m-shadow-txt { position: absolute; z-index: 2; } .m-shadow-ifr { position: absolute; z-index: -1; width: 100%; height: 100%; opacity: 0; filter: alpha(opacity=0); } </style> </head> <body> <!--window--> <div class="m-box"> <object class="m-flash" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"> <param name="src" value="<a href="http://www.aa.net/i/bookmark.swf">http://www.aa.net/i/bookmark.swf</a>"> <param name="wmode" value="window"/> <embed wmode="window" src="<a href="http://www.aa.net/i/bookmark.swf"></embed">http://www.aa.net/i/bookmark.swf"></embed</a>> </object></p> <p> <div class="m-shadow"> <div class="m-shadow-txt">Jununx, welcome! --window</div> <iframe class="m-shadow-ifr" frameborder="0"></iframe> </div> </div></p> <p></body> </html> Scenario 3 (flash's wmode parameter cannot be modified) -- Flash is introduced by an iframe page Note: If you do not have permission to operate the iframe page, please directly tell the requester that this cannot be blocked Note: If you want to be compatible with Safari and Opera, please directly tell the requester that this cannot be blocked DEMO page: Copy code The code is as follows:<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML elements blocking Flash - Scenario 2</title> <style> html, body, object, embed{ padding: 0; margin: 0; } .m-box { position: relative; }</p> <p> .m-flash { position: relative; width: 400px; height: 400px; z-index: 1; } .m-shadow { position: absolute; top: 0; left: 0; z-index: 2; width: 100px; height: 100px; background-color: #ccc; } .m-shadow-txt { position: absolute; z-index: 2; } .m-shadow-ifr { position: absolute; z-index: -1; width: 100%; height: 100%; opacity: 0; filter: alpha(opacity=0); } </style> </head> <body> <!--window--> <div class="m-box"> <iframe class="m-flash" src="ifr.html" frameborder="0"></iframe></p> <p> <div class="m-shadow"> <div class="m-shadow-txt">Jununx, welcome! --window</div> <iframe class="m-shadow-ifr" frameborder="0"></iframe> </div> </div></p> <p></body> </html> Iframe page: Copy code The code is as follows:<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML elements blocking Flash - Scenario 3</title> <style> html, body, object, embed{ padding: 0; margin: 0; } .ifr { position: absolute; z-index: 2; width: 100px; height: 100px; opacity: 0; filter: alpha(opacity=0); } .m-flash { position: absolute; z-index: 1; width: 400px; } </style> </head> <body> <!--window--> <object class="m-flash" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"> <param name="src" value="<a href="http://www.aa.net/i/bookmark.swf">http://www.aa.net/i/bookmark.swf</a>"> <param name="wmode" value="window"/> <embed wmode="window" src="<a href="http://www.aa.cn/i/bookmark.swf"></embed">http://www.aa.cn/i/bookmark.swf"></embed</a>> </object></p> <p><iframe class="ifr" frameborder="0"></iframe> </body> </html> |
<<: Implementation code for using CSS text-emphasis to emphasize text
>>: Detailed explanation of group by and having in MySQL
Recommend
Summary of Linux ps and pstree command knowledge points
The ps command in Linux is the abbreviation of Pr...
Should I abandon JQuery?
Table of contents Preface What to use if not jQue...
Sample code for implementing history in vuex
I have recently been developing a visual operatio...
Example code for CSS pseudo-classes to modify input selection style
Note: This table is quoted from the W3School tuto...
A brief discussion on VUE uni-app custom components
1. Parent components can pass data to child compo...
Example of how to set WordPress pseudo-static in Nginx
Quoting Baidu's explanation of pseudo-static:...
This article summarizes the implementation methods of 6 load balancing technologies (summary)
Load balancing is a commonly used device in serve...
Additional instructions for using getters and actions in Vuex
Preliminary Notes 1.Differences between Vue2.x an...
Install tomcat and deploy the website under Linux (recommended)
Install jdk: Oracle official download https://www...
Three ways to configure JNDI data source in Tomcat
In my past work, the development server was gener...
How to connect a Linux virtual machine to WiFi
In life, the Internet is everywhere. We can play ...
Css3 realizes seamless scrolling and anti-shake
question The seamless scrolling of pictures and t...
Pitfalls and solutions for upgrading MySQL 5.7.23 in CentOS 7
Preface Recently, I found a pitfall in upgrading ...
Basic knowledge of MySQL database
Table of contents 1. Understanding Databases 1.1 ...
Detailed explanation of the configuration method of Vue request interceptor
Follow the steps below 1. request.js content: htt...