I have a <ul> containing 6 <li> (within its own <div>) floated to the left that correspond to 6 columns of <div>

I want the background-color of a <div> to display a different color onMouseover of its corresponding <li>

diagram attached tries to interpret the idea


any help or suggestive input is appreciated

An easy way to do this would be to have the div ids equal to an extension of the li ids, so a simple concatenate can form the relationship.

js:

<script type="text/javascript">
function colorSwitch(id, color) {
    element = document.getElementById('divFor' + id);
    element.style.background = color;
}
</script>

html:

<ul>
     <li id="ListItem1" onMouseOver="colorSwitch(this.id, '#ff9999');" onMouseOut="colorSwitch(this.id, '#ffffff');">Item 1</li>
     <li id="ListItem2" onMouseOver="colorSwitch(this.id, '#ff9999');" onMouseOut="colorSwitch(this.id, '#ffffff');">Item 2</li>
     <li id="ListItem3" onMouseOver="colorSwitch(this.id, '#ff9999');" onMouseOut="colorSwitch(this.id, '#ffffff');">Item 3</li>
</ul>

<div id="divForListItem1">
    <p>div 1</p>
</div>
<div id="divForListItem2">
    <p>div 2</p>
</div>
<div id="divForListItem3">
    <p>div 3</p>
</div>

Though if you want the divs to all have the same mouseOver and mouseOut background colors, the code can be tidied up a bit

js:

<script type="text/javascript">
function colorSwitch(id) {
    element = document.getElementById('divFor' + id);
    element.style.background = '#ff9999';
}
function colorRevert(id) {
    element = document.getElementById('divFor' + id);
    element.style.background = '#ffffff';
}
</script>

html for list (code for divs is as above):

<ul>
     <li id="ListItem1" onMouseOver="colorSwitch(this.id);" onMouseOut="colorRevert(this.id);">Item 1</li>
     <li id="ListItem2" onMouseOver="colorSwitch(this.id);" onMouseOut="colorRevert(this.id);">Item 2</li>
     <li id="ListItem3" onMouseOver="colorSwitch(this.id);" onMouseOut="colorRevert(this.id);">Item 3</li>
</ul>