マウスオーバー（マウスを画像やリンクに合わせること）で合わさった画像を切り替えるのは、いろいろなソフトから自動生成などもできますが、ここでは特定の画像にマウスオーバーした時に、違う場所の画像を切り替える方法を紹介します。
まず、Javascriptを用意します。
function changeimage(target,image){
document.getElementById(target).src=image;
}
と書いて、image.jsとでも名前を付けて保存します。
基本的に、Javascriptを外部化して使用しましょう。その方が、SEO的にもよいといわれていますし、管理が楽です。
次にマウスオーバーする側の画像をbutton.pngとし、切り替える画像をbefore.pngからafter.pngとします。
（button.pngにマウスオーバーするとbefore.pngがafter.pngに変わる、マウスを外すとbefore.pngに戻る）
まず、button.pngのimgタグを
<img src="button.png" border="0"
onMouseOver="changeimage('test','after.png')"
onMouseOut="changeimage('test','before.png')">
>
と書きます。
そして、切り替えたい画像の場所に
<img src="before.png" alt="" id="test" >
と書きます。
最後に、忘れないように該当のhtmlに
<script language="javascript" src="image.js"></script>
として、Javascriptを読み込ませます。
これで完成です。