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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Roll Over Question

    Good Morning Everyone,

    My Angle: I'm having some difficulties with a rollover-drop down menu that I am creating for a website. I am using a table format with images at the top column of each row. These images are what I want to cause the menu to drop down. (Mouse-roll over the image, and the drop down menu appears, which is created by the table.)

    Problem: When viewing the preview of the website and placing the mouse anywhere over where the table is, (you obviously can't see the table from preview) the menu drops down and thats a big no no. I only want that menu to drop down when the mouse is over the image/button not the table.

    My Code:

    Code:
    <html>
    
    <head>
      <LINK REL="StyleSheet" HREF="menu.css">
      <script language="javascript" src="menu.js"></script>
    </head>
    
    <body>
    
      <table class="navbar" width="421" height="313">
        <tr>
          <td></td>
          <td class="menuNormal" width="79" onmouseover="expand(this);" 
          onmouseout="collapse(this);">
    			<img src="images/index2_06.jpg" width="79" height="45" alt="Products">
    			<p></p>
    <div class="menuNormal" width="94" style="width: 78px; height: 255px">
              <table class="menu" width="78">
       <tr><td class="menuNormal">
                  <tr><td class="menuNormal" align="center">
                  <span style="font-weight: 400">
    				<font size="4" face="DINEngschrift">
    				<a href="page.htm" class="menuitem">Building Material</a></font>
    				</span>
    </table>
            </div>
          </td>
        </tr>
      </table>
    
    </body>
    </html>
    Obviously I do have much more code than this but for your eyes' sake, the only show items here are: the image, and one item from the corresponding drop down menu. I hope I can get help from just this code. And yes I do have a javascript and css page saved.

    My Guess is right here:
    Code:
    <td class="menuNormal" width="79" onmouseover="expand(this);" 
          onmouseout="collapse(this);">
    Now should that td be changed to something else? Because td is the whole table/menu. When a mouse rollsover the invisible table on the webite the menu drops down when it shouldn't. I want the menu [which is created from the table] to only drop down if the mouse rolls over the image/button. Now shouldn't td be changed to the code that controls exclusively the image? I tried changing td to img but that makes everything run vertically on the left side.

    Hopefully I included everything here that can help you, help me. I'm assuming this would be a pretty easy fix for any experienced webmaster/coder. Thank you for your time even if you don't know the solution!!
    Last edited by dennbuild; 07-15-2008 at 06:05 PM. Reason: corrections

  • #2
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    this is in my opinion reall, not sure if others would agree. It seems there would be an easy solution for this, and that would be a nested list for a navigation system. I would avoid using tables at all cost. Read into this and see if it helps any.

    http://www.alistapart.com/articles/dropdowns

  • Users who have thanked jcdevelopment for this post:

    dennbuild (07-15-2008)

  • #3
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Well it's working just fine for me besides this little problem. My javascript code is incredably short and sweet and I don't understand what browser hacks they are talking about.

    I've spent a lot of time into this drop down menu already so please help me out.

    Here more info:

    HTML:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    
    <head>
      <LINK REL="StyleSheet" HREF="menu.css">
      <script language="javascript" src="menu.js"></script>
    </head>
    
    <body>
    
      <table class="navbar" width="421" height="338">
        <tr>
          <td class="menuNormal" width="79" onmouseover="expand(this);" 
          onmouseout="collapse(this);">
    			<img src="images/index2_06.jpg" width="79" height="45" alt="Products">
    			<p></p>
    <div class="menuNormal" width="94" style="width: 78px; height: 257px">
              <table class="menu" width="78">
       <tr><td class="menuNormal">
                  <tr><td class="menuNormal" align="center">
                  <span style="font-weight: 400">
    				<font size="4" face="DINEngschrift">
    				<a href="page.htm" class="menuitem">Building Material</a></font>
    				</span>
                <tr><td class="menuNormal" align="center">
                  <span style="font-weight: 400">
                  	<font size="4" face="DINEngschrift">
    				<a href="page.htm" class="menuitem">Decorating</a></font>
                	</span>
                </td></tr>
                <tr><td class="menuNormal" align="center">
                  <span style="font-weight: 400">
                  <font size="4" face="DINEngschrift">
    				<a href="page.htm" class="menuitem">Doors & Windows</a></font>
    				</span>
    				</td></tr>
                <tr><td class="menuNormal" align="center">
                  <span style="font-weight: 400">
    				<font size="4" face="DINEngschrift">
    				<a href="page.htm" class="menuitem">Hardware</a></font>
    				</span>
    				</td></tr>
                <tr><td class="menuNormal" align="center">
                  <span style="font-weight: 400">
    				<font size="4" face="DINEngschrift">
    				<a href="page.htm" class="menuitem">Lumber</a></font>
    				</span>
    				</td></tr>
                <tr><td class="menuNormal" align="center">
                  <span style="font-weight: 400">
    				<font size="4" face="DINEngschrift">
    				<a href="page.htm" class="menuitem">Plywood</a></font>
    				</span>
    				</td></tr>
                <tr><td class="menuNormal" align="center">
                  <span style="font-weight: 400">
    				<font size="4" face="DINEngschrift">
    				<a href="page.htm" class="menuitem">Roofing</a></font>
    				</span>
    				</td></tr>
                <tr><td class="menuNormal" align="center">
                  <span style="font-weight: 400">
    				<font size="4" face="DINEngschrift">
    				<a href="page.htm" class="menuitem">Siding</a></font>
    				</span>
    				</td></tr>
                <tr><td class="menuNormal" align="center">
                  <span style="font-weight: 400">
    				<font size="4" face="DINEngschrift">
    				<a href="page.htm" class="menuitem">Tools</a></font>
    				</span>
    				</td></tr>
              </table>
            </div>
          </td>
    
    
        <td class="menuNormal" width="94" onmouseover="expand(this);" 
          onmouseout="collapse(this);">
    			<img src="images/index2_07.jpg" width="94" height="45" alt="">
    			<p></p>
     		 <div class="menuNormal" width="94" style="width: 94px; height: 95px">
              <table class="menu" width="94">
                <tr><td class="menuNormal">
                  <tr><td class="menuNormal">
                  <font face="DINEngschrift"><span style="font-weight: 400">
                  <a href="page.htm" class="menuitem"><font size="4">Item 2</font></a><font size="4">
    				</font></span></font>
                <tr><td class="menuNormal">
                  <font face="DINEngschrift"><span style="font-weight: 400">
                  <a href="page.htm" class="menuitem"><font size="4">Item 2</font></a><font size="4">
    				</font></span></font>
                </td></tr>
                <tr><td class="menuNormal">
                  <font face="DINEngschrift"><span style="font-weight: 400">
                  <a href="page.htm" class="menuitem"><font size="4">Item 3</font></a><font size="4">
    				</font></span></font>
                </td></tr>
                <tr><td class="menuNormal">
                  <font face="DINEngschrift"><span style="font-weight: 400">
                  <a href="page.htm" class="menuitem"><font size="4">Item 4</font></a><font size="4">
    				</font></span></font>
                </td></tr>
              </table>
            </div>
          </td>
    
       <td class="menuNormal" width="97" onmouseover="expand(this);" 
          onmouseout="collapse(this);">
            <img src="images/index2_08.jpg" width="97" height="45" alt="">
            <p></p>
            <div class="menuNormal" width="97" style="width: 97px; height: 95px">
              <table class="menu" width="97">
              <tr><td class="menuNormal">
                  <tr><td class="menuNormal">
                  <font face="DINEngschrift"><span style="font-weight: 400">
                  <a href="page.htm" class="menuitem"><font size="4">Item 2</font></a><font size="4">
    				</font></span></font>
                <tr><td class="menuNormal">
                  <font face="DINEngschrift"><span style="font-weight: 400">
                  <a href="page.htm" class="menuitem"><font size="4">Item 2</font></a><font size="4">
    				</font></span></font>
                </td></tr>
                <tr><td class="menuNormal">
                  <font face="DINEngschrift"><span style="font-weight: 400">
                  <a href="page.htm" class="menuitem"><font size="4">Item 3</font></a><font size="4">
    				</font></span></font>
                </td></tr>
                <tr><td class="menuNormal">
                  <font face="DINEngschrift"><span style="font-weight: 400">
                  <a href="page.htm" class="menuitem"><font size="4">Item 4</font></a><font size="4">
    				</font></span></font>
                </td></tr>          
                </table>
            </div>
          </td>
    
       <td class="menuNormal" width="71" onmouseover="expand(this);" 
          onmouseout="collapse(this);">
    			<img src="images/index2_09.jpg" width="69" height="45" alt="">
    			<p></p>
            <div class="menuNormal" width="69" style="width: 71px; height: 98px">
              <table class="menu" width="69">
               <tr><td class="menuNormal">
                  <tr><td class="menuNormal">
                  <font face="DINEngschrift"><span style="font-weight: 400">
                  <a href="page.htm" class="menuitem"><font size="4">Item 2</font></a><font size="4">
    				</font></span></font>
                <tr><td class="menuNormal">
                  <font face="DINEngschrift"><span style="font-weight: 400">
                  <a href="page.htm" class="menuitem"><font size="4">Item 2</font></a><font size="4">
    				</font></span></font>
                </td></tr>
                <tr><td class="menuNormal">
                  <font face="DINEngschrift"><span style="font-weight: 400">
                  <a href="page.htm" class="menuitem"><font size="4">Item 3</font></a><font size="4">
    				</font></span></font>
                </td></tr>
                <tr><td class="menuNormal">
                  <font face="DINEngschrift"><span style="font-weight: 400">
                  <a href="page.htm" class="menuitem"><font size="4">Item 4</font></a><font size="4">
    				</font></span></font>
                </td></tr>
              </table>
            </div>
          </td>
          
       <td class="menuNormal" width="68" onmouseover="expand(this);" 
          onmouseout="collapse(this);">
    		<img src="images/index2_10.jpg" width="68" height="45" alt="">
    		<p></p>
            <div class="menuNormal" width="68" style="width: 68px; height: 95px">
              <table class="menu" width="68">
                <tr><td class="menuNormal">
                  <tr><td class="menuNormal">
                  <font face="DINEngschrift"><span style="font-weight: 400">
                  <a href="page.htm" class="menuitem"><font size="4">Item 2</font></a><font size="4">
    				</font></span></font>
                <tr><td class="menuNormal">
                  <font face="DINEngschrift"><span style="font-weight: 400">
                  <a href="page.htm" class="menuitem"><font size="4">Item 2</font></a><font size="4">
    				</font></span></font>
                </td></tr>
                <tr><td class="menuNormal">
                  <font face="DINEngschrift"><span style="font-weight: 400">
                  <a href="page.htm" class="menuitem"><font size="4">Item 3</font></a><font size="4">
    				</font></span></font>
                </td></tr>
                <tr><td class="menuNormal">
                  <font face="DINEngschrift"><span style="font-weight: 400">
                  <a href="page.htm" class="menuitem"><font size="4">Item 4</font></a><font size="4">
    				</font></span></font>
                </td></tr>
              </table>
            </div>
          </td>
        </tr>
      </table>
    
    </body>
    </html>
    CSS:
    Code:
    BODY
    {font-family: verdana, tahoma, arial, sans-serif;
    font-size: 10pt;
    margin: 0px;
    margin-left: 3px;
    margin-right: 3px;
    padding: 0px;}
    
    P
    {padding-top: 10px;
    margin: 0px;}
    
    H1
    {font-size: 12pt;
    font-weight: bold;
    padding-top: 15px;
    margin: 0;}
    
    table.navbar
    {font-size: 8pt;
    margin: 0px;
    padding: 0px; 
    border: 0px; 
    font-weight: bold;}
    
    table.menu
    {font-size: 8pt;
    margin: 0px;
    padding: 0px;
    font-weight: bold;}
    
    td.menuNormal
    {padding: 0px;
    color: black;
    font-weight: bold;
    vertical-align: top;
    background-color: white;}
    
    td.menuHover
    {padding: 0px;
    color: black;
    font-weight: bold;
    vertical-align: top;
    background-color: clear;}
    
    div.menuNormal
    {display: none;
    position: static;}
    
    div.menuHover
    {border: 1px solid black;
    background-color: clear;
    display: inline;
    position: absolute;}
    
    a.menuitem:link
    {text-decoration: none;
    color: black;
    background-color: white;
    display: block;}
    
    a.menuitem:visited
    {text-decoration: none;
    color: black;
    background-color: white;
    display: block;}
    
    a.menuitem:hover
    {text-decoration: none;
    color: orange;
    background-color: black;
    display: block;}
    
    a.menuitem:active
    {text-decoration: none;
    color: red;
    display: block;}
    JS:
    Code:
    function expand(s)
    {
      var td = s;
      var d = td.getElementsByTagName("div").item(0);
    
      td.className = "menuHover";
      d.className = "menuHover";
    }
    
    function collapse(s)
    {
      var td = s;
      var d = td.getElementsByTagName("div").item(0);
    
      td.className = "menuNormal";
      d.className = "menuNormal";
    }
    Last edited by dennbuild; 07-15-2008 at 06:21 PM. Reason: more info

  • #4
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Also the menu starts like 5 pixels below the image and I want the menu to be right under that image, is there a way to edit this?

  • #5
    Regular Coder
    Join Date
    Jul 2008
    Posts
    195
    Thanks
    3
    Thanked 11 Times in 11 Posts
    You may want to take a look at Dreamweaver CS3s Spry Assets if you can. Download a trial if you like. It can do all this and much more with very little setup with JavaScript and HTML tables.


  •  

    Posting Permissions

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