In einer HTML Tabelle vorhandenes Bild bei MouseOver ersetzen

[Bernd]

Hallo!

Hier mal die Erklärung was ich machen will -
Ich habe eine Liste in einer Tabelle (z.B. mit Spielen)
und nun sind in mehreren Zellen Bilder eingefügt.
Nun möchte ich, dass wenn ich über das Bild fahre, sich das Bild verändert in ein anderes Bild.
Mit dem beigefügten Code funktioniert das zwar - aber das 2. Bild (rot.jpg) setzt sich nur hinter das andere.
Um das zu verdeutlichen habe ich ein wesentlich größeres Rotes Bild genommen: Screenshot Beispiel

Habe folgende Codes:
in der index.html: [HTML]

<table border=2 bordercolor="#1E90FF">  
<tr>  
<th><img id="mw3" src=web_11_Dateien/mw3.png /></th>  
</tr>  
</table>  

und in der index.CSS: [CSS]

  
@charset "utf-8";  
/* CSS Document */  
  
#mw3 {  
	display: block;  
	background:inherit;  
}  
#mw3:hover {  
	background-image: url(web_11_Dateien/rot.jpg);  
	  
}  

Was muss ich tun, damit sich das Bild beim Hover über das andere setzt?

Liebe grüße,
Bernd