:hover bei <img>

[Gunnar]

Eine CSS habe ich leider (für diesen Teil noch) nicht.

Grund hierfür:
Ich habe vier DIVs.
Diese möchte ich verlinken, da man ja DIVs nicht verlinken kann, habe ich in die DIVs je ein Bild gesetzt, das dann verlinkt ist.

Jetzt sieht das ganze ganz einfach so aus:

.navigation {  
 float: left;  
 width: 100px;  
 height: 100px;  
}

<div class="navigation">  
	<a href="http://www.test.tst">  
		<img src="bild.gif" width="100px" height="100px" onmouseover="this.src='x.gif'" onmouseout="this.src='bild.gif'" />  
	</a>  
</div>  
  
<div class="navigation">  
	<a href="http://www.test.tst">  
		<img src="bild2.gif" width="100px" height="100px" onmouseover="this.src='x2.gif'" onmouseout="this.src='bild2.gif'" />  
	</a>  
</div>

Wie funktioniert das mit dem :before bzw. :after?
Ich kann hier doch eigentlich auch nur das background-image ändern oder?