0

I want my drop down menu to display over a flash. It's something like this .

What methods do you use to solve this problem? Any help will be appreciated much.

23
Contributors
30
Replies
32
Views
11 Years
Discussion Span
Last Post by keshavgarawal89
1

Adding the following parameter to your flash object:

<param name=wmode value="transparent">

should work for most browsers.

Votes + Comments
simple, understandable and very helpfull
0

You could also try absolute positioning of the menu using CSS.

Theoretically, items positioned with CSS are stacked on top of items that are not positioned with CSS.

0

:rolleyes:Flash menu? I dont quite understand what you mean, but i recommend you to try Sothink Tree Menu. They wrote flash programmes, aslo TreeMenu and DHTMLMenus. So i guess they are profetional in displaying drop down menu in a flash.

0

Adding the following parameter to your flash object:

<param name=wmode value="transparent">

should work for most browsers.

Will this also help me display and image on my page while my flah loads? If not, how can I achieve that? Thanks in advance.

0

I want my drop down menu to display over a flash. It's something like this .

What methods do you use to solve this problem? Any help will be appreciated much.

http://www.daniweb.com/techtalkforums/thread15188.html

hi

To edit an existing HTML page, add the WMODE parameters to the HTML code.

1. Add the following parameter to the OBJECT tag:

<param name="wmode" value="transparent">

2. Add the following parameter to the EMBED tag:

wmode="transparent"

:idea: :)

This Will Work With All Browsers

Rahul

http://www.katarey.com

0

http://www.daniweb.com/techtalkforums/thread15188.html

hi

To edit an existing HTML page, add the WMODE parameters to the HTML code.

1. Add the following parameter to the OBJECT tag:

<param name="wmode" value="transparent">

2. Add the following parameter to the EMBED tag:

wmode="transparent"

:idea: :)

This Will Work With All Browsers

Rahul

http://www.katarey.com

Thank you so much! I had just the first param tag in & it didn't work. Adding that line to the embed tag did it. I can't tell you how much I appreciate this. THANK YOU!!!

0

Thank you so much! I had just the first param tag in & it didn't work. Adding that line to the embed tag did it. I can't tell you how much I appreciate this. THANK YOU!!!

YUP YUP YUP... IT WORKS...

With few parameters, here is how the code looks like

<!-- CODE STARTS -->
<object width="834" height="300">
  <param name="movie" value="images/home_anim.swf">
  <param name="wmode" value="transparent">
  <embed src="images/home_anim.swf" wmode="transparent" width="834" height="300">
  </embed>
</object>
<!-- CODE ENDS -->

Thanks to everyone include flashass for their contribution :)

0

And remember, any method to get anything over a flash will not work when your page is opened under Unix or Linux. The flash plugin for Linux simple does not work correctly.

0

It works for me in Safari, Firefox, Camino and Chrome, but it won't work in Internet Explorer! I really need this to work in Explorer, not because I like it, but because I have to! Help please?

0

Ok, this is driving me insane.
Here is my code:

<html>
<head>
<title>Ocean Ridge - Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css"><script type="text/javascript" src="flashfix.js"></script>
<!--
body {
	background-image: url(images/ORSC_G_BKG.jpg);
	background-repeat: repeat-x;
	background-color: #D9EFEF;
}
body,td,th {
	font-family: Verdana;
	font-size: 11px;
	color: #FFF;
}
a {
	font-family: Verdana;
	font-size: 11px;
	color: #FFF;
}
a:visited {
	color: #CCC;
}
a:hover {
	color: #CCC;
}
a:active {
	color: #CCC;
}

ul.cssMenu ul{display:none}
ul.cssMenu li:hover>ul{display:block}
ul.cssMenu ul{position:absolute;left:0px;top:30px;}
ul.cssMenu ul ul{position:absolute;left:100%;top:0px;}
ul.cssMenu,ul.cssMenu ul {
	margin:0px;
	list-style:none;
	padding:0px 0px 0px 0px;
	background-image: url(images/drop.png);
	background-repeat:repeat;
	border-color:#808080;
	border-width:0px;
	}
