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
Docker Compose installation methods in different environments
1. Online installation Currently only tried the L...
Example of how to build a Harbor public repository with Docker
The previous blog post talked about the Registry ...
The difference between redundant and duplicate indexes in MySQL
MySQL allows you to create multiple indexes on a ...
Docker container operation instructions summary and detailed explanation
1. Create and run a container docker run -it --rm...
React component communication routing parameter transfer (react-router-dom)
Table of contents I've been learning React re...
Detailed tutorial on how to install mysql8.0 using Linux yum command
1. Do a good job of cleaning before installation ...
CSS overflow-wrap new property value anywhere usage
1. First, understand the overflow-wrap attribute ...
How to solve the mysql error 1033 Incorrect information in file: 'xxx.frm'
Problem Description 1. Database of the collection...
Vue uses canvas handwriting input to recognize Chinese
Effect picture: Preface: Recently, I was working ...
Graphic tutorial on installing the latest version of MySQL server on Windows 7 64 bit
Recently, I have been studying the MySQL database...
How to manage cached pages in Vue
Table of contents Problem 1: Destruction 1. How t...
Vue interpretation of responsive principle source code analysis
Table of contents initialization initState() init...
Detailed explanation of the usage of NULL and NOT NULL when creating tables in MySQL
Regarding some MySQL specifications, some compani...
Deployment and configuration of Apache service under Linux
Table of contents 1 The role of Apache 2 Apache I...
How to use libudev in Linux to get USB device VID and PID
In this article, we will use the libudev library ...