Heya, metaphysics.
Ooh neat idea.
First off, I'll go ahead and change the thread title to better describe the problem (did you know that threads whose titles that do not follow the
Posting Guidelines actually get FEWER responses?).
Now then, think about it this way: The color depends on the distance (in menu items) from the mouse, with a maximum of 2. In other words:
Item 1 - 3 away from mouse > 2, so use 2 instead -> color 0 + 2 = 2
Item 2 - 2 away from mouse <= 2 -> color 0 + 2 = 2
Item 3 - 1 away from mouse < 2 -> color 0 + 1 = 1
Item 4 - Under mouse (0 < 2) -> color 0 + 0 = 0
Item 5 - 1 away from mouse < 2 -> color 0 + 1 = 1
Item 6 - 2 away from mouse <= 2 -> color 0 + 2 = 2
Ok, say what? So you have your list of colors:
-
var colors = [
-
'#3333ff', // Color 0
-
'#3333cc', // Color 1
-
'#333399' // Color 2
-
];
-
Now all you have to do is determine your 'distance':
-
<li id="menu_1" onmouseover="setColors(this);">Item 1</li>
-
<li id="menu_2" onmouseover="setColors(this);">Item 2</li>
-
.
-
.
-
.
-
<script type="text/javascript">
-
// <![CDATA[
-
function setColors(hovered)
-
{
-
var target = parseint(hovered.id.match(/\d+$/));
-
for(var i = 1; var e = document.getElementById('menu_' + i); ++i)
-
{
-
e.style.backgroundColor = colors[Math.min(Math.abs(i - target), colors.length - 1)];
-
}
-
}
-
// ]]>
-
</script>
-
As an example, suppose you hovered over menu_4.
setColors would set target = 4.
For each menu item, set the background color equal to one of the elements of the colors array. To determine that color, take the absolute value of the current element's position minus (in this case) 4. If the result is greater than the index of the last color (which in this case is 2), use that value instead.
So if item 4 were hovered:
Item 1 => target = 4, i = 1; abs(1 - 4) = 3 (> 2, use colors[2])
Item 2 => target = 4, i = 2; abs(2 - 4) = 2 (use colors [2])
Item 3 => target = 4, i = 3; abs(3 - 4) = 1 (use colors [1])
Item 4 => target = 4, i = 4; abs(4 - 4) = 0 (use colors [0])
Item 5 => target = 4, i = 5; abs(5 - 4) = 1 (use colors [1])
Item 6 => target = 4, i = 6; abs(6 - 4) = 2 (use colors [2])
Item 7 doesn't exist => break;
59
