nicht angemeldet
Hallo Leute,
so langsam stehe ich hier mit einem Problem auf dem Schlauch.
Folgendes möchte ich erreichen:
Erstellung eines CMS-Menüs das dynamisch über das CMS mit Inhalten versehen werden kann und welches beim Überfahren mit der Maus seine horizontal ausgerichteten Listen-Hintergründe ändert.
Problem:
Normalerweise ist das ja garkein Problem, doch hier liegt der Fall anders, da mir durch die Design-Vorlage des Menüs vorgegeben wird ZWEI Listen-Hintergründe ("<li>") beim Überfahren eines Links innerhalb EINES Listen-Elementes zu ändern.
Die Listen-Elemente selber, können durch die automatisierte Ausgabe des CMS NICHT via Id kenntlich gemacht werden, was hier dann auch den maßgeblichen Auslöser für mein Problem darstellt! Was hier also für mich das Problem darstellt, ist schlicht die Tatsache dass ich via "getElementsByTagName" anscheinend nicht ermitteln kann, welcher Anker gerade durch Hover eine andere Schriftfarbe bekommen hat, um dies zu ermitteln und so dann den Hintergrund DIESES Ankers- sowie den Hintergrund des vorangegangenen Ankers im Listenfeld zu ändern.
Mein bisheriges Konzept:
Ich ermittele die Style-Änderung eines mit der Maus überfahrenen Menüelemente (in <li> enthaltenes <a href>) durch eine Funktion via onmouseover und schreibe dann dynamisch den Hintergrund des überfahrenen Elementes neu. Ich habe durch rumprobieren schon ermittelt dass ich problemlos via
document.getElementById('uli').getElementsByTagName("li")[i].getElementsByTagName("a")[0].style.color = 'red';
zb. die Schriftfarbe ändern kann, ebenso wie Höhe und den Hintergrund etc. Ich kann nur NICHT ERMITTELN wie die Textfarbe eines Elementes ist! Wenn ich versuche das via
alert(document.getElementById('uli').getElementsByTagName("li")[i].getElementsByTagName("a")[0].style.color);
auszugeben bekomme ich nichts als ein leeres Alert-Feld!?
Frage:
Warum kann ich sehr wohl über die genannten Routinen einen Style für ein betreffendes Element setzen, NICHT aber auslesen?
Quelltext der Html-Seite:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
<!--
function get_li() {
for(var i = 0; i < document.getElementById('uli').getElementsByTagName("li").length; i++)
{
var gesuchte_Link_Farbe = document.getElementById('uli').getElementsByTagName("li")[i].getElementsByTagName("a")[0].style.color;
if (gesuchte_Link_Farbe == "#ffffff")
{
document.getElementById('uli').getElementsByTagName("li")[i].getElementsByTagName("a")[0].style.background = 'url(neu1.jpg)';
var davor = parseInt(i-1);
document.getElementById('uli').getElementsByTagName("li")[davor].getElementsByTagName("a")[0].style.background = 'url(neu2.jpg)';
}
}
}
//-->
</script>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Nature's Charm by Free CSS Templates</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="default.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="header">
<div id="menu">
<ul id="uli">
<li><a href="#" onmouseover="get_li()">Bla</a></li>
<li><a href="#" onmouseover="get_li()">Bla</a></li>
<li><a href="#" onmouseover="get_li()">Bla</a></li>
<li><a href="#" onmouseover="get_li()">Bla</a></li>
<li><a href="#" onmouseover="get_li()">Bla</a></li>
<li><a href="#" onmouseover="get_li()">Bla</a></li>
<li><a href="#" onmouseover="get_li()">Bla</a></li>
<li><a href="#" onmouseover="get_li()">Bla</a></li>
</ul>
</div>
</div>
<p> </p><p> </p><p> </p><p> </p><p> </p><p> </p>
</body>
</html>
Ich vermute dass es sich hier nur um ein sehr kleines Problem handelt, doch ich wäre für jeden Schubser in die richtige Richtung dankbar! :-)
Gruss
-Pfuscharrr
MudGuard