anoniem Geplaatst: 16 juni 2003 Delen Geplaatst: 16 juni 2003 De bedoeling is om alle a elementen te detecteren binnen een div met de id: "nav". Zo ziet die div er ongeveer uit (verschilt per pagina):[code:1:5b96a68950]<!-- nav --> <div id="nav"> <ul> <li id="lifirst"><a href="/home/" title="Homepage van Limpid">home</a><span id="home"></span></li> <li><a href="/profiel/" title="Informatie over Limpid">profiel</a><span id="profiel"></span></li> <li><a href="/diensten/" title="Diensten">diensten</a><span id="diensten"></span></li> <li class="current"><strong>projecten</strong><span id="projecten"></span></li> <li><a href="/contact/" title="Contacteer Limpid">contact</a><span id="contact"></span></li> </ul> </div> <!-- END nav -->[/code:1:5b96a68950]Als de a elementen zijn gevonden, moet het volgende gebeuren: Bij een onmouseover moet het achtergrondplaatje van de span vervangen worden en bij onmouseout de vorige weer teruggezet worden. Het is me gelukt om bij een hover over a de achtergrond van de "sibling" (het span element) te veranderen:[code:1:5b96a68950]function ahover(){ if (!document.getElementById) return var a = document.getElementsByTagName('a'); for(var i = 0; i < a.length; i++){ a[i].onmouseover = function(){ this.nextSibling.style.backgroundColor = 'red'; } a[i].onmouseout = function(){ this.nextSibling.style.backgroundColor = 'green'; } } } window.onload = ahover;[/code:1:5b96a68950]Maar is dus de bedoeling alleen de a elementen te pakken binnen de div met id: "nav" anders kunnen er rare dingen gebeuren. Met childNodes lukt dit niet, want dan krijg je het elemnt ul terug en je hebt een iets dieper gelegen element nodig. Iemand enig idee hoe ik alle a elementen in een array/nodelist terugkrijg? Alvast bedankt. -termin8or Quote Link naar reactie
anoniem Geplaatst: 16 juni 2003 Auteur Delen Geplaatst: 16 juni 2003 Als je nou gewoon nog 2x de childNodes opvraagt heb je toch het gewenste resultaat? - Bas Quote Link naar reactie
anoniem Geplaatst: 16 juni 2003 Auteur Delen Geplaatst: 16 juni 2003 Hmz.. dat dacht ik ook :). Ik had zoiets geprobeerd:[code:1:2ff1e80dc6]var menu = document.getElementById('nav'); for (i = 0; i < menu.childNodes.childNodes.childNodes.length; i++) { node = menu.childNodes[i].childNodes[i].childNodes[i]; if(node.nodeName == 'a'){ node.onmouseover = function(){ this.nextSibling.style.backgroundColor = '#000'; } node.onmouseout = function(){ this.nextSibling.style.backgroundColor = '#fff'; } } } } window.onload = menunav;[/code:1:2ff1e80dc6]Maar dat werkt niet echt helaas. -termin8or Quote Link naar reactie
anoniem Geplaatst: 16 juni 2003 Auteur Delen Geplaatst: 16 juni 2003 Je kan ook overwegen om de a-tjes een specifieke class te geven. Met een simpele [color=darkblue:dd8cdfec1b][i:dd8cdfec1b]if (a[i].className == 'bla')[/i:dd8cdfec1b][/color:dd8cdfec1b] kom je dan ook een eind. Quote Link naar reactie
anoniem Geplaatst: 16 juni 2003 Auteur Delen Geplaatst: 16 juni 2003 Hmz.. beetje smerige oplossing als je het mij vraagt :). Dat wordt dan backupplan 2 (3 is zoiets meer dan met eventhandlers binnen de tag :P ). Is er in het DOM geen descendent combinator? In css heb je bijvoorbeeld zoiets:[code:1:de68f01469]div#nav a{} /* voor beeld descendent combinator */[/code:1:de68f01469]Tot nu toe heb ik alleen een soort van child-selector gezien[code:1:de68f01469]div#nav > a /* dit resulteert dus in niets, omdat #nav geen "kinderen" heeft die element a zijn */[/code:1:de68f01469]Een descendent combinator (de DOM variant dan) zou in dit geval heel handig zijn. -termin8or Quote Link naar reactie
anoniem Geplaatst: 16 juni 2003 Auteur Delen Geplaatst: 16 juni 2003 [quote:2a595bfafd] function ahover(){ if (!document.getElementById) return x=document.getElementById('nav'); var a = x.getElementsByTagName('a'); for(var i = 0; i < a.length; i++){ a[i].onmouseover = function(){ this.nextSibling.style.backgroundColor = 'red'; } a[i].onmouseout = function(){ this.nextSibling.style.backgroundColor = 'green'; } } } window.onload = ahover; [/quote:2a595bfafd] Dit is geloof ik wat je wil. In principe is getelementsbytagname een methode van elk html-element, en dat is hier heel handig te gebruiken. Quote Link naar reactie
anoniem Geplaatst: 16 juni 2003 Auteur Delen Geplaatst: 16 juni 2003 Geweldig. -termin8or Quote Link naar reactie
Aanbevolen berichten
Om een reactie te plaatsen, moet je eerst inloggen