...

View Full Version : Ebeded QuickTime Problem



columbo1977
05-26-2009, 11:11 PM
Hi

I have menus made with Fireworks and on the front page I have an embeded quicktime video and when I hover over the menu the dropdown appears behind the video?

Any ideas how I can get round this?

Cheers

Graham

masterofollies
05-26-2009, 11:22 PM
Can you post a link to it or the coding?

_Aerospace_Eng_
05-26-2009, 11:33 PM
The solution here was created for a java applet but should work for the quicktime video.
http://www.oratransplant.nl/2007/10/26/using-iframe-shim-to-partly-cover-a-java-applet/

columbo1977
05-27-2009, 01:18 AM
Sorry I am having trouble with that as I dont know where to put the code?

link is www.toughguy.org.uk (http://www.toughguy.org.uk)

where would I put it?

_Aerospace_Eng_
05-27-2009, 06:57 AM
You are missing stuff. Remove what you added to your code and put this within the <head></head> part of your code

<script type="text/javascript">
function mouseIn() {
// create an iframe at the exact same position and
// size as the sub div
// Google "iframe shime" for more information
var shimmer = document.createElement('iframe');
shimmer.id='shimmer';
shimmer.style.position='absolute';
// normally you would get the dimensions and
// positions of the sub div dynamically. For demo
// purposes this is hardcoded
shimmer.style.width='150px';
shimmer.style.height='80px';
shimmer.style.top='100px';
shimmer.style.left='80px';
shimmer.style.zIndex='999';
shimmer.setAttribute('frameborder','0');
shimmer.setAttribute('src','javascript:false;');
document.body.appendChild(shimmer);
// make sub div visible
var sd = document.getElementById('subdiv');
sd.style.visibility='visible';
}
function mouseOut() {
var sd = document.getElementById('subdiv');
sd.style.visibility='hidden';
var shimmer = document.getElementById('shimmer');
document.body.removeChild(shimmer);
}
</script>
<style type="text/css">
#maindiv {display:block; width:150px; height:80px;
background:red;}
#subdiv {display:block; width:150px; height:80px;
background:blue; position:absolute;
top:100px; left:80px;
z-index:1000; visibility:hidden;}
</style>
Then just before your quicktime video add this

<!-- top level div -->
<div id="maindiv" onmouseover="mouseIn();"
onmouseout="mouseOut();">
<p>MAIN DIV</p>
<p>move mouse here</p>
</div>
<!-- subdiv that gets shown when mouse hovers
over top level div -->
<div id="subdiv">
<p>SUB DIV</p>
</div>
The width and height for #maindiv and #subdiv should be equal to the width and height for your quicktime video.

columbo1977
05-27-2009, 08:47 AM
Sorry maybe i'm missinng something but that makes 2 new boxes appear like the example and isnt working for me?

_Aerospace_Eng_
05-27-2009, 07:44 PM
Okay remove these.

<!-- top level div -->
<div id="maindiv" onmouseover="mouseIn();"
onmouseout="mouseOut();">
<p>MAIN DIV</p>
<p>move mouse here</p>
</div>
<!-- subdiv that gets shown when mouse hovers
over top level div -->
<div id="subdiv">
<p>SUB DIV</p>
</div>
Remove this

<style type="text/css">
#maindiv {display:block; width:150px; height:80px;
background:red;}
#subdiv {display:block; width:150px; height:80px;
background:blue; position:absolute;
top:100px; left:80px;
z-index:1000; visibility:hidden;}
</style>
Change this

