Robisz sobie listę UL. W każde LI wrzucasz sobie A, które ma w sobie 2 obrazki:
Kod:
<a href="duzy_obrazek.jph">
<span><img src="kolorowy_obrazek.jpg" /></span>
<img src="maly_czarnobialy.jpg" />
</a>
i teraz:
Kod:
a {display:block; width:....px; height:....px; position:relative;}
a img {position:absolute; left:0; top:0; z-index:0;}
a span {z-index:1; display:none; position:relative;}
a:hover span {display:block;}
Resztę stylowania zostawiam tobie - w końcu nauka jest najważniejsza
Oczywiście możesz też wykorzystać JS, chociaż jak widzisz to nie jest tutaj wymagane.
http://doman.art.pl/kursjs/kurs/obrazki.html
Podana powyżej metoda jest trywialna i ma swoje wady. Osobiście pewnie bym wykorzystał do tego celu canvas, ale to już nie dla ciebie.