ul.cssMenu table {border-collapse:collapse}ul.cssMenu {
	display:block;
	zoom:1;
	height:30px;
	float: left;
}
ul.cssMenu ul{
	width:200px;
}
ul.cssMenu li{
	display:block;
	margin:0px 0px 0px 0px;
	font-size:0px;
}
ul.cssMenu a:active, ul.cssMenu a:focus {
outline-style:none;
}
ul.cssMenu a, ul.cssMenu li.dis a:hover, ul.cssMenu li.sep a:hover {
	display:block;
	vertical-align:middle;
	horizontal-align:center;
	text-align:center;
	text-decoration:none;
	letter-spacing:1px;
	padding: 0px 0px 0px 0px;
	font:12px Verdana;
	color: #FFFFFF;
	text-decoration:none;
	cursor:default;
}
ul.cssMenu span{
	overflow:hidden;
}
ul.cssMenu li {
	float:left;
}
ul.cssMenu ul li {
	float:none;
}
ul.cssMenu ul a {
	text-align:left;
	white-space:nowrap;
}
ul.cssMenu li.sep{
	text-align:left;
	padding:10px;
	line-height:0;
	height:100%;
}
ul.cssMenu li.sep span{
	float:none;	
	padding-right:10px;
	width:15px;
	height:100%;
	display:inline-block;
	background-color:#808080;	background-image:none;}
ul.cssMenu ul li.sep span{
	width:100%;
	height:3px;
}
ul.cssMenu li:hover{
	position:relative;
}
ul.cssMenu li:hover>a{
	background-image: url(images/dropOver.png);
	font:12px Verdana;
	color: #FFFFFF;
	text-decoration:none;
}
ul.cssMenu li a:hover{
	position:relative;
	background-image: url(images/dropOver.png);
	font:12px Verdana;
	color: #FFFFFF;
	text-decoration:none;
}
ul.cssMenu li.dis a {
	color: #557D4F !important;
}
ul.cssMenu img {border: none;float:left;_float:none;margin-right:0px;width:23px;
height:23px;
}
ul.cssMenu ul img {width:23px;
height:23px; background-color:
}
ul.cssMenu img.over{display:none}
ul.cssMenu li.dis a:hover img.over{display:none !important}
ul.cssMenu li.dis a:hover img.def {display:inline !important}
ul.cssMenu li:hover > a img.def  {display:none}
ul.cssMenu li:hover > a img.over {display:inline}
ul.cssMenu a:hover img.over,ul.cssMenu a:hover ul img.def,ul.cssMenu a:hover a:hover ul img.def,ul.cssMenu a:hover a:hover a:hover ul img.def,ul.cssMenu a:hover a:hover img.over,ul.cssMenu a:hover a:hover a:hover img.over,ul.cssMenu a:hover a:hover a:hover a:hover img.over{display:inline}
ul.cssMenu a:hover img.def,ul.cssMenu a:hover ul img.over,ul.cssMenu a:hover a:hover ul img.over,ul.cssMenu a:hover a:hover a:hover ul img.over,ul.cssMenu a:hover a:hover img.def,ul.cssMenu a:hover a:hover a:hover img.def,ul.cssMenu a:hover a:hover a:hover a:hover img.def{display:none}
ul.cssMenu a:hover ul,ul.cssMenu a:hover a:hover ul,ul.cssMenu a:hover a:hover a:hover ul{display:block}
ul.cssMenu a:hover ul ul,ul.cssMenu a:hover a:hover ul ul{display:none}
ul.cssMenu span{
	display:block;
	background-image:url(./images/arrv_white.gif);
	background-position:right center;
	background-repeat: no-repeat;
   padding-right:0px;}
ul.cssMenu ul span{background-image:url(./images/arr_black.gif)}
ul.cssMenu ul li:hover > a span{	background-image:url(./images/arr_white.gif);}
ul.cssMenu table a:hover span,ul.cssMenu table a:hover a:hover span,ul.cssMenu table a:hover a:hover a:hover span{background-image:url(./images/arr_white.gif)}
ul.cssMenu table a:hover table span,ul.cssMenu table a:hover a:hover table span{background-image:url(./images/arr_black.gif)}
ul.cssMenu li.cssMenui0 {
width:150px;
height:22px; padding:0px; border:0px; background-color:#faa61a;
}
ul.cssMenu li a.cssMenui0{
height:100%;
background-image: url(images/btn2.jpg);
border-width:0px;
font:normal 12px Verdana;
color:#fff;
}
ul.cssMenu li a.cssMenui0:hover{
background-image: url(images/btn3.jpg);
font:normal 12px Verdana;
color:#eee;
}
 ul.cssMenum0 {
background-color: #F9A61A;
border-width:0px;
padding:0px 0px 0px 0px;
}
 ul.cssMenum0>li>a {
padding:8px 10px 0px 10px;
}
 ul.cssMenum0 a {
padding:5px 8px 8px 10px;
}
 ul.cssMenum0 ul a {
padding:5px 8px 8px 10px;
}
 ul.cssMenum0>li {
margin:0px 0px 0px 0px;
}
 ul.cssMenum0 li {
margin:0px 0px 0px 0px;
}
 ul.cssMenum0 li li {
margin:0px 0px 0px 0px;
}

body {
	background-color: #D9EFEF;
	background-image: url(images/ORSC_G_BKG.jpg);
	background-repeat: repeat-x;
}
-->
</style>
</head>
<body bgcolor="#D9EFEF" text="#FFFFFF" link="#FFFFFF" vlink="#CCCCCC" alink="#CCCCCC" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="padding-left:150px">
<!-- Save for Web Slices (ORSC_HM_1b.psd) -->
<table width="1008" height="731" border="0" cellpadding="0" cellspacing="0" id="Table_01">
	<tr>
		<td colspan="4" background="images/index_01.png" width="1008" height="48" align="bottom">
	  </td>
	</tr>
	<tr>
		<td rowspan="3" background="images/index_02.png" width="18" height="648" align="right">
	  </td>
		<td>
			<img src="images/index_03.png" width="486" height="143" alt=""></td>
		<td>
			<img src="images/index_04.png" width="486" height="143" alt=""></td>
		<td rowspan="3" background="images/index_05.png" width="18"align="left">
	  </td>
	</tr>
	<tr>
		<td colspan="2" height="30" width="972px" bgcolor="#faa61a" style="border:none; padding-left:52px; z-index:3000" valign="baseline"><ul class="cssMenu cssMenum0">
		    <li class=" cssMenui0"><a class="  cssMenui0" href="#"><span>LOCATION</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
		      <ul class="cssMenum">
		        <li class="cssMenui"><a class="cssMenui" href="#">ISLAND OVERVIEW</a></li>
		        <li class="cssMenui"><a class="cssMenui" href="#">GETTING HERE</a></li>
		        <li class="cssMenui"><a class="cssMenui" href="#">ATTRACTIONS</a></li>
	          </ul>
		      
	        <li class=" cssMenui0"><a class="  cssMenui0" href="#"><span>OWNERSHIP</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
	          <ul class=" cssMenum">
	            <li class=" cssMenui"><a class="  cssMenui" href="#">LOT DETAILS</a></li>
	            <li class=" cssMenui"><a class="  cssMenui" href="#">MARINA</a></li>
	            <li class=" cssMenui"><a class="  cssMenui" href="#">CONSTRUCTION</a></li>
	            <li class=" cssMenui"><a class="  cssMenui" href="#">RENTAL PROGRAM</a></li>
	            <li class=" cssMenui"><a class="  cssMenui" href="#">KAYU MAYA
	            <![if gt IE 6]>
	            </a>
	              <![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
	              <!--[if lte IE 6]></td></tr></table></a><![endif]-->
	              <!--[if lte IE 6]></td></tr></table></a><![endif]-->
	              <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                </li>
              </ul>
            <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
		    <li class=" cssMenui0"><a class="  cssMenui0" href="#">VACATION RENTAL</a></li>
		    <li class=" cssMenui0"><a class="  cssMenui0" href="#">IMAGE GALLERY</a></li>
		    <li class=" cssMenui0"><a class="  cssMenui0" href="#">ABOUT EDI</a></li>
		    <li class=" cssMenui0"><a class="  cssMenui0" href="#">CONTACT US</a></li>
</ul>
	  </td>
  </tr>
	<tr> 
		<td valign="top"><div style="z-index:-3000">
			<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="486" height="468">
<param name="allowScriptAccess" value="sameDomain" />
<param name=movie value="images/ORSC_HM_ANIM.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<embed src="images/ORSC_HM_ANIM.swf" type="application/x-shockwave-flash" quality="high" width="486" height="468" wmode="opaque" allowScriptAccess="sameDomain"></embed>
</object>
		</div></td>
	  <td background="images/index_08.png" align="left" valign="top" style="z-index:-30; background-position:bottom; background-repeat:no-repeat; background-color:#1fbdbe"><p><img src="images/ORSC_HM_Head.png" width="286" height="99" style="padding-left:70px; padding-top:100px">
	  </p>
	  <p style="padding-left:90px; line-height:20px">Own a piece of this one-of-a-kind paradise<br>
	    at Ocean Ridge on Staniel Cay. Only a few<br>
	    magnificent residential properties are located on<br>
	    this exceptional ridge. Owners enjoy sweeping<br>
	    views in every direction, their own pink sand<br>
	    beach, and a slip at the private marina. Staniel<br>
	    Cay is the perfect destination offering the ideal<br>
	    balance of unspoiled tropical beauty and easy<br>
	    access. A 3,000-foot runway accommodates<br>
      private planes, charters and daily air service.</p></td>
	</tr>
	<tr>
		<td colspan="4" background="images/index_09.png" width="1008" height="42" align="top">
	  </td>
	</tr>
</table><img src="images/ORSC_HM_Item.png" border="0" style="position:absolute; left:570px; top:480px; z-index:50; visibility: visible; overflow: hidden;">
<!-- End Save for Web Slices -->
<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
swfobject.registerObject("FlashID");
//-->
</script>
</body>
</html>

Every single browser shows it perfectly except for stupid Internet Explorer 8.
Here is the actual link: http://www.jbngraphics.com/OR/index.html

PLEASE TELL ME HOW TO DISPLAY THE CSS ON TOP OF THE FLASH WITH STUPID EXPLORER!!

0

Well, I have taken a quick look at it, and it seems to have a lot of errors in it. As expected, in Firefox 3 under Linux it doesn't work, and the menu is corrupted.

Under MS-Windows it works in Firefox (2 and 3) but it is a complete mess in Internet Explorer 6.

The web developer tools (add on) in Firefox gives the following warnings and errors:

Warning: Selector expected. Ruleset ignored due to bad selector.
Source File: http://www.jbngraphics.com/OR/index.html
Line: 5

Warning: Unknown property 'zoom'. Declaration dropped.
Source File: http://www.jbngraphics.com/OR/index.html
Line: 47

Warning: Unknown property 'horizontal-align'. Declaration dropped.
Source File: http://www.jbngraphics.com/OR/index.html
Line: 65

Warning: Error in parsing value for property 'display'. Declaration dropped.
Source File: http://www.jbngraphics.com/OR/index.html
Line: 99

Warning: Unknown property '_float'. Declaration dropped.
Source File: http://www.jbngraphics.com/OR/index.html
Line: 124

Warning: Expected color but found '}'. Error in parsing value for property 'background-color'. Declaration dropped.
Source File: http://www.jbngraphics.com/OR/index.html
Line: 130

Error: swfobject is not defined
Source File: http://www.jbngraphics.com/OR/index.html
Line: 277

Warning: Error in parsing value for property 'display'. Declaration dropped.
Source File: http://www.jbngraphics.com/OR/index.html
Line: 0

Don't have IE 8 installed here (why drive a 10 year old car when you can drive in a new one for free), but will look at it tomorrow (timezone GMT+1) at my work.

0

Heya guys and gals stumbled upon here with the same question and it was already answered so and extra thanks from newbie

0

A lot of thanks to teach me how to i use html drop down menu over flash movie clip thanks
i hope everytime u help me to this type of probleme

0

wmode did not work for me. The syntax given seemed wrong( /> not > to close the statement). I tried every possible permutation of the syntax.
What DID work was using css to create a class that gave the Flash object a z- index of 100 (or any number higher than the page containers and lower than the drop-down menu) The drop downs' usually have a z-index in the thousands so they're always on top. Flash seems to 'float' to the surface unless you pin it down.
So, if you're like me, and find this thread, but it doesn't help, try the css trick.

Edited by ravosavo: stuff

0

Why would anyone want a clickable link on top of a moving background? That seems like it would be very hard for the user to see or use.

This definitely does not meet the new requirements in some countries that websites be accessible to the disabled (including dyslexia). Your site may be blocked in such countries.

Edited by MidiMagic: n/a

0

Why would anyone want a clickable link on top of a moving background? That seems like it would be very hard for the user to see or use.

This definitely does not meet the new requirements in some countries that websites be accessible to the disabled (including dyslexia). Your site may be blocked in such countries.

It's OVER, not on top of. And the drop down might extend on the flash, temporarily when the menu is in use. Never seen that before?

0

It's OVER, not on top of. And the drop down might extend on the flash, temporarily when the menu is in use. Never seen that before?

Too many uses for the same word.

0

The reason you have to use wmode is to set the Window mode of the flash embed is because by default the flash window exists Above The Browser so absolutely nothing in the browser can overlap it. this is the problem you were having. This is the default mode, window.

Possible values: window, opaque, transparent.

  • window - movie plays in its own rectangular window on a web page. - Fastest performance for animation. no overlap possible
  • opaque - the movie hides everything on the page behind it. it hides it with the BG color of the embed. if you need to overlap the flash but don't need the flash to be see through use this as it is faster for animations
  • transparent - the background of the HTML page shows through all transparent portions of the movie. This allows for overlapping but will slow animation performance. In some cases quite significantly.

the methods mentioned above work to set window modes but consider using opaque instead of transparent if you don't need transparency, you'll get the same overlappable result with a slight performance boost.

0

Valid Flash example for XHTML 1.0 Strict (XHTML 1.1)

This code has been tested and works in Internet Explorer 8/7/6, Firefox 3.5/3/2, Opera 10/9 and Safari 4/3 and is fully XHTML Strict valid. No <embed> tags are required.

<object type="application/x-shockwave-flash" data="images/flash.swf" width="940" height="348">
<param name="movie" value="images/banner.swf" />
<img src="banner.gif" width="940" height="348" alt="banner" />
</object>

To position below menu add

<param name="wmode" value="transparent" />

at line 2

0

Adding the following parameter to your flash object:

<param name=wmode value="transparent">

should work for most browsers.

I had this same issue. My menu would be hidden behind the flash video, so I used the above param on the video and now my menu displays above the flash video. Give it a try

0

I am using the code however, there is a space above the flash now which was not there before I added the additional code... the design needs the design to sit exactly where it is meant to be or it looks funny... anyone know how to fix it?

0

Hello Guys,

It was wonderful help. One of my customer site was working good in IE & Mozilla bu not in Chrome. I was missing the wmode parameter in embed tag. It works now. Thanks for the info once again.

Regards
Rohit Gupta

Edited by Ezzaral: Snipped email. Please keep it on site.

0

its not working:
Here is my code :

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="550" 

height="400" id="flashvortex">
	<param name="allowScriptAccess" value="sameDomain" />
	<param name="allowFullScreen" value="false" />
	<param name="movie" value="flashvortex.swf">
	<param name="quality" value="high">
	<param name="wmode" value="transparent">
	<embed src="flashvortex.swf" quality="high" width="550" height="80" name="flashvortex" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" 

type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" wmode = "transparent"  style = "position : absolute; top : 45px; left : 20px;"/>
	
</object>
<script type = "text/javascript">
     AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0' ,'wmode','transparent');
</script>
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.