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?

[Webinar] Streamline your web hosting managementRegister Today

x
 
remorinaConnect With a Mentor Commented:
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
 
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
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
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
 
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
 
tprofitsAuthor Commented:
Wonderful!  Perfect!  Couldn't be happier!  Thanks!
0
All Courses

From novice to tech pro — start learning today.