カーソルが通過すると画像が変化する効果は、ロールオーバーと呼ばれています。
ホームページビルダー､DreamweaverなどのHP作成ソフトでは機能がついていますが、
MicrosoftFrontPageにはついていません。
なのでその場合は以下のタグをソースに貼り付けてお使いください。
ここではシェルフの画像を使ったサンプルですが、他に応用する場合は
画像を２種類用意し、画像ファイル名（赤字で表示部分）を書き換えて下さい。
HEAD内に書くスクリプトと、BODY内に書くスクリプトに分かれているので注意して下さい。

↑の鍋はこのスクリプトを使っています。

HEADタグ内に以下のスクリプトを記述します
<SCRIPT LANGUAGE="JavaScript">
<!--
//
// ブラウザ&バージョンチェック
//
var ver4 = (navigator.appVersion.charAt(0) == "4");
var NN4 = ver4 && (navigator.appName == "Netscape");
var IE4 = ver4 && (navigator.appName.charAt(0) == "M");
var NN3 = ((navigator.appVersion.charAt(0) == "3") && (navigator.appName == "Netscape"));
if(NN3 || NN4 || IE4){
var imgM = new Array();
imgM[0] = new Image(); imgM[0].src = "shelf1_1.gif";
imgM[1] = new Image(); imgM[1].src = "shelf1_2.gif";
}

function Min(nam,num) {
if(NN3 || NN4 || IE4) document.images[nam].src = imgM[num].src;
}

function Mout(nam,num) {
if(NN3 || NN4 || IE4) document.images[nam].src = imgM[num].src;
}
// end--->
</SCRIPT>

　
BODY内の画像を表示させたい場所に以下のスクリプトを記述します

<A HREF="#" TARGET="_blank" onMouseOver="Min('s1',1)" onMouseOut="Mout('s1',0)">
<IMG SRC="shelf1_1.gif" NAME="s1" border=0></A>

注：ロールオーバー後、他のページにリンクしたい場合は↑の青い＃の部分を、
　　リンクさせたいファイル名（○○．html）に変更してください。