drop down menu over flash

Question

eihd 0 Newbie Poster

18 Years Ago

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.

web-design

23 Contributors
30 Replies
1K Views
4 Years Discussion Span
Latest Post 14 Years Ago Latest Post by keshavgarawal89

Lafinboy 4 Junior Poster

18 Years Ago

Adding the following parameter to your flash object:

<param name=wmode value="transparent">

should work for most browsers.

milanm commented: simple, understandable and very helpfull +0

FC Jamison 31 Posting Pro in Training

18 Years Ago

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.

katarey 27 Junior Poster

18 Years Ago

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:

2. Add the following parameter to the EMBED tag:

wmode="transparent"

:idea: :)

This Will Work With All Browsers

Rahul

http://www.katarey.com

MidiMagic 579 Nearly a Senior Poster

15 Years Ago

Note that the embed tag is deprecated.

colweb 13 Posting Whiz

15 Years Ago

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.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

eihd 0 Newbie Poster · Answer 1 · 2006-08-03T14:50:09+00:00

eihd 0 Newbie Poster

18 Years Ago

Thank you. I will give it a try:idea:

Sanguals 0 Newbie Poster · Answer 2 · 2006-08-08T14:30:24+00:00

: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.

havilah 0 Newbie Poster · Answer 3 · 2006-09-07T04:16:06+00:00

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.

manishbhatra 0 Newbie Poster · Answer 4 · 2007-07-06T19:21:30+00:00

manishbhatra 0 Newbie Poster

17 Years Ago

Thanks a lot. It is working.

Manish

flashlass 0 Newbie Poster · Answer 5 · 2008-10-10T22:34:21+00:00

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!!!

aviralmsharma 0 Newbie Poster · Answer 6 · 2008-12-18T16:39:39+00:00

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 :)

samael696 0 Newbie Poster · Answer 7 · 2009-09-21T19:27:15+00:00

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?

samael696 0 Newbie Poster · Answer 8 · 2009-09-21T22:31:21+00:00

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!!

colweb 13 Posting Whiz · Answer 9 · 2009-09-21T23:47:14+00:00

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.

Synmedia 0 Newbie Poster · Answer 10 · 2009-09-22T02:10:53+00:00

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

pravin_zd 0 Newbie Poster · Answer 11 · 2009-12-07T12:24:52+00:00

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

ravosavo 0 Newbie Poster · Answer 12 · 2010-01-01T05:22:47+00:00

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.

MidiMagic 579 Nearly a Senior Poster · Answer 13 · 2010-01-03T04:47:20+00:00

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.

ravosavo 0 Newbie Poster · Answer 14 · 2010-01-04T00:23:28+00:00

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?

MidiMagic 579 Nearly a Senior Poster · Answer 15 · 2010-01-13T18:50:11+00:00

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.

infinitymedia 0 Newbie Poster · Answer 16 · 2010-01-13T23:06:31+00:00

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.

generationx 0 Newbie Poster · Answer 17 · 2010-02-24T01:38:11+00:00

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

sammer021486 0 Newbie Poster · Answer 18 · 2010-02-25T00:11:08+00:00

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

vinnyisskinny 0 Newbie Poster · Answer 19 · 2010-07-06T17:41:58+00:00

I had the same problem, the embed worked! thanks!

sravanguyz 0 Newbie Poster · Answer 20 · 2010-08-10T11:20:18+00:00

I am very happy it solved my problem, which was in IE6 of drop down list

sravanguyz 0 Newbie Poster · Answer 21 · 2010-08-10T11:21:21+00:00

sravanguyz 0 Newbie Poster

14 Years Ago

Thanks a LOT

cgsales 0 Newbie Poster · Answer 22 · 2010-08-25T11:04:42+00:00

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?

TurtleRepublic 0 Newbie Poster · Answer 23 · 2010-08-31T13:20:33+00:00

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

keshavgarawal89 0 Newbie Poster · Answer 24 · 2010-09-30T08:16:42+00:00

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>