CODEWITHSUNDEEP
javascriptflash
Jennifer Vignone
Jennifer Vignone

Reputation:

javascript drop down menu and flash conflict

I've got a problem where the javascript drop down menu I've added to my html page either appears behind a flash image or it interferes with the thumb nails in my flash pic. The problem is different for different browsers and mac / PC.

Upvotes: 0

Views: 763

Answers (3)

Amr Elgarhy
Amr Elgarhy

Reputation: 68922

This a famous problem that flash always come to the top, you can solve that by givving your menu a high Z-Index value, and here is the example i have for solving the same problem:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Z-indexFlash</title>

</head>
<body bgcolor="#ffffff">
<div style="width:150px; height:150px;  margin-top:0px;   ">
<div style=" position:absolute;z-index:1; top:40px; text-align:center; width:150px; height:40px; color:#FFFFFF;  background-color:#0CF; font-size:16px;"><b>Text Over Flash</b></div>
<div style="position:relative; z-index:0;height:150px;">
    <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="100" height="150" id="Z-indexFlash" align="middle"><param name="allowScriptAccess" value="sameDomain" />
    <param name="allowFullScreen" value="false" />
    <param name="movie" value="Z-indexFlash.swf" />
    <param name="quality" value="high" />
    <param name="wmode" value="transparent" />
    <param name="bgcolor" value="#ffffff" />    
    <embed src="Z-indexFlash.swf" quality="high" wmode="transparent" bgcolor="#ffffff" width="100" height="150" name="Redsea_Interhous_Onrequest" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
    </object>
</div>
</div>
</body>
</html>

Upvotes: 1

Jonathan Fingland
Jonathan Fingland

Reputation: 57167

Use 

<embed ... wmode="transparent" ...>

and/or

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

for your embed/object containing the flash

Upvotes: 3

Jason
Jason

Reputation: 52523

have you tried playing w/your z-index? make the z-index of your menus higher than your flash and they should show up on top

#yourNav {
    z-index: 1000;
}

#yourFlashElement {
    z-index: 0;
}

Upvotes: 0

Related Questions