Layering Flash over Flash with DIVs is causing cursor to flicker...
BrettArchibald
over another SWF file, in two different DIV tags in my HTML.
I have used "z-index" to order my DIVs, and I have used "wmode=transparent"
etc. to view the one file under the other, and the 2 files together display in
all browsers just fine. That's not the problem. It looks and renders just great.
The problem I have is that when I hover my curser over a button in my top SWF
file, instead of just getting the usual arrow-to-hand cursor change, my cursor
flickers wildly between the two (and I have checked the button rollover state
in the Flash authoring app, and it's just fine). It's as if my cursor is
flickering between deciding whether to display the button rollover hand in the
top Flash layer or the standard arrow for the non-button area in the bottom
Flash layer.
Weirdly though, this behaviour is only happening in Safari on my Mac. When I
look at my test page in Firefox (for Mac), my cursor behaves just fine. When I
check it in both IE and Firefox for Windows, again my cursor works as expected.
It's just Safari.
Does anyone have a solution for this problem?
The thing is though, I cannot use one DIV and bring in the two SWFs through
one Flash 'container' movie. I have to use the two DIVs, because on some pages,
I need the content to scroll using the browser's standard/included scroll-bars,
but I need the top DIV to NOT scroll with it, but rather to stay still on the
screen using "position: fixed;".
My entire code is below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Title Here</title>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<style type="text/css">
<!--
body {
background-color: #005897;
}
-->
</style>
</head>
<body>
<div id="menu" style="position:fixed; z-index:2;">
<script type="text/javascript">
AC_FL_RunContent(
'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#
version=9,0,28,0','width','300','height','500','src','images/menu','quality','hi
gh','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_
Version=ShockwaveFlash','wmode','transparent','movie','images/menu' ); //end AC
code
</script><noscript><object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#ve
rsion=9,0,28,0" width="300" height="500">
<param name="movie" value="images/menu.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<embed src="images/menu.swf" width="300" height="500" quality="high"
pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Versio
n=ShockwaveFlash" type="application/x-shockwave-flash"
wmode="transparent"></embed>
</object>
</noscript>
</div>
<div id="backdrop" style="position:absolute; z-index:1;">
<script type="text/javascript">
AC_FL_RunContent(
'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#
version=9,0,28,0','width','800','height','600','src','images/home','quality','hi
gh','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_
Version=ShockwaveFlash','wmode','transparent','movie','images/home' ); //end AC
code
</script><noscript><object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#ve
rsion=9,0,28,0" width="800" height="600">
<param name="movie" value="images/home.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<embed src="images/home.swf" width="800" height="600" quality="high"
pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Versio
n=ShockwaveFlash" type="application/x-shockwave-flash"
wmode="transparent"></embed>
</object>
</noscript>
</div>
</body>
</html>
BrettArchibald
BrettArchibald
- *bump*
nejt...@gmail.com
I had a couple of ideas. One was to detect Safari in JS, pass a param
to the flash letting it know the agent was Safari, then hiding the
mouse on rollover and replacing it with an image of the Safari hand
cursor. Ridiculous? Yes! And not only that, it doesn't work! For
seemingly similar reasons - hiding the mouse on Safari when one flash
is over the other won't take - the mouse doesn't hide. Grrr.
I've tried putting layers in-between, assigning z-index to the embed
tag itself, etc. Nothing.
The good news is your talking less than 2% of the public - but when
your client is looking at everything on their Mac it doesn't matter...
and...@avagraphique.com
we have a site that has flash on the page, and if you load the flash
in a div above it, its like it cant decide which flash te mouse should
be active in...
help!