Hintergrundbild ändern

[molily]

Hallo,

ich habe versucht eine Funktion zu bauen, die das Hintergrundbild einer Zelle beim darüberfahren ändert:

function ChangeBackground(name)
{
document.getElementById(name).background = "img/button2.jpg";
}

Das funktioniert nicht, obwohl das Ändern der Zellenhöhe funktioniert hat.
Die Fehlerkonsole gibt auch keine Fehler aus.

Erstmal: Ein background-Attribut beim td-Element gibts gemäß HTML 4 nicht, auch wenn es die Browser aus historischen Gründen kennen. Deshalb ist im HTML-DOM jedenfalls keine Objekteigenschaft namens background definiert.

Das führt dazu, dass Browser es zwar im HTML umsetzen, aber nicht, wenn man die background-Eigenschaft im JavaScript setzt. Weil das nirgends definiert ist, dass es funktionieren muss. IE macht das zwar, Opera, Firefox und Konqueror nicht.

Was browserübergreifend funktionieren würde, wäre setAttribute("background", "img/button2.jpg"). Aber dann kanns du auch gleich style.background setzen.

Wobei style.http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#background@title=background nochmal etwas anderes ist. Es ist eine zusammenfassende Eigenschaft für mehrere CSS-Eigenschaften den Hintergrund betreffend. Damit hast du auch einfach mehr Möglichkeiten.

Wenn du die nicht nutzt, dann ist es natürlich Schnuppe, dann kannst du bei setAttribute bleiben. Attribute setzen ist aber etwas ganz anderes als Inline-Styles setzen. Mit Inline-Styles kannst du Regeln aus dem Stylesheet überschreiben, weil die sich http://de.selfhtml.org/css/formate/kaskade.htm@title=vererben. Die ganzen veralteten Attribut fallen da einfach heraus.

Besser ist es wie gesagt ohnehin, wenn möglich Style-Angaben auch aus dem JavaScript herauszuhalten. Es ist sinnvoller, du setzt die Klasse:

  
document.getElementById(name).className = "hervorgehoben";

Im zentralen Stylesheet hast du dann alle Formatierungen im Griff. Da stünde dann z.B. solche Regel:

td.hervorgehoben { background-image:url(img/button2.jpg); }

Wenn ich das Ziel richtig verstanden habe (Hintergrundwechsel beim Mouseover), dann ist auch reines CSS dafür ausreichend, dann brauchst du JavaScript nicht unbedingt:

#zelle[ref:self812;css/eigenschaften/pseudoformate.htm#link_visited_focus_hover_active@title=:hover] { background-image:url(img/button2.jpg); }

Allerdings kann das IE < 7 nicht.

Mathias