Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

Layer probleempje

2 antwoorden
  • Een layer-probleempje: 1. (Basisgegevens) Ik heb het volgende script: [code:1:998a2838a3] <script language="JavaScript" type="text/JavaScript"> <!-- function nav() { var i,p,v,obj,args=nav.arguments; for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2]; if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; } obj.visibility=v; } } //--> </script> [/code:1:998a2838a3] Verder heb ik een aantal layers voor de navigatie: [code:1:998a2838a3] <!-- Navigatie: contact --> <div id="navcontact" style="left:67px; top:85px; width: 120px;" onMouseOver="nav('navcontact','','show')" onMouseOut="nav('navcontact','','hide')"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr><td><a href="index.php?id=21080321" title="E-mail">E-mail</a></td></tr> <tr><td><hr noshade></td></tr> <tr><td><a href="index.php?id=21080322" title="Online formulier">Online formulier</td></tr> </table> </div> <!-- Navigatie: downloads --> <div id="navdownloads" style="left:147px; top:85px; width: 120px;" onMouseOver="nav('navdownloads','','show')" onMouseOut="nav('navdownloads','','hide')"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr><td><a href="index.php?id=21080331" title="Freeware">Freeware</a></span></td></tr> <tr><td><hr noshade></td></tr> <tr><td><a href="index.php?id=21080332" title="Plug-ins">Plug-ins</a></td></tr> </table> </div> [/code:1:998a2838a3] En als laatste het navigatiemenu: (Dit is een klein deel van de keuzeitems) [code:1:998a2838a3] <td><a href="javascript:;" class="nav" onMouseOver="nav('navcontact','','show')" title="Contact">Contact <img src="img/pijl.png" width="11" height="14" align="top"></a><img src="img/spacer.gif" width="15" height="8"></td> <td><a href="#" class="nav" onMouseOver="nav('navdownloads','','show')" title="Downloads">Downloads <img src="img/pijl.png" width="11" height="14" align="top"></a><img src="img/spacer.gif" width="15" height="1"></td> [/code:1:998a2838a3] 2. (Toelichting) Met behulp van het bovenstaande script worden de layers getoond, als je over een van de navigatie links gaat. Ga je over Downloads, dan wordt de Downloads-layer getoond met daarin een aantal subopties. Als je van dit layer afgaat met de muis, wordt de visibilty weer ingesteld op hidden. Het menu ziet er ongeveer zo uit: Home | Contact | Downloads | Item4 | Item 5 | enz... Alle items staan dus naast elkaar. Als men nu vanaf Contact met de muis in een rechte lijn naar rechts gaat, dus over Downloads, dan opent dit submenu zich ook, terwijl het Contact-submenu ook open staat. 3. (Vraag) Ik wil nu dus eigenlijk een optie, dat op het moment dat een van de layers visible wordt, alle andere layers hidden zijn. Heeft iemand een idee hoe je dat met zo min mogelijk code kan doen? Ik kan het wel zo doen dat ik in het onMouseover-event bij bijv. Downloads voor elk layer apart een actie plaats onMouseover="nav('navlayernaam','','hide')" maar dat levert ontzettend veel code op. Hier heb ik dus weinig aan. Alvast bedankt, Robert P.S. Ik weet zelf ook wel dat er honderden uitklapmenuutjes te downloaden zijn, maar ik wil er graag een zelf maken.
  • Kan je geen hideAllExcept() functie maken? Die geef je één parameter mee, namelijk de id van de layer die niet verborgen moet worden. Als er geen parameter wordt meegegeven dan worden alle layers verborgen. Een kwestie van een for-loopje en checken of de id van de layer gelijk is aan de meegegeven parameter... Snappie? Het vereist een minimum aan code, zeker als je alle id's dynamisch opvraagt via het JavaScript Document Object Model (DOM) waardoor het ook nog eens in alle recente browsers zal werken (indien goed gedaan, natuurlijk). Succes! - Bas

Beantwoord deze vraag

Weet jij het antwoord op deze vraag? Registreer of meld je aan met je account

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.