[head]
[meta http-equiv="content-type" content="text/html; charset=utf-8" /]
[meta http-equiv="X-UA-Compatible" content="IE=8" /]
[title]test[/title]
[script type="text/javascript"]
[!--
var color = new Object();

color["100"] = new Array("300", "400");

color["200"] = new Array("100", "300", "400");

color["300"] = new Array("100", "200");

color["400"] = new Array("200");

var colors = new Array("related");

function on(id)
{
for (var i=0; i[color[id].length; i++)
{
var el = document.getElementById("index_"+color[id][i]);
if (el)
{
el.setAttribute("class", colors[i%1]);
}
}
}

function off(id)
{
for (var i=0; i[color[id].length; i++)
{
var el = document.getElementById("index_"+color[id][i]);
if (el)
{
el.removeAttribute("class");
}
}
}
//--]
[/script]

[style type="text/css"]
[!--
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 18px;
color: #000000;
text-decoration: none;
}
a:link,
a:visited {
color: #000000;
text-decoration: none;
}
a:hover,
a:active {
color: #FF0000;
text-decoration: underline;
}
a.related {
color: #FF0000;
text-decoration: none;
}
--]
[/style]
[/head]

[body]

[a href="#" id="index_100" name="index_100" onMouseOver="on(100)" onMouseOut="off(100)"]aaa[/a][br /]
[br /]
[a href="#" id="index_200" name="index_200" onMouseOver="on(200)" onMouseOut="off(200)"]bbb[/a][br /]
[br /]
[a href="#" id="index_300" name="index_300" onMouseOver="on(300)" onMouseOut="off(300)"]ccc[/a][br /]
[br /]
[a href="#" id="index_400" name="index_400" onMouseOver="on(400)" onMouseOut="off(400)"]ddd[/a]

[/body]