画像をクリックすると回転します。アニメーションGIF でも同様の処理をさせることが出来ますが、javascript による方法の長所は
- アニメーションの開始、終了を自由に制御できる
- gif でなくてもアニメーションさせることが可能
短所は、おそらく、１ページ内に多用すると、重くなってしまうでしょう。
スクリプトについてですが、 イメージのHref タグのジャンプ先にjavascript の関数を指定しています。onclick イベントに指定するのも一般的ですが、href に指定する方が微妙に親切ではないでしょうか？
画像自体の配列というものを作成しています。0〜5 までのインデックスの画像を<a name="...">タグで名前付けされているページ上の画像部分に代入しています。最後の5.gif まで処理したら、0.gif に戻しています。
<script language="JavaScript">
<!--
current=0;
imgcount=5;
var img= new Array();
img[0] = new Image(); img[0].src = "gif/0.gif";
img[01] = new Image(); img[01].src = "gif/1.gif";
img[02] = new Image(); img[02].src = "gif/2.gif";
img[03] = new Image(); img[03].src = "gif/3.gif";
img[04] = new Image(); img[04].src = "gif/4.gif";
img[05] = new Image(); img[05].src = "gif/5.gif";
function anim(){
if (current < imgcount) {
current=current+1;
document.img1.src=img[current].src;
setTimeout("anim();",10);
}
else {
current=0;
document.img1.src=img[0].src;
}
}
-->
</script>