drop down menu over flash

Show Comments

1

Adding the following parameter to your flash object:

<param name=wmode value="transparent">

should work for most browsers.

Lafinboy

Junior Poster

172 posts since Jul 2004

Reputation Points: 16

Solved Threads: 7

Skill Endorsements: 0

0

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

eihd

Newbie Poster

4 posts since Jul 2006

Reputation Points: 10

Solved Threads: 0

Skill Endorsements: 0

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.

FC Jamison

Posting Pro in Training

Team Colleague

446 posts since Jun 2004

Reputation Points: 92

Solved Threads: 21

Skill Endorsements: 0

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.

Sanguals

Newbie Poster

5 posts since Jul 2006

Reputation Points: 10

Solved Threads: 0

Skill Endorsements: 0

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.

havilah

Newbie Poster

20 posts since May 2006

Reputation Points: 10

Solved Threads: 0

Skill Endorsements: 0

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

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.

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

katarey

Junior Poster

167 posts since Jul 2005

Reputation Points: 39

Solved Threads: 23

Skill Endorsements: 0

5 Years Ago

0

Thanks a lot. It is working.

Manish

manishbhatra

Newbie Poster

2 posts since Jul 2007

Reputation Points: 10

Solved Threads: 0

Skill Endorsements: 0

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

flashlass

Newbie Poster

2 posts since Oct 2007

Reputation Points: 10

Solved Threads: 0

Skill Endorsements: 0

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

aviralmsharma

Newbie Poster

1 post since Nov 2007

Reputation Points: 10

Solved Threads: 0

Skill Endorsements: 0

0

Note that the embed tag is deprecated.

MidiMagic

Nearly a Senior Poster

3,363 posts since Jan 2007

Reputation Points: 730

Solved Threads: 184

Skill Endorsements: 1

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.

colweb

Posting Whiz

318 posts since Nov 2007

Reputation Points: 34

Solved Threads: 52

Skill Endorsements: 0

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?

samael696

Newbie Poster

2 posts since Sep 2009

Reputation Points: 10

Solved Threads: 0

Skill Endorsements: 0

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

samael696

Newbie Poster

2 posts since Sep 2009

Reputation Points: 10

Solved Threads: 0

Skill Endorsements: 0

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.

colweb

Posting Whiz

318 posts since Nov 2007

Reputation Points: 34

Solved Threads: 52

Skill Endorsements: 0

0

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

Synmedia

Newbie Poster

2 posts since Sep 2009

Reputation Points: 10

Solved Threads: 0

Skill Endorsements: 0

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

pravin_zd

Newbie Poster

1 post since Dec 2009

Reputation Points: 10

Solved Threads: 0

Skill Endorsements: 0

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.

ravosavo

Newbie Poster

2 posts since Dec 2009

Reputation Points: 10

Solved Threads: 0

Skill Endorsements: 0

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.

MidiMagic

Nearly a Senior Poster

3,363 posts since Jan 2007

Reputation Points: 730

Solved Threads: 184

Skill Endorsements: 1