0 Replies Latest reply on Aug 22, 2007 6:25 AM by Outside5 Ltd

    CSS / Javascript rollovers on items that are not links

    Outside5 Ltd Level 1
      Hey all,

      I am trying to implement a multi level drop down rollover menu. I have it working but am stuck using Javscript to change the colour of the title within the drop down. The nav has 2 drop downs (section 1 and section 2). Each of these sections has an overview and 3 other pages which are listed as follows:

      Section 1
      Info | Section 1 Sub sections : Section 1 Page 1 : Section 1 Page 2 : Section 1 Page 3

      Section 2
      Info | Section 2 Sub sections : Section 2 Page 1 : Section 2 Page 2 : Section 2 Page 3

      All text items are links except the "Section 1 Sub sections" and "Section 2 Sub sections" items.

      I am looking for a way to give these a colour change rollover when the user rolls over the Section 1 Page 1, Section 1 page 2 etc links.

      I have it working using getElementById, but cannot have more than one of the list items with the same ID and cannot get it working with getElementByClass.

      My list is below.

      Thanks in advance,
      Paul

      <ul id="navigation">
      <li class="topLevel tab" id="current"><a href="index.cfm">Home</a></li>
      <li class="topLevel tab"><a href="section1.cfm">Section 1</a>
      <ul class="subNavigation">
      <li class="subLevel"><a href="section1overview.cfm">Section 1 Overview</a></li>
      <li class="subLevel spacer"> | </li>
      <li class="subLevel" id="fakeLink">Section 1 Sub sections</li>
      <li class="subLevel spacer"> : </li>
      <li class="subLevel"><a href="section1page1.cfm" onmouseover="Javascript:changecolour();" onmouseout="Javascript:changecolourback();">Section 1 Page 1</a></li>
      <li class="subLevel spacer"> : </li>
      <li class="subLevel"><a href="section1page2.cfm" onmouseover="Javascript:changecolour();" onmouseout="Javascript:changecolourback();">Section 1 Page 2</a></li>
      <li class="subLevel spacer"> : </li>
      <li class="subLevel"><a href="section1page3.cfm" onmouseover="Javascript:changecolour();" onmouseout="Javascript:changecolourback();">Section 1 Page 3</a></li>
      <li class="subLevel spacer"> : </li>
      </ul>
      </li>
      <li class="topLevel tab"><a href="section2.cfm">Section 2</a>
      <ul class="subNavigation">
      <li class="subLevel"><a href="section2overview.cfm">Section 2 Overview</a></li>
      <li class="subLevel spacer"> | </li>
      <li class="subLevel" id="fakeLink">Section 2 Sub sections</li>
      <li class="subLevel spacer"> : </li>
      <li class="subLevel"><a href="section2page1.cfm" onmouseover="Javascript:changecolour();" onmouseout="Javascript:changecolourback();">Section 2 Page 1</a></li>
      <li class="subLevel spacer"> : </li>
      <li class="subLevel"><a href="section2page2.cfm" onmouseover="Javascript:changecolour();" onmouseout="Javascript:changecolourback();">Section 2 Page 2</a></li>
      <li class="subLevel spacer"> : </li>
      <li class="subLevel"><a href="section2page3.cfm" onmouseover="Javascript:changecolour();" onmouseout="Javascript:changecolourback();">Section 2 Page 3</a></li>
      <li class="subLevel spacer"> : </li>
      </ul>
      </li>
      </ul>