DOM bezeichnet das Document-Object-Model, eine Methode mit sämtliche Objekte im Dokument auch gezielt mittels JavaScript in einer Objekthierarchie abgerufen und verändert werden können.
Ich habe vor kurzer Zeit auch soetwas gebaut, schematisch so: Ich habe von jedem Link eine Objektinstanz in einem Array abgelegt. Jedem Link habe ich Zustandinformationen zugewiesen. Am Ende des Skriptes wird ein Timer gestartet, welcher im Interval von 50ms aufgerufen wird. Er ruft von jedem einzelnen Link den Zustand ab und ändert ggf. Farbeigenschaften:
<script type="text/javascript"><!--
var menus = new Array("foo");
function CheckItem(item)
{
if (item.ItemState) return;
menus[menus.length] = item;
item.ItemState = true;
item.ItemValue = 0xF0;
}
function MenuOver(item)
{
CheckItem(item);
item.ItemDirection = true;
}
function MenuOut(item)
{
CheckItem(item);
item.ItemDirection = false;
}
function HexByte(value)
{
var hc = new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F");
var h = (value >> 4) & 0x0F;
var l = value & 0x0F;
return hc[h]+hc[l];
}
function RGB(red,green,blue)
{
return "#"+HexByte(red)+HexByte(green)+HexByte(blue);
}
function MenuHover()
{
for (var i = 1; i < menus.length; i++) {
var item = menus[i];
if (item.ItemDirection && (item.ItemValue > 0xB0)) {
item.ItemValue -= 4;
item.style.backgroundColor = RGB(item.ItemValue,0xFF,item.ItemValue);
}
if (!item.ItemDirection && (item.ItemValue < 0xF0)) {
item.ItemValue += 2;
item.style.backgroundColor = RGB(item.ItemValue,0xFF,item.ItemValue);
}
}
}
setInterval("MenuHover();",50);
//--></script>
Dann als fertiger Link sähe es so aus:
<a href="download.html" onMouseOver="MenuOver(this);" onMouseOut="MenuOut(this);">Downloads</a>