Can change a Flash .swf files z-index so that a javascript tooltip will appear in front of the Flash. swf file?

I am wrapping a .swf file insed this div tag:
<div id="listen_title" onmouseover="Tip('Listen')" onmouseout="UnTip()">
>>> .swf <<<
</div>

I am using this javascript tooltip:
http://www.walterzorn.com/tooltip/tooltip_e.htm

Problem is that the tooltip will not move in front of the .swf.  Is there any way to change the .swf z-index so the tooltip will appear in front?
tprofitsAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

remorinaCommented:
Hi tprofits,
When you hover over the div, you're actually hovering over the flash and it won't allow to fire the container's div onmouseover.

The best workaround is to make 2 layers, the lower one has the flash file, and the one above is a dummy div that has the same width & height of the one below, then set the javascript events to the one on top.

You also must set the flash parameter window mode to tansparent wmode="transparent"  if you need to send it to the background.

If you can attach an example, I can show you how to make it work

0
tprofitsAuthor Commented:
I am going to sleep.  I will upload an example when I wake up.
0
tprofitsAuthor Commented:
I uploaded this example:
http://www.benscustomtile.com/example/flash_rollover_error.php

This actually works correctly in Firefox.  But, incorrectly in IE, Safari, Chrome.
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

remorinaCommented:
Hi tprofits,
Try using the below structure instead and check how it goes

This is just the <table> portion of your table which contains the <div> and the flash
I've modified it to contain another div ontop of the one containing the flash with the script being called from this one instead of the one with the flash

Also I've set the flash wmode to transparent in order for this to work
<table>
        <tbody>
            <tr>
                <td rowspan="2" width="62">
                    <div style="position:relative">
                        <div  id="listen_title" onmouseover="Tip('Listen')" onmouseout="UnTip()" style="width:60px;height:72px;position:absolute;z-index:10;top:0;">
                            &nbsp;
                        </div>
                        <div style="width:60px;height:72px;position:absolute;z-index:1;top:0;">
                            <script language="javascript"> 
			if (AC_FL_RunContent == 0) { 
					alert("This page requires AC_RunActiveContent.js."); 
			} else { 
					AC_FL_RunContent( 
							'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0', 
							'width', '60', 
							'height', '72', 
							'src', 'AudioDemo_final', 
							'quality', 'high', 
							'pluginspage', 'http://www.macromedia.com/go/getflashplayer', 
							'align', 'middle', 
							'play', 'true', 
							'loop', 'true', 
							'scale', 'showall', 
							'wmode', 'transparent', 
							'devicefont', 'false', 
							'id', 'AudioDemo_final', 
							'bgcolor', '#999999', 
							'name', 'AudioDemo_final', 
							'menu', 'true', 
							'allowFullScreen', 'false', 
							'allowScriptAccess','sameDomain', 
							'movie', 'AudioDemo_final', 
							'salign', '', 
							'FlashVars', 'mp3File=http://www.benscustomtile.com/example/audio/test1.mp3'
							); //end AC code 
			} 
                        </script>

                        <embed src="flash_rollover_error.php_files/AudioDemo_final.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer"
                            play="true" loop="true" scale="showall" wmode="transparent" devicefont="false" bgcolor="#999999"
                            name="AudioDemo_final" menu="true" allowfullscreen="false" allowscriptaccess="sameDomain"
                            salign="" flashvars="mp3File=http://www.benscustomtile.com/example/audio/test1.mp3"
                            type="application/x-shockwave-flash" width="60" align="middle" height="72">  
	<noscript>
<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="60" height="72" id="AudioDemo_final" align="middle"> <param
name="allowScriptAccess" value="sameDomain" /> <param
name="allowFullScreen" value="false" /> <param name="movie"
value="AudioDemo_final.swf" /> <param name="quality" value="high" />
<param name="bgcolor" value="#999999" /><param name="wmode" value="transparent" /><param name="FlashVars"
value="mp3File=song1_A.mp3" /> <embed src="AudioDemo_final.swf"
quality="high" bgcolor="#999999" width="60" height="72"
name="AudioDemo_final" align="middle"
FlashVars="mp3File=http://www.benscustomtile.com/example/audio/test1.mp3"
allowScriptAccess="sameDomain" allowFullScreen="false"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object> </noscript>
                        </div>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>

Open in new window

0
tprofitsAuthor Commented:
OK.  I uploaded the changes at:
http://www.benscustomtile.com/example/flash_rollover_error.php

It seems the div is layered on top in Firefox, which might be preventing the .swf from being able to be clicked.  IE allows the user to 'click' the listen button, but the tooltip is not displayed.
0
remorinaCommented:
Ok then, try the below code, it's similar to the previous one, but just using the absolute positioning and z-index of the flash div and using the wmode="transparent" without having one on top

<table>
        <tbody>
            <tr>
                <td rowspan="2" width="62">
                    <div style="position:relative">
                        <div style="width:60px;height:72px;position:absolute;z-index:1;top:0;" id="listen_title" onmouseover="Tip('Listen')" onmouseout="UnTip()" >
                            <script language="javascript"> 
			if (AC_FL_RunContent == 0) { 
					alert("This page requires AC_RunActiveContent.js."); 
			} else { 
					AC_FL_RunContent( 
							'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0', 
							'width', '60', 
							'height', '72', 
							'src', 'AudioDemo_final', 
							'quality', 'high', 
							'pluginspage', 'http://www.macromedia.com/go/getflashplayer', 
							'align', 'middle', 
							'play', 'true', 
							'loop', 'true', 
							'scale', 'showall', 
							'wmode', 'transparent', 
							'devicefont', 'false', 
							'id', 'AudioDemo_final', 
							'bgcolor', '#999999', 
							'name', 'AudioDemo_final', 
							'menu', 'true', 
							'allowFullScreen', 'false', 
							'allowScriptAccess','sameDomain', 
							'movie', 'AudioDemo_final', 
							'salign', '', 
							'FlashVars', 'mp3File=http://www.benscustomtile.com/example/audio/test1.mp3'
							); //end AC code 
			} 
                        </script>

                        <embed src="flash_rollover_error.php_files/AudioDemo_final.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer"
                            play="true" loop="true" scale="showall" wmode="transparent" devicefont="false" bgcolor="#999999"
                            name="AudioDemo_final" menu="true" allowfullscreen="false" allowscriptaccess="sameDomain"
                            salign="" flashvars="mp3File=http://www.benscustomtile.com/example/audio/test1.mp3"
                            type="application/x-shockwave-flash" width="60" align="middle" height="72">  
	<noscript>
<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="60" height="72" id="AudioDemo_final" align="middle"> <param
name="allowScriptAccess" value="sameDomain" /> <param
name="allowFullScreen" value="false" /> <param name="movie"
value="AudioDemo_final.swf" /> <param name="quality" value="high" />
<param name="bgcolor" value="#999999" /><param name="wmode" value="transparent" /><param name="FlashVars"
value="mp3File=song1_A.mp3" /> <embed src="AudioDemo_final.swf"
quality="high" bgcolor="#999999" width="60" height="72"
name="AudioDemo_final" align="middle"
FlashVars="mp3File=http://www.benscustomtile.com/example/audio/test1.mp3"
allowScriptAccess="sameDomain" allowFullScreen="false"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object> </noscript>
                        </div>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
tprofitsAuthor Commented:
Wonderful!  Perfect!  Couldn't be happier!  Thanks!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.