Ändern eines TD Bachground Bildes mit Javascript

[Jochen]

Hallo,
ich versuche zur Zeit erfolglos, das Hintergrundbild eines tabellenfeldes zu verändern wenn die Maus über einem Link innerhalb des Feldes steht.
Der Weg den ich bisher für den richtigen halte (aber nicht funktioniert) ist folgender:

<script language="JavaScript"><!--
function FPpreload(img)
{
  var a=new Image(); a.src=img; return a;
}
mk1=FPpreload("theme/dm_link.gif");
mk2=FPpreload("theme/dm_alink.gif");
// --></script>

...
  <td class=slnk name=flx>
    <a href=link1.html
      onmouseover="document.flx.background=mk2.src"
      onmouseout="document.flx.background=mk1.src">Link1</a></td>

ich habe auch schon diverse Varianten ausprobiert, z.B. mit document.all.flx oder document['flx']

Ich bekomme jedes mal die Meldung dass xxx.flx kein Objekt oder null ist. wenn ich 'name=flx' zu einem beliebigen img-tag verschiebe bekomme ich keine Fehlermeldung mehr.

Also wie adressiere ich einen named td-tag von document aus???

[Felix Riesterer]

Lieber Jochen,

Du hast ein Problem: Du arbeitest mit dem IE. Zum Entwickeln nimmt man aber entweder den Firefox (wundervoll aussagekräftige Javascript-Fehlermeldungen), oder Opera.

ich versuche zur Zeit erfolglos, das Hintergrundbild eines tabellenfeldes zu verändern wenn die Maus über einem Link innerhalb des Feldes steht.

Das nennt man einen Hover-Effekt für Links. Und Du bist Dir sicher, dass Du weder in der Doku von SelfHTML, noch hier im Archiv etwas dazu gefunden hast?

<script language="JavaScript"><!--
function FPpreload(img)
{
  var a=new Image(); a.src=img; return a;
}
mk1=FPpreload("theme/dm_link.gif");
mk2=FPpreload("theme/dm_alink.gif");
// --></script>

Was ein unglaublicher Umstand!

Vergiss Dein Script. Du kannst im Link direkt schreiben (getestet!):
<a href="link1.html" onmouseover="this.parentNode.style.backgroundImage='url(theme/dm_link.gif)';" onmouseout="this.parentNode.style.backgroundImage='url(theme/dm_alink.gif)';">Link1</a>

Aber viel einfacher geht das mit CSS (und klappt auch im doofen IE!).

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Jochen]

Danke für den Tipp. Werds gleich mal ausprobieren.
Ich habe in CSS nichts gefunden wie man am Style eines übergeordneten Elementes etwas verändern kann, aber ich werde nochmal schauen.
Ich hatte immer Probleme den Link so groß wie das Bild zu machen, also bin ich darauf verfallen, den TD-Tag für das Bild zu verwenden.

[Felix Riesterer]

Lieber Jochen,

Ich habe in CSS nichts gefunden wie man am Style eines übergeordneten Elementes etwas verändern kann

Das musst Du ja nicht! Du kannst doch der <td> selbst eine CSS-Rule geben! Dass das im IE zunächst nicht klappt ist nicht Dein Fehler.

td:hover { background: url(pfad/bild.gif) top left no-repeat; }  
  
td:hover { background: url(pfad/bild.gif) top left no-repeat; }

Für den IE gibt es aber Würgarounds in Form von netten (per CSS-import einzubindenden) .htc-Dateien, die wie Javascript arbeiten. Das Archiv hilft Dir da gerne weiter.

Liebe Grüße aus Ellwangen,

Felix Riesterer.