[JS/CSS] rollover 2 divs veranderen

[oZy]

Ik probeer dus met een onmouseover de bgcolor van 2 divs te veranderen. Nu zijn er meerdere, dus kan geen directe id's gebruiken.. ben ff lost hier, weet niet precies hoe ik nou de juiste divs kan vinden. Het gaat om een menu.

code:

  <script language="javascript">
    function fMenuRollover(what,how) {
      if (how == 'down')
        what.sniTop.style.backgroundColor = '#F4BB77';
        what.sniBot.style.backgroundColor = '#F8941D';
      else
        what.sniTop.style.backgroundColor = '#AFDDFF';
        what.sniBot.style.backgroundColor = '#7DC7FF';
    }
  </script>

    <div id="sn01" class="sn-u1">
      <div id="sniTop" class="sn-u2"><span class="sn-u4" onmouseover="fMenuRollover('sn01','down');" onmouseout="fMenuRollover('sn01','up');">test 0</span></div>
      <div id="sniBot" class="sn-u3"></div>
    </div>
    <div id="sn02" class="sn-u1">
      <div id="sniTop" class="sn-u2"><span class="sn-u4" onmouseover="fMenuRollover('sn02','down');" onmouseout="fMenuRollover('sn02','up');">test 1</span></div>
      <div id="sniBot" class="sn-u3"></div>
    </div>

Ik had dus gehoopt dat je een geneste div kunt aanspreken met idVanParentDiv.idVanChildDiv, maar dat werkt dus blijkbaar niet. Iemand een tip?

[ Voor 24% gewijzigd door oZy op 17-06-2003 20:57 ]

[Verwijderd]

Hier kun je even het best met het Document Object Model aan de gang gaan. Alle elementen zijn nodes, en die kunnen childNodes en een parentNode hebben.

[oZy]

ok, thats a start. Ik ben geen javascript prof, heb ook geen idee wat je bedoelt maar ik ga opzoek. mocht je je geroepen voelen iets uitgebreider hierop in te willen gaan, please do so

[Verwijderd]

In jouw geval ga je uit van een event dat plaatsvindt in de context van een span element. Als je in plaats van een naam, een referentie naar het huidige object (de span dus) meegeeft, kun je vandaaruit de DOM-tree gaan doorlopen.

De aanroep ziet er dus als volgt uit:

HTML:

span onmouseover="fMenuRollover(this, 'down');"

De functie zal uiteraard ook moeten worden aangepast:

JavaScript:

function fMenuRollover(element, state)
{
   if (state != 'down')
   {
      element.parentNode.style.backgroundColor = '#AFDDFF';
      element.parentNode.nextSibling.style.backgroundColor = '#7DC7FF';
   }
   else
   {
      element.parentNode.style.backgroundColor = '#F4BB77';
      element.parentNode.nextSibling.style.backgroundColor = '#F8941D';
   }
}

Like a charm
parentNode en nextSibling zijn DOM-properties, er zijn uiteraard nog meer handige properties, die vind je in DOM-documentatie

Overigens maak je zelf een fundamentele fout met deze constructie:

JavaScript:

if (condition)
   statement;
   statement;
else
   statement;
   statement;

Er kan maar één statement volgen na een if of else. Wil je er meer uitvoeren, dan moet je het echt binnen een block plaatsen, dus er moeten accollades omheen!

JavaScript:

if (condition)
{
   statement;
   statement;
}
else
{
   statement;
   statement;
}

Zo dus..

[ Voor 9% gewijzigd door Verwijderd op 17-06-2003 21:32 ]

[oZy]

welkom in de wondere wereld van het DOM! Bedankt voor de moeite Cheetah, a real eye-opener.

[ Voor 6% gewijzigd door oZy op 18-06-2003 11:11 ]

[oZy]

Hmm.. ik merk dat het dus alleen *goed* werkt onder IE6. Klopt dat? Of ligt het aan iets anders in mn css?

===edit====

mozilla ziet whitespaces ook als elements, dus vandaar dat het niet goed werkte. fixed nu

[ Voor 34% gewijzigd door oZy op 18-06-2003 16:06 ]