Tips for Flash not to block HTML div elements-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

Tips for Flash not to block HTML div elements

高洛峰

Feb 25, 2017 pm 01:58 PM

When I was writing a flash advertising code today, I found that the flash was always above the p layer, so I needed to make some settings. After searching, I found that there was no such content in Script Home. Here I will add for you Today when I was writing a flash advertising code, because the links that come with flash can easily be regarded as pop-up ads, I made a p layer and put it on top of the flash, so that the links triggered by a will not be blocked, but I found that the flash always It is above the p layer. It turns out that flash needs to add a parameter.

How to place flash under the p layer, so that flash does not block floating layers or drop-down menus, and so that Flash does not block floating objects or key parameters of layers: wmode=opaque.

The method is as follows:

For IE, add the parameter
For FF, add the parameter wmode="opaque" in

Script House usage code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>22cn</title>
<style type="text/css">
<!--   
body {    
position:relative;    
z-index:0;    
margin:0; padding:0   
}    
body,td,th {   
    color: #333333;   
}   
*{margin:0; padding:0}   
img{ border:0}   
#jb51{ position:relative; width:300px; height:250px}   
#p1 {   
position:absolute;   
left:0;   
top:0;   
width:300px;    
height:250px; z-index:-1    

}    
#p2 {    
position:absolute;   
left:0;   
top:0;   
width:300px;    
height:250px;    
z-index:99999;    
}    
-->
</style></head>
<body>
<p id="jb51">
<p id="p1">
<script type="text/javascript">
document.write(&#39;<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">&#39;);   
document.write(&#39;<param name="movie" value="http://common.jb51.net/image/22cn_jb51net.swf" />&#39;);   
document.write(&#39;<param name="quality" value="high" /><param name="wmode" value="opaque" />&#39;);   
document.write(&#39;<embed src="http://common.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>&#39;);   
document.write(&#39;</object>&#39;);   
</script>
</p>
<p id="p2">
<a href="http://i.am.cn/?s=jb51pic2" target="_blank"><img  src="/static/imghwm/default1.png"  data-src="http://common.jb51.net/image/touming.png"  class="lazy"      style="max-width:90%"  style="max-width:90%"/ alt="Tips for Flash not to block HTML div elements" ></a>
</p>
</p>
</body>
</html>

Standard Flash Insert

<!-- 标准的的Flash插入   
设置高度与宽度：   
width="400" height="400"
设置路径：   
data="style/flash/001.swf" 与 value="style/flash/001.swf"
替代文本或替代图片：   
<a href="" title=""><img src="/static/imghwm/default1.png"  data-src="" alt="  class="lazy"   alt="" /></a> 也可以不要这段   
-->
<object type="application/x-shockwave-flash" data="style/flash/001.swf" width="400" height="400">
<param name="movie" value="style/flash/001.swf" />
<a href="style/flash/001.swf"><img src="/static/imghwm/default1.png"  data-src="style/img/001.jpg"  class="lazy"   alt="Flash动画" /></a>
</object>

Flash that does not obscure the layer

<!-- 不会遮住层的Flash    
让Flash不档住浮动对象或层的关键属性：   
<param name="wmode" value="opaque" />
<embed wmode="opaque"></embed>
-->
<object type="application/x-shockwave-flash" data="style/flash/001.swf" width="400" height="400">
<param name="movie" value="style/flash/001.swf" />
<param name="wmode" value="opaque" />
<embed wmode="opaque"></embed>
<a href="style/flash/001.swf"><img src="/static/imghwm/default1.png"  data-src="style/img/001.jpg"  class="lazy"   alt="Flash动画" /></a>
</object>

Transparent Flash

<!-- 透明的Flash   
让Flash透明的关键属性：   
<param name="wmode" value="transparent">
-->
<object type="application/x-shockwave-flash" data="style/flash/001.swf" width="400" height="400">
<param name="movie" value="style/flash/001.swf" />
<param name="wmode" value="transparent">
<a href="style/flash/001.swf"><img src="/static/imghwm/default1.png"  data-src="style/img/001.jpg"  class="lazy"   alt="Flash动画" /></a>
</object>

wmode attribute/parameter value Window | Opaque | Transparent
Template variable: $WM, (optional) allows the use of transparent Flash content, absolute positioning and hierarchical display functions in Internet Explorer 4.0 . This tag/property is only valid on Windows with the Flash Player ActiveX control.

"Window" uses the movie's own rectangular window to play the application 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 all content behind it on the page.
"Transparent" causes the background of the HTML page to show through any transparent parts of the application and may reduce animation performance.
"Opaque windowless" and "Transparent windowless" both interact with HTML layers, allowing the layer above the SWF file to obscure the application. The difference between the two options is that "Transparent" allows transparency, so if a part of the SWF file is transparent, the HTML layer underneath the SWF file will show through that part, while "opaque" will not show it. .

If this property is omitted, the default value is Window. Applies to object only.

For more related articles on Flash not blocking HTML div elements, please pay attention to the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update?Mar 04, 2025 pm 12:32 PM

The official account web page update cache, this thing is simple and simple, and it is complicated enough to drink a pot of it. You worked hard to update the official account article, but the user still opened the old version. Who can bear the taste? In this article, let’s take a look at the twists and turns behind this and how to solve this problem gracefully. After reading it, you can easily deal with various caching problems, allowing your users to always experience the freshest content. Let’s talk about the basics first. To put it bluntly, in order to improve access speed, the browser or server stores some static resources (such as pictures, CSS, JS) or page content. Next time you access it, you can directly retrieve it from the cache without having to download it again, and it is naturally fast. But this thing is also a double-edged sword. The new version is online,

How to efficiently add stroke effects to PNG images on web pages?Mar 04, 2025 pm 02:39 PM

This article demonstrates efficient PNG border addition to webpages using CSS. It argues that CSS offers superior performance compared to JavaScript or libraries, detailing how to adjust border width, style, and color for subtle or prominent effect

How do I use HTML5 form validation attributes to validate user input?Mar 17, 2025 pm 12:27 PM

The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.

What are the best practices for cross-browser compatibility in HTML5?Mar 17, 2025 pm 12:20 PM

Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.

What is the purpose of the <datalist> element?Mar 21, 2025 pm 12:33 PM

The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

What is the purpose of the <meter> element?Mar 21, 2025 pm 12:35 PM

The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex

What is the purpose of the <progress> element?Mar 21, 2025 pm 12:34 PM

The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati

How do I use the HTML5 <time> element to represent dates and times semantically?Mar 12, 2025 pm 04:05 PM

This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit

See all articles