✔ Das Hintergrundbild einer Tabelle mittels Javascript ändern.

[Claas M]

Hallo.

Ich habe eine Tabelle, in die ich mittels Style-Attribut ein Hintergrundbild lade.

<td style="background-image:url(images/platzhalter_banner_20x26.jpg)" width="20">&nbsp;</td>

Ich habe nun ein transparentes Gif rübergelegt und das gif verlinkt. Nun hätte ich gerne, dass...

a)...das Hintergrundbild (mittels Style eingefügt)
oder
b)...das transparente Gif ausgetauscht wird

Die Lösungen, die ich während meiner Googlesuche gefunden habe waren leider nicht das, was ich erwartet habe, weil ich keine Lust habe viele Indie...*Wie lautet der Plural von Index?*...dingens zu verteilen und später den Code nicht mehr verstehe.

Ich weiß im Groben, dass ich den Gif's, die es zu ersetzen gilt, mittels name="" einen Namen geben muss, der dann durch JS angesprochen wird. Die Änderung des Bildes erfolgt dann mittels onMouseOver/ onMouseOut. Leider hapert es an der genauen Schreibweise eines solchen Codefragmentes.

Ich hoffe ich habe mein Problem ausreichend geschildert und poste dennoch den nötigen Code:

<!--viel Code
<tr>
<td style="background-image:url(images/contact.jpg)" width="97"><a href="index.php?action=ueber"><img src="images/klar.gif" height="26" width="97" alt="click" border="0"></a></td>
</tr>
<tr>
<td style="background-image:url(images/contact_schraffur.jpg)" width="97"><a href="index.php?action=ueber"><img src="images/klar.gif" height="10" width="97" alt="click" border="0">Dieses 'Klar-Bild' muss entweder ersett werden, so dass die Schraffur-Datei überdeckt wird, oder die Schraffurdatei selbst wird ersetzt.</a></td>
</tr>

 

[Maik]

Du könntest zwei CSS-Klassen mit unterschiedlichen Hintergrundbildern für die Tabellenzelle erzeugen und diese dann beim Überfahren mittels this.className='Klassen-Namen' tauschen:

td.normal {
background: url(images/bgImage_1.png);
width: 70px; /* entspricht der Grafikbreite */
height: 70px; /* entspricht der Grafikhöhe */
}

td.hover {
background: url(images/bgImage_2.png);
width: 70px; /* entspricht der Grafikbreite */
height: 70px; /* entspricht der Grafikhöhe */
}

<table>
       <tr>
           <td class="normal" onmouseover="this.className='hover'" onmouseout="this.className='normal'">&nbsp;</td>
       </tr>
</table>

P.S. Der Plural von Index lautet Indizes.

 

[Claas M]

Danke Dir für die schnelle Antwort.

Aber so wie ich es sehe bzw probiert habe funktioniert das nicht zeilenübergreifend, oder?
Also in der ersten Zeile ist die Mouseover-Sache und in der zweiten wird ersetzt.

 

[Maik]

Ein zeilenübergreifendes Tauschen der CSS-Klassen ist auch möglich:

<table>
       <tr>
           <td onmouseover="document.getElementById('test').className='hover'" onmouseout="document.getElementById('test').className='normal'">Test</td>
       </tr>
       <tr>
           <td class="normal" id="test">&nbsp;</td>
       </tr>
</table>

 

[Claas M]

Danke Für die Hilfe, es klappt 1A.