メニューバーにマウスを乗せると、メニューバーのイメージがチェンジし、同時に左のイメージがアニメーションを開始します。マウスをメニューバーから外すと再び元のイメージに戻ります。



IMAGES
HTMLファイルが収まる同一ディレクトリ(フォルダー)内に「images」の名称でディレクトリを作成します。次に以下イメージを「images」に保存します。
保存方法:イメージの上にマウスを乗せ、右クリックし、「名前を付けて画像を保存(S)」を選択し、上記の「images」のディレクトリ内に保存します。

 ani_01.gif
 ani_01-ani_02_over.gif
 ani_02.gif
 ani_02-over.gif



DIRECTIONS
Step1:以下内容を <head> 内にコピー&ペーストします
<SCRIPT LANGUAGE="JavaScript">
<!--

function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}

function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}

var preloadFlag = false;
function preloadImages() {
if (document.images) {
ani_01_ani_02_over = newImage("images/ani_01-ani_02_over.gif");
ani_02_over = newImage("images/ani_02-over.gif");
preloadFlag = true;
}
}

// -->
</SCRIPT>
Step2:以下内容を <body> へコピー&ペーストします
<TABLE WIDTH=132 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD>
<IMG NAME="ani_01" SRC="images/ani_01.gif" WIDTH=18 HEIGHT=24></TD>
<TD>
<A HREF="#"
ONMOUSEOVER="changeImages('ani_01', 'images/ani_01-ani_02_over.gif', 'ani_02', 'images/ani_02-over.gif'); return true;"
ONMOUSEOUT="changeImages('ani_01', 'images/ani_01.gif', 'ani_02', 'images/ani_02.gif'); return true;">
<IMG NAME="ani_02" SRC="images/ani_02.gif" WIDTH=114 HEIGHT=24 BORDER=0></A></TD>
</TR>
</TABLE>
</BODY>
Step 3: 以下内容を <body> tag へコピー&ペーストして挿入します
<BODY BGCOLOR=#FFFFFF ONLOAD="preloadImages();">