setTimeoutと擬似アニメーション
いつもお世話になっております。
またもどんづまってしまい、質問をお許しください。(T-T)
【画像Aにマウスが乗ったら】、画像Bを
start.gif(初期状態) → process1.gif → process2.gif → result.gif(ここで止まる/繰り返しなし)
と擬似アニメーションさせて、
【画像Aからマウスが離れたら】、画像Bを最初の画像であるstart.gifに戻す、
ということをやりたくて以下のように書いてみました。
http://www.wendo.jp/temp/abc.html
これで何となく希望通りの動作はするのですが、
どうしても二つ問題点が出てきてしまいます。
1). アニメーションが途中のフレーム(process1やprocess2)の時に、
マウスを離すと、start.gifにして止まって欲しいのに、
一瞬、start.gifが出た後、もう一度process1.gifに戻って
アニメーションが再開してしまう。
そして最後のresult.gifまで行って止まる。
2). 上記のように、最後のフレームまで行かずにマウスを離した場合、
再度マウスオーバーしても、アニメーションが始まらない。
なお、確認はFireFox 1.5 と IE6でしております。
setTimeout/clearTimeoutの使い方が間違っているのでは思い、
自分で調べてできそうなことは全て試しましたが、
どうにもこうにも解決の糸口さえ見つかりません。
どうかご助言をお願いいたします。