<script type="text/javascript">
function mouseIn() {
// create an iframe at the exact same position and
// size as the sub div
// Google "iframe shime" for more information
var shimmer = document.createElement('iframe');
shimmer.id='shimmer';
shimmer.style.position='absolute';
// normally you would get the dimensions and
// positions of the sub div dynamically. For demo
// purposes this is hardcoded
shimmer.style.width='150px';
shimmer.style.height='80px';
shimmer.style.top='100px';
shimmer.style.left='80px';
shimmer.style.zIndex='999';
shimmer.setAttribute('frameborder','0');
shimmer.setAttribute('src','javascript:false;');
document.body.appendChild(shimmer);
// make sub div visible
var sd = document.getElementById('subdiv');
sd.style.visibility='visible';
}
function mouseOut() {
var sd = document.getElementById('subdiv');
sd.style.visibility='hidden';
var shimmer = document.getElementById('shimmer');
document.body.removeChild(shimmer);
}
</script>

to this

<script type="text/javascript">
function mouseIn() {
// create an iframe at the exact same position and
// size as the sub div
// Google "iframe shime" for more information
var shimmer = document.createElement('iframe');
shimmer.id='shimmer';
shimmer.style.position='absolute';
// normally you would get the dimensions and
// positions of the sub div dynamically. For demo
// purposes this is hardcoded
shimmer.style.width='150px';
shimmer.style.height='80px';
shimmer.style.top='100px';
shimmer.style.left='80px';
shimmer.style.zIndex='999';
shimmer.setAttribute('frameborder','0');
shimmer.setAttribute('src','javascript:false;');
document.body.appendChild(shimmer);
}
function mouseOut() {
var shimmer = document.getElementById('shimmer');
document.body.removeChild(shimmer);
}
</script>

Then add
onmouseover="mouseIn()" onmouseout="mouseOut()"
to your drop down menu.

columbo1977
05-27-2009, 08:17 PM
Hi

I added the function at the top and then added the mouse in and out to my code for the drop down and it makes no difference here is my code.



