onMouseと連続画像アニメの併用？

質問

gifを使用せずにアニメを作ろうと考えています。
　最終的には、

　最初は普通の文字が書いてある画像があって、それにマウスを持って行くと徐々に文字の色が変化して、やがて特定の色になったところで止まる。もちろんマウスを離せば最初の文字色に戻る。

という機能を持ったJavaScriptのスクリプト(笑)が作りたいわけですが、いまいちよく分かりません。
　ちなみに、画像は既にアニメ用のものが８フレーム（つまり８枚）ほど用意してあります。そして、これが８種類あります。これらを各メニューとして、１画面に同時に使いたいわけです（つまり、リンク画像として）。

　他のサイトさんでそれを見てやりたくなったんですが、ソースを見ても何がなんだか。まだ初心者なので、かなり意味不明でした。
　どうか、よろしくお願いします。

PS　一応、画像ファイルＵＲＩは「./cg/pict_0.png」ということで。これが０～７まで８枚あるわけです。

回答No.1

President · ベストアンサー

はじめまして。
setTimeout()を使うと簡単にできます。
がんばって下さい。

<A HREF="xxx.html" onMouseOver="mover(1)" onMouseOut="mout()">
<IMG NAME="im" SRC="./cg/pict_0.png" BORDER="0"></A>

としてJavaScriptは、

function mover(i) {
　　if(i < 8){
　　　　document.images["im"].src="./cg/pict_"+i+".png";
　　　　i++;
　　　　id=setTimeout("mover("+i+")",100); //1000で1秒：500で0.5秒
　　}else{
　　　　clearTimeout(id);
　　}
}

function mout() {
　　clearTimeout(id);
　　document.images["im"].src="./cg/pict_0.png";
}

お礼

早速のご回答ありがとう御座います。試してみたら、見事にできました♪
　別なメニューも以下、

function mover(i,n) {
　　if(n == 1) { name = "aaaa";images="im_1"; }
　　if(n == 2) { name = "bbbb";images="im_2"; }

　　if(i < 8) {
　　　　document.images[images].src="./cg/names/"+name+"_"+i+".png";
　　　　i++;
・
・
・

のように、引数を増やしてみたら１つのfunctionだけで複数の画像で実現できました。ばっちぐーです♪

　とても助かりました。どうもありがとうございました。
　またご厄介になるかもしれませんが、その時もどうかよろしくお願いします。