Referencing another object 1

[furtivevole]

I'm attempting some asp.net pages for the first time. In one situation, I have a list of items, and need to highlight the one that currently has the cursor over it. So far, so good:

<dl>	
	<dt id="menuitem1" onmouseover="this.className='menuitem_over';" 
		onmouseout="this.className='menuitem_out'">Some text</dt>
        <dt id="menuitem2">... </dt>
        ....
	</dl>

This matches to a couple of css classes that define the highlight/normal appearance.

However what I would like to do is, when the user moves elsewhere on the page, retain the highlight of the last list item that received the onmouseover event, which I guess should be something like:

<dl>	
	<dt id="menuitem1" onmouseover="this.className='menuitem_over'; [menuitem2].className='menuitem_out';[menuitem3].className='menuitem_out'; etc " >Some text</dt>
        <dt id="menuitem2">... </dt>
        ....
	</dl>

In other words, there is no onmouseout event - it's only when the user moves onto a new menu item that the old one gets set back. Unfortunately I'm having a total senior moment about the syntax of [menuitem2] etc in this example - tried lots of things and nothing works. ;-( Can someone give me a clue please!

Or is there a better way of achiving the result?

Thanks

 

[trollacious]

Have you tried document.getElementById('menuitemX')? I personally would put it all in a function, and call it from each dt with a parameter, something like this:

function changeclass(oneDT)
{
var numDTs = 7; //number of DTs you have
for (var ni=1;ni<=numDTs;ni++)
  {
  var DT = document.getElementById('menuitem' + ni);
  if (DT != oneDT)
    {
    DT.className = 'menuitem_out';
    }
  else
    {
    DT.className = 'menuitem_over';
    }
  }
}

and

<dt id="menuitem1" onmouseover="this.className=changeclass(this.id)" >Some text</dt>

That's just quick and dirty, off the top of my head.

Lee

 

[furtivevole]

Thanks Trollacious - I've modified this to fit, but it gives the effect needed. Vole.