[Development tips] Use Div to block flash and add link to flash (compatible with IE + Firefox, with all attributes of a link)

Source: Internet
Author: User
Tags transparent image

Problem description: a hotel reservation website that the company cooperates with requires advertisement on the page, but the other party gives a flash file and requires a link to its homepage. Directly add <a href =...> to the front of the Flash Object in HTML.

Solution Process:
The developer is not aware of this problem and writes it out.CodeAs follows:

 

1 < A Href = "Http://www.youiyou.net" >
2 < Object Classid = "CLSID: D27CDB6E-AE6D-11cf-96B8-444553540000" Codebase = "Http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" Width = "468" Height = "60" >
3 < Param Name = "Movie" Value = "**. SWF" >
4 < Param Name = "Quality" Value = "High" >
5 < Embed SRC = "*. SWF" Quality = "High" Pluginspage = "Http://www.macromedia.com/go/getflashplayer" Type = "Application/X-Shockwave-flash" Width = "468" Height = "60" > </ Embed >
6 </ Object >
7 </ A >

If you place the cursor on the top of the page, there is no effect. The reason is that flash will be placed on the top of the page by default. Some friends may have encountered a situation where the drop-down menu is blocked by flash.

The solution found on the Internet is to use a transparent large button package in the outermost layer of flash, or use a layer to cover flash, and then define the onclick event of the button, however, this method does not work normally in Firefox.
At the same time, the SEO function that users are most concerned about disappears, because it is not a normal link and is redirected using JavaScript.

1 < Button Style = "Width: 468; Height: 60; Background: transparent; Border: 0; padding: 0; cursor: hand" Onclick = "Window. Location. href = 'HTTP: // www.youiyou.net /'" >  
2 < Object Classid = "CLSID: D27CDB6E-AE6D-11cf-96B8-444553540000" Codebase = "Http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" Width = "468" Height = "60" >
3 < Param Name = "Movie" Value = "**. SWF" >
4 < Param Name = "Quality" Value = "High" >
5 < Embed SRC = "*. SWF" Wmode = "Transparent" Quality = "High" Pluginspage = "Http://www.macromedia.com/go/getflashplayer" Type = "Application/X-Shockwave-flash" Width = "468" Height = "60" > </ Embed >
6 < Param Name = "Wmode" Value = "Transparent" >
7 </ Object >
8 </ Button >

 

To have <a href...> the most perfect method for all native features of is to use a transparent <a href =...> link cover flash, and finally we use the following code to cover flash with a large transparent figure link.
Put flash in a layer with a zindex of-1, the wmode attribute is set at the same time (in the code, wmode = "Transparent" and <Param name = "wmode" value = "Transparent"> Work in Firefox and IE respectively ).
The masker layer is used to block the layer where the flash is located, and the margin-top layer uses positioning. Blank.gif is a transparent image. The effect is as follows,

Title, the mouse and hand are normal

1 < Div Style = "Z-index:-1" >
2 < Object Classid = "CLSID: D27CDB6E-AE6D-11cf-96B8-444553540000" Codebase = "Http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" Width = "468" Height = "60" >
3 < Param Name = "Movie" Value = "**. SWF" >
4 < Param Name = "Quality" Value = "High" >
5 < Embed SRC = "*. SWF" Wmode = "Transparent" Quality = "High" Pluginspage = "Http://www.macromedia.com/go/getflashplayer" Type = "Application/X-Shockwave-flash" Width = "468" Height = "60" > </ Embed >
6 < Param Name = "Wmode" Value = "Transparent" >
7 </ Object >
8 </ Div >
9 < Div ID = "Masker" Style = "Cursor: hand; margin-top:-60px; width: 468px; Height: 60px; Z-index: 1; visibility: visible ;" > < A Href = "Http: www.youiyou.net" > < IMG SRC = "Blank.gif" Width = "468" Height = "60" Border = "0"   /> </ A > </ Div > </ Div >
10

 

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.