Tabellenhintergrund

[ck]

Hallo,
ich möchte beim überfahren einer Tabellenzeile, dass sich das Hintergrundbild ändert. Und zwar soll es sich nur bei der Zelle ändern, die ich gerade mit der Maus überfahre.

Dieses ist der Quelltext der Zelle:

<td background="button.png" width="160" height="48" align="center" style="padding-top:5px"><a href="home.html" target="inhalt" alt="Zurück zur Startseite" onMouseOver="document.Bild.src=button_hov.src" onMouseOut="document.Bild.src=button.src">Home</a></td>

Und das der Script:

<script language="JavaScript">
<!--
button=new Image
button.src="bilder/menu/button.png"
button_hov=new Image
button_hov.src="bilder/menu/button_hov.png"
//-->
</script>

Gruß

ck

[Snafu]

Hallo!

ich möchte beim überfahren einer Tabellenzeile, dass sich das Hintergrundbild ändert. Und zwar soll es sich nur bei der Zelle ändern, die ich gerade mit der Maus überfahre.

Das machst du mittels CSS und dem :hover-Pseudoelement (in Verbindung mit td kommt dann td:hover raus).

Wenn du es doch unbedingt mit JavaScript machen musst, dann hilft dir das hier weiter http://de.selfhtml.org/javascript/objekte/style.htm#style_eigenschaften

[Gunnar Bittersmann]

@@ck:

Hallo,
ich möchte beim überfahren einer Tabellenzeile, dass sich das Hintergrundbild ändert. Und zwar soll es sich nur bei der Zelle ändern, die ich gerade mit der Maus überfahre.

Dazu brauchst du keinerlei JavaScript, das schafft CSS mit seinen Eigenschaften für Hintergründe angewandt auf mit der Maus überfahrene Elemente.

Da dumme IEs das nur für Links können, sind dem 'a'-Element die Hintergrundbilder zu verpassen und dieses ist mit 'display: none' auf die Größe der Tabellenzelle auszudehnen.

Und wenn du dich näher mit CSS befasst hast, möchtest du keine 'table' mehr zum Layouten missbrauchen.

Live long and prosper,
Gunnar

PS: Wenn man schon anderer Leute Scripte einsetzt, dann wenigtens solche aus vertrauenswürdiger Quelle.

Und das der Script:
<script language="JavaScript">

Das war schon immer falsch. Richtig geht’s mit Pflicht-Attribut 'type': http://de.selfhtml.org/javascript/intro.htm#javascriptbereiche

[Der Martin]

Hallo Gunnar,

[...] und dieses ist mit 'display: none' auf die Größe der Tabellenzelle auszudehnen.

is' heute wirklich nicht dein Tag, oder?

Gute Besserung, ;-)
 Martin

[Gunnar Bittersmann]

@@Der Martin:

is' heute wirklich nicht dein Tag, oder?

Ich hätte’s tun sollen ... Ich hätte’s tun sollen ... Ich tu’s jetzt. *hust*

Live long and prosper,
Gunnar

[Dr.Mabuse]

Hallo,
diese zwei Code-Zeilen müßten dir eigentlich weiterhelfen:

function wechsel()
{document.getElementById("zelle").style.backgroundImage = "url(bild.jpg)";}

<td id="zelle" onmouseover="wechsel()">

Gruß Dr.Mabuse

[Gunnar Bittersmann]

@@Dr.Mabuse:

diese zwei Code-Zeilen müßten dir eigentlich weiterhelfen:

function wechsel()
{document.getElementById("zelle").style.backgroundImage = "url(bild.jpg)";}

document.getElementById("zelle") has no properties

Wie sollte das weiterhelfen?

Du hättest wenigstens sagen müssen, dass das 'td'-Element eine ID "zelle" bekommen sollte. (Blöde Bezeichnung für eine ID einer bestimmten Zelle, BTW.)

Außerdem wäre 'document.getElementById()' gar nicht nötig. Wozu das Element mühsam raussuchen, wo man es doch mit 'this' schon hat?

Außerdem ist JavaSript hier gar nicht nötig. Das wurde ja schon mehrfach gesagt.

<td id="zelle" onmouseover="wechsel()">

Und das macht noch lange keinen Hover-Effekt. Was passiert beim 'mouseout'-Event?

Live long and prosper,
Gunnar

[Gunnar Bittersmann]

@@ck:

<td background="button.png" width="160" height="48" align="center" style="padding-top:5px"><a href="home.html" target="inhalt" alt="Zurück zur Startseite" onMouseOver="document.Bild.src=button_hov.src" onMouseOut="document.Bild.src=button.src">Home</a></td>

Zur Erklärung, warum hier nichts so ist wie du willst: Du hast nirgends ein Bild ('img'-Element), dessen Quelle ('src'-Attribut) du wechseln lassen könntest. Schon gar keins namens "Bild", der Griff nach 'document.Bild' geht also ins Leere. Das hat dir die Fehlerkonsole deines Browsers vermutlich gesagt.

Live long and prosper,
Gunnar

[Don P]

Hallo,

<td background="button.png" width="160" height="48" align="center" style="padding-top:5px"><a href="home.html" target="inhalt" alt="Zurück zur Startseite" onMouseOver="document.Bild.src=button_hov.src" onMouseOut="document.Bild.src=button.src">Home</a></td>

Zur Erklärung, warum hier nichts so ist wie du willst: Du hast nirgends ein Bild ('img'-Element), dessen Quelle ('src'-Attribut) du wechseln lassen könntest. [...]

Und selbst wenn so ein benanntes Bild existierte, könnte man es nicht mit onMouseOver="..." oder onMouseOut="..." wechseln.

Die entsprechenden Eventhandler heißen nämlich onmouseover="..." und onmouseout="...".

Gruß, Don P

[Gunnar Bittersmann]

@@Don P:

Und selbst wenn so ein benanntes Bild existierte, könnte man es nicht mit onMouseOver="..." oder onMouseOut="..." wechseln.

Die entsprechenden Eventhandler heißen nämlich onmouseover="..." und onmouseout="...".

Dass HTML nicht case-sensitiv ist, weißt du? [SELFHTML]

(Wenn du XHTML schreibst, tu es weiterhin, und schlag dich nicht mit unnötigem SGML-Ballst herum! ;-))

Live long and prosper,
Gunnar

[Don P]

Hallo,

@@Don P:

Dass HTML nicht case-sensitiv ist, weißt du? [SELFHTML]

Ähem, im Prinzip ja, war mir jetzt aber glatt wieder entfallen.
Weil XML, XHTML, javascript und alle case-sensitive sind, habe ich mir angewöhnt, einfach darauf zu achten.

(Wenn du XHTML schreibst, tu es weiterhin, und schlag dich nicht mit unnötigem SGML-Ballst herum! ;-))

Unnötiger Ballast? Das ist jetzt aber nicht nett. Wo ich SGML doch sooo liebe... ;-) Wo wären denn HTML, XHTML, XML und überhaupt alle MLs ohne SGML? Richtig: gar nicht erst geboren. Vermutlich nicht einmal Mona Lisa, oder geht das jetzt doch zu weit?

Gruß, Don P