Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    May 2006
    Posts
    44
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Ebeded QuickTime Problem

    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

  • #2
    Senior Coder
    Join Date
    May 2005
    Posts
    2,137
    Thanks
    96
    Thanked 72 Times in 72 Posts
    Can you post a link to it or the coding?

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    The solution here was created for a java applet but should work for the quicktime video.
    http://www.oratransplant.nl/2007/10/...a-java-applet/
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #4
    New Coder
    Join Date
    May 2006
    Posts
    44
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry I am having trouble with that as I dont know where to put the code?

    link is www.toughguy.org.uk

    where would I put it?

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You are missing stuff. Remove what you added to your code and put this within the <head></head> part of your code
    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
    Code:
        <!-- 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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #6
    New Coder
    Join Date
    May 2006
    Posts
    44
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry maybe i'm missinng something but that makes 2 new boxes appear like the example and isnt working for me?

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Okay remove these.
    Code:
        <!-- 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
    Code:
        <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
    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>
    to this
    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);
          }
          function mouseOut() {
            var shimmer = document.getElementById('shimmer');
            document.body.removeChild(shimmer);
          }
        </script>
    Then add
    Code:
    onmouseover="mouseIn()" onmouseout="mouseOut()"
    to your drop down menu.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #8
    New Coder
    Join Date
    May 2006
    Posts
    44
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

    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>

  • #9
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You haven't made the changes on your live site yet. Please do so.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #10
    New Coder
    Join Date
    May 2006
    Posts
    44
    Thanks
    0
    Thanked 0 Times in 0 Posts
    uploaded now :P

  • #11
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Now where is the script? I don't see it on your page.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #12
    New Coder
    Join Date
    May 2006
    Posts
    44
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •