Oh nifty tricks for fixing FLASH over HTML... You ready????
(Yes, this will be added to Nifty-Tricks on the wiki.)
There's absolutely only 1 single solution to-date:
It deals with using an Iframe to "cover" the Flash section your over overlapping.
<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="680" height="350" id="slideshow" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="slideshow.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="wmode" value="transparent"></param>
<embed src="slideshow.swf" quality="high" bgcolor="#ffffff" width="680" height="350" name="slideshow" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
Here's the important part in the above Flash code:
<param name="wmode" value="transparent"></param>
Also, don't forget the <embed> tag also has
wmode="transparent".
Next, In my example below I have added an IFrame, and some Javascript.
<Iframe id="ifrmIE6Fix" name="ifrmIE6Fix" class="IE6Fixer" src="javascript:false;" frameborder="0" scrolling="no"></Iframe>
<img id="imgMenuA" src="A_Menu.gif" onmouseover="IE6_IframeCtrl('OVER', 'menuBoxA')" onmouseout="IE6_IframeCtrl('OUT', 'menuBoxA')" />
<div id="menuBoxA" style="display: none">
<div id="menuItem1">Item 1</div>
<div id="menuItem2">Item 2</div>
<div id="menuItem3">Item 3</div>
</div>
The below Javascript takes two arguments.
sDir = the direction of the popup (OVER[show] or OUT[hide])
sPopUpID = the object who's display you'd like to control.
function IE6_IframeCtrl(sDir, sPopUpID) {
var oIfrmElm = document.getElementById("ifrmIE6Fix");
var oChild= document.getElementById(sPopUpID);
if(sDir == 'OVER') {
//Show
if(oChild!=null){
oIfrmElm.style.left = oPopUp.offsetLeft + 'px';
oIfrmElm.style.top = (oPopUp.offsetTop + oChild.offsetTop) + 'px';
oIfrmElm.style.width = oChild.offsetWidth + 'px';
oIfrmElm.style.height = oChild.offsetHeight + 'px';
oIfrmElm.style.display = 'block';
}
} else {
//Hide
oIfrmElm.style.display = 'none';
}
}
Last but not least, give your "ifrmIE6Fix" a Z-Index of 7, and your pop_up menu item a Z-Index of 8+. (Note: Flash, being an <OBJECT> tag, doesn't follow conventional Z-Index rules, so you MUST set your Z-Index on the Iframe and menu option to be higher than 6.)
Here's why it works: The Iframe is the only control that's considered both a "windowed"
AND "window-less" control. Thus, it can respond to Z-Indexing based on the rules of each type. By using it as a "Flash Cover" (Flash is windowed), if can overlap Flash. However, it then i interpreted as a window-less control related to the overlapping DIV pop-up.
Yes, I know... very silly... but it WORKS!.
LAST NOTE: The above, on it's own probably won't work well, or look good... however, it should give you the first step in the correct direction.