Having trouble with show hide layers in dreamweaver 8

Discussion in 'Web Design and Development' started by will2009, Jan 1, 2009.

  1. will2009 macrumors newbie

    Joined:
    Jan 1, 2009
    #1
    Hi...I'm building my personal web page that features a portfolio. I have set up a series of thumbs which I have use behaviors (onclick) to show and hide a larger image when click. In my browser it work on some but not on others. If I reopen the page it will works on the first one clicked but then stop on others...is this just the browser or will it do this when site is uploaded? I'm fairly new at dreamweaver but welcome any help with this problem. Thanks in advance for all help...!
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    Need to see the code, preferably a link to see it in action. Otherwise, all I can supply are guesses. Also let us know what browsers you have been trying with and are having trouble with.
     
  3. will2009 thread starter macrumors newbie

    Joined:
    Jan 1, 2009
    #3
    Thanks for the reply. I have tried the page in IE, firefox, and safari and netscape. The page overall looks great, but as I click on the thumbnails, only one or two of the onclick larger image layers show. If I go to my home page and back to my portfolio page, it is refreshed and a any of the thumbnails I click on show up but only two or three then nothing. The site has not been posted so I have no link. I can upload code here if that helps...thanks again.
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    Yes, post the code. Make sure to use the HTML button on the editor (the one with <> on it) so it gets formatted for display.
     
  5. taylor148 macrumors newbie

    Joined:
    Jan 2, 2009
    #5
    Also having trouble: Please help!

    I'm also having some trouble with show-hide layers. I am creating a drop-down menu for my site and have been successful except for one thing. After adding in the behaviours (show and hide on mouseover) to the menu headings and going on the browser, when i mouseover the headings i put the behaviours on, the drop down part works but when i go to click on the object that drops down - it dissappears :( this may have been hard to follow but if you under stand...what am i doing wrong? If you don't fully understand, paste the html on to your dreamweaver. Please help me!


    <html>
    <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">
    <!--
    body,td,th {
    font-family: Verdana;
    font-size: 16px;
    color: #000000;
    }
    body {
    background-color: #2D3F14;
    }
    .style10 {font-family: Arial; font-size: 12px;}
    .style14 {font-family: Arial; font-weight: bold; }
    #MenuSub {
    position:absolute;
    width:100px;
    height:115px;
    z-index:1;
    top: 48px;
    left: 10px;
    visibility: hidden;
    }
    #ReservationsSub {
    position:absolute;
    width:135px;
    height:72px;
    z-index:2;
    left: 216px;
    top: 48px;
    visibility: hidden;
    }
    #Layer3 {
    position:absolute;
    width:123px;
    height:67px;
    z-index:3;
    left: 193px;
    top: 116px;
    }
    #Layer4 {
    position:absolute;
    width:775px;
    height:32px;
    z-index:3;
    left: 100px;
    top: 100px;
    }
    #Layer5 {
    position:absolute;
    width:125px;
    height:73px;
    z-index:4;
    left: 540px;
    top: 132px;
    }
    #Menus {
    position:absolute;
    width:100px;
    height:36px;
    z-index:5;
    left: 10px;
    top: 10px;
    }
    #Layer7 {
    position:absolute;
    width:100px;
    height:36px;
    z-index:6;
    left: 113px;
    top: 10px;
    }
    #Reservations {
    position:absolute;
    width:135px;
    height:32px;
    z-index:7;
    left: 216px;
    top: 10px;
    }
    a:link {
    color: #000000;
    text-decoration: none;
    }
    a:visited {
    text-decoration: none;
    color: #89BF40;
    }
    a:hover {
    text-decoration: none;
    color: #000000;
    }
    a:active {
    text-decoration: none;
    }
    .style18 {font-family: "Wingdings 3"; font-size: 12px; }
    -->
    </style>
    <script type="text/JavaScript">
    <!--

    function MM_findObj(n, d) { //v4.01
    var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
    if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];
    for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
    if(!x && d.getElementById) x=d.getElementById(n); return x;
    }

    function MM_showHideLayers() { //v6.0
    var i,p,v,obj,args=MM_showHideLayers.arguments;
    for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
    }
    //-->
    </script>
    </head>
    <body>
    <div id="Layer7">
    <table width="100" border="5" cellpadding="2" cellspacing="0" bordercolor="#7BAA39" bgcolor="#FFFFFF" id="Catering">
    <tr>
    <th class="style14" scope="col">Catering</th>
    </tr>
    </table>
    </div>
    <div id="MenuSub">
    <table width="100" height="20" border="5" cellpadding="2" cellspacing="0" bordercolor="#7BAA39" bgcolor="#CFE4B1">
    <tr>
    <td height="20" align="center" valign="top" scope="col"><div align="center" class="style10">Lunch Menu </div></td>
    </tr>
    <tr>
    <td height="20" align="center" valign="top"><div align="center" class="style10">Dinner Menu </div></td>
    </tr>
    <tr>
    <td height="20" align="center" valign="top"><div align="center" class="style10">Sushi Menu </div></td>
    </tr>
    <tr>
    <td height="20" align="center" valign="top"><div align="center" class="style10">Dessert Menu </div></td>
    </tr>
    <tr>
    <td height="20" align="center" valign="top"><div align="center" class="style10">Beverages</div></td>
    </tr>
    </table>
    </div>
    <div id="ReservationsSub">
    <table width="135" height="20" border="5" cellpadding="2" cellspacing="0" bordercolor="#7BAA39" bgcolor="#CFE4B1">
    <tr>
    <td width="181" height="20" align="center" valign="top" scope="col"><div align="center" class="style10">Small Group </div></td>
    </tr>
    <tr>
    <td height="20" align="center" valign="top"><div align="center" class="style10">7-10 Persons </div></td>
    </tr>
    <tr>
    <td height="20" align="center" valign="top"><div align="center" class="style10">VIP Room </div></td>
    </tr>
    </table>
    </div>
    <div id="Menus" onMouseOver="MM_showHideLayers('MenuSub','','show')" onMouseOut="MM_showHideLayers('MenuSub','','hide')">
    <table width="100" border="5" cellpadding="2" cellspacing="0" bordercolor="#7BAA39" bgcolor="#FFFFFF">
    <tr>
    <th class="style14" scope="col"><a href="menus.html">Menus <span class="style18" onMouseOver="MM_showHideLayers('MenuSub','','show')" onMouseOut="MM_showHideLayers('MenuSub','','hide')">q</span></a></th>
    </tr>
    </table>
    </div>
    <div id="Reservations" onMouseOver="MM_showHideLayers('ReservationsSub','','show')" onMouseOut="MM_showHideLayers('ReservationsSub','','hide')">
    <table width="135" border="5" cellpadding="2" cellspacing="0" bordercolor="#7BAA39" bgcolor="#FFFFFF">
    <tr>
    <th class="style14" scope="col">Reservations <a href="menus.html"><span class="style18" onMouseOver="MM_showHideLayers('ReservationsSub','','show')" onMouseOut="MM_showHideLayers('ReservationsSub','','hide')">q</span></a> </th>
    </tr>
    </table>
    </div>
    </body>
    </html>
     

Share This Page