<div id="FWTableContainer571048219" onmouseover="mouseIn()" onmouseout="mouseOut()">
<table border="0" cellpadding="0" cellspacing="0" width="110">
<!-- fwtable fwsrc="news.png" fwbase="news.gif" fwstyle="Dreamweaver" fwdocid = "571048219" fwnested="0" -->
<tr>
<td><img src="../navigation/spacer.gif" alt="" name="undefined_3" width="5" height="1" border="0" id="undefined_3" /></td>
<td><img src="../navigation/spacer.gif" alt="" name="undefined_3" width="101" height="1" border="0" id="undefined_3" /></td>
<td><img src="../navigation/spacer.gif" alt="" name="undefined_3" width="4" height="1" border="0" id="undefined_3" /></td>
<td><img src="../navigation/spacer.gif" alt="" name="undefined_3" width="1" height="1" border="0" id="undefined_3" /></td>
</tr>
<tr>
<td colspan="3"><img name="news_r1_c1" src="../navigation/news_r1_c1.gif" width="110" height="4" border="0" id="news_r1_c1" alt="" /></td>
<td><img src="../navigation/spacer.gif" alt="" name="undefined_3" width="1" height="4" border="0" id="undefined_3" /></td>
</tr>
<tr>
<td rowspan="2"><img name="news_r2_c1" src="../navigation/news_r2_c1.gif" width="5" height="26" border="0" id="news_r2_c1" alt="" /></td>
<td><a href="javascript:;" onmouseout="MM_menuStartTimeout(1000);" onmouseover="MM_menuShowMenu('MMMenuContainer0526200049_0', 'MMMenu0526200049_0',0,22,'news_r2_c2');"><img name="news_r2_c2" src="../navigation/news_r2_c2.gif" width="101" height="22" border="0" id="news_r2_c2" alt="" /></a></td>
<td rowspan="2"><img name="news_r2_c3" src="../navigation/news_r2_c3.gif" width="4" height="26" border="0" id="news_r2_c3" alt="" /></td>
<td><img src="../navigation/spacer.gif" alt="" name="undefined_3" width="1" height="22" border="0" id="undefined_3" /></td>
</tr>
<tr>
<td><img name="news_r3_c2" src="../navigation/news_r3_c2.gif" width="101" height="4" border="0" id="news_r3_c2" alt="" /></td>
<td><img src="../navigation/spacer.gif" alt="" name="undefined_3" width="1" height="4" border="0" id="undefined_3" /></td>
</tr>
</table>
<div id="MMMenuContainer0526200049_0">
<div id="MMMenu0526200049_0" onmouseout="MM_menuStartTimeout(1000);" onmouseover="MM_menuResetTimeout();"> <a href="javascript:;" id="MMMenu0526200049_0_Item_0" class="MMMIFVStyleMMMenu0526200049_0" onmouseover="MM_menuOverMenuItem('MMMenu0526200049_0');"> January&nbsp;2009 </a> <a href="javascript:;" id="MMMenu0526200049_0_Item_1" class="MMMIVStyleMMMenu0526200049_0" onmouseover="MM_menuOverMenuItem('MMMenu0526200049_0');"> Bewel&nbsp;Barrel&nbsp;09 </a> <a href="javascript:;" id="MMMenu0526200049_0_Item_2" class="MMMIVStyleMMMenu0526200049_0" onmouseover="MM_menuOverMenuItem('MMMenu0526200049_0');"> Doug&nbsp;-&nbsp;Everest </a> <a href="javascript:;" id="MMMenu0526200049_0_Item_3" class="MMMIVStyleMMMenu0526200049_0" onmouseover="MM_menuOverMenuItem('MMMenu0526200049_0');"> Top&nbsp;Team </a> <a href="javascript:;" id="MMMenu0526200049_0_Item_4" class="MMMIVStyleMMMenu0526200049_0" onmouseover="MM_menuOverMenuItem('MMMenu0526200049_0');"> Screwball&nbsp;Thug&nbsp;2009 </a> <a href="javascript:;" id="MMMenu0526200049_0_Item_5" class="MMMIVStyleMMMenu0526200049_0" onmouseover="MM_menuOverMenuItem('MMMenu0526200049_0');"> L.F.S.B </a> <a href="javascript:;" id="MMMenu0526200049_0_Item_6" class="MMMIVStyleMMMenu0526200049_0" onmouseover="MM_menuOverMenuItem('MMMenu0526200049_0');"> Harry&nbsp;Patch </a> <a href="javascript:;" id="MMMenu0526200049_0_Item_7" class="MMMIVStyleMMMenu0526200049_0" onmouseover="MM_menuOverMenuItem('MMMenu0526200049_0');"> Stairdiving </a> <a href="javascript:;" id="MMMenu0526200049_0_Item_8" class="MMMIVStyleMMMenu0526200049_0" onmouseover="MM_menuOverMenuItem('MMMenu0526200049_0');"> War&nbsp;to&nbsp;End&nbsp;all&nbsp;Wars </a> <a href="javascript:;" id="MMMenu0526200049_0_Item_9" class="MMMIVStyleMMMenu0526200049_0" onmouseover="MM_menuOverMenuItem('MMMenu0526200049_0');"> Marathons&nbsp;and&nbsp;Milking </a> <a href="javascript:;" id="MMMenu0526200049_0_Item_10" class="MMMIVStyleMMMenu0526200049_0" onmouseover="MM_menuOverMenuItem('MMMenu0526200049_0');"> Cows&nbsp;do&nbsp;it&nbsp;differently </a> </div>
</div>
</div>

_Aerospace_Eng_
05-27-2009, 09:21 PM
You haven't made the changes on your live site yet. Please do so.

columbo1977
05-27-2009, 10:41 PM
uploaded now :P

_Aerospace_Eng_
05-28-2009, 06:48 AM
Now where is the script? I don't see it on your page.

columbo1977
05-29-2009, 11:14 AM
I replaced the code but I have now changed the videos to wmv and they dont intefere with the menu's so will be going ahead with them.

thanks for trying though.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum