onMouseOver(td.bg.img.change)

[nichtsooft]

Hello again!

Ich denke die einfachen onMouseOver Snippets wurden hier schon mehr als oft genug behandelt (lt. Suchfunktion zumindest) und so hab ich mal ne ähnliche Frage, die allerdings eine weit komplexere Lösung erfordert:

Wie müsste ein Script aussehen, wenn ich in einer Tabelle onMouseOver ein Hintergrundbild (-> CSS) eines TD ändern will?

Ansatz:

<table cellspacing="0" cellpadding="0" style="width: 250px; height: 25px; border: 0px;">
 <tr onMouseOver="testtd.class='class2'" onMouseOut="testtd.class='class1'">
  <td name="testtd" class="class1">lalala</td>
 </tr>
</table> 

Weiter bin ich noch nicht! Wie ich das mit nem Normalen Bild machen würde ist ganz einfach, aber da ja das Hintergrundild per CSS festgelegt werden soll ist das irgendwie auch nicht so einfach. Was meint ihr dazu?

[Kropff]

document.getElementByID.style.backgroundImage 

geht aber glaube ich nicht bei tr-elementen sondern nur bei td.

gruß
peter

[mcmurphy]

- gib deiner TD eine id
- bastel dir eine Funktion auf, der die id übergeben wird
- in der Funktion kannst mit getElementByID auf den style zugreifen
- weise per style dem backgroundImage ein anders Bild zu
ansonsten

[nichtsooft]

Re: onMouseOver(td.bg.img.change)

Danke Peter, Danke Murph!
Also so klappt's auch nicht:

Ansatz:

function change(td, bg) {
 document.getElementById('td').style.backgroundImage=bg;
}
--------------------------


<table cellspacing="0" cellpadding="0" style="width: 250px; height: 25px; border: 0px;">
 <tr>
  <td onMouseOver="change('testtd', 'bild2.jpg')" onMouseOut="change('testtd', 'bild1.jpg')" id="testtd" style="background-image: url(bild1.jpg);">lalala</td>
 </tr>
</table> 

Any more ideas?

Edit: Quotes gesetzt! Nützt auch nichts!

[Kropff]

grundlagen!

onMouseOver="change('testtd', 'bild2.jpg')"
...
document.getElementById(td).style.backgroundImage="url(" + bg + ")"; 

btw: javascript-konsole vom firefox nutzen.

gruß
peter

[nichtsooft]

Alter Schwede! Liegt das nur an den Quotes? Muss ich gleich testen!

Edit: *lol* 2 fast 4 your edit! *gg*

[Kropff]

was sagt die javascript-konsole vom firefox?

peter

[nichtsooft]

Fehlerfrei! Siehe: link

1000 Dank Peter!

[Kropff]

ich hoffe da kommen später richtige bilder, sonst wäre ein style.backgroundColor angebracht.

noch ein tipp, die bilder werden vom ie nicht gecached und sobald die bilder eine bestimmte größe überschreiten, flackert es im ie ganz heftig.

gruß
peter

[nichtsooft]

Ja das wird in ein Navigationselement eingebaut und die Bilder bekommen so ca. 148x17px (1KB). Einstweilen klappt's auch mit IE!

Kann man da irgendwie ein preload einbauen?

[Kropff]

Einstweilen klappt's auch mit IE!

6 oder 7!

Kann man da irgendwie ein preload einbauen?

ich habe es probiert und nichts hat funktioniert. ich glaube, der zieht sich bilder immer nur bei bedarf.

btw: bei mir im ie 6 flackert schon dein beispiel. teste das mal online!

gruß
peter

[nichtsooft]

*lol* also mein 6er IE flackert nicht!
Oder meinst du die kurzzeitige Anzeige des "Loading-cursors" (=Sanduhr) ?

Wie steht's nun mit preload?

[mcmurphy]

noch ein tipp, die bilder werden vom ie nicht gecached und sobald die bilder eine bestimmte größe überschreiten, flackert es im ie ganz heftig.

Deshalb packe ich beide Bilder zusammen in EIN Bild, obere Hälfte Bild eins, untere Hälfte Bild zwei und ändere dann die backgroundPosition entsprechend ....

[Kropff]

Original geschrieben von mcmurphy
Deshalb packe ich beide Bilder zusammen in EIN Bild, obere Hälfte Bild eins, untere Hälfte Bild zwei und ändere dann die backgroundPosition entsprechend ....

das ist ja mal eine echt gute idee. warum bin ich nicht damals darauf gekommen?

gruß
peter

[mcmurphy]

ach ja, den Effekt des online Bsp. kriegts aber auch völlig OHNE Bild hin...