ＲＯ（ロールオーバー）を使えばカーソルを乗せた時に違う画像を表示できます。

↓が↑のかめやま君のＲＯのタグです。

＜img src="http://blog-imgs-18.fc2.com/d/a/b/dabidabi/kame-mikki-1.gif" onMouseOver="this.src='http://blog-imgs-18.fc2.com/d/a/b/dabidabi/kame-mikki-2.gif'"onMouseOut="this.src='http://blog-imgs-18.fc2.com/d/a/b/dabidabi/kame-mikki-1.gif'"border="0"＞

フルパスで書いてあるので、このままコピーしても動くかもしれません。
最初と最後の＜＞は小文字に直してください。

長いようですが、基本の構文は↓だけです。
＜img src="①" onMouseOver="this.src='②'"onMouseOut="this.src='③'"＞

①には最初に表示される画像のパスを入れます。
ここでは、この画像↓


②にはカーソルが乗った時に表示する画像のパスを
ここでは、これ↓


③にはカーソルが外れたときの画像のパスを
普通は①と同じですが変えてもかまいません。


＜img src="①" onMouseOver="this.src='②'"onMouseOut="this.src='③'"onclick="this.src='④'"＞

↑のようにｏｎｃｌｉｃｋを加えるとクリックしたときに④の画像が表示されます。
↓の画像にカーソルを乗せてからクリックしてみてください。



普通①②③④は同じ大きさの画像を使います。大きさが違ってもかまわないのですが、
①③より②が小さいとちょとマズイかも知れません。

簡単なので興味のある人はチャレンジしてみてちょ♪
ＪａｖａＳｃｒｉｐｔが有効な環境で使えます。