※ ChatGPTを利用し、要約された質問です（原文：innerHTMLによるアニメーションGIFの表示について）
innerHTMLによるアニメーションGIFの表示について
このQ&Aのポイント
IE6.0では問題ないのですが、Firefox2.0で表示すると、2周目以降の表示がおかしくなります。
具体的には各アニメーションの最後のフレームが指定時間表示され、次の画像に遷移するので、全くアニメーションが行われません。
また、どの画像で不具合が起こるかが限定されないようです。ブラウザの問題かと思い、キャッシュしない記述なども試しましたがうまくいきませんでした。
innerHTMLによるアニメーションGIFの表示について
おたずねします。
３つのアニメーションGIFを順に表示させて、最後まで行くと最初の画像に戻るように記述しました。
サンプルページURL
http://oreryu.sakura.ne.jp/sample/gif_out.html
IE6.0では問題ないのですが、Firefox2.0で表示すると、
2周目以降の表示がおかしくなります。
具体的には各アニメーションの最後のフレームが指定時間表示され、
次の画像に遷移するので、全くアニメーションが行われません。
また、どの画像で不具合が起こるかが限定されないようです。
ブラウザの問題かと思い、
キャッシュしない記述なども試しましたがうまくいきませんでした。
外部javascriptのソース
banner= new Array();
banner[0]=('<a href="#"><img src="1-1.gif" alt="" width="375" height="125" border="0"></a>');
banner[1]=('<a href="#"><img src="2-1.gif" alt="" width="375" height="125" border="0"></a>');
banner[2]=('<a href="#"><img src="3-1.gif" alt="" width="375" height="125" border="0"></a>')
time= new Array();
//バナーの表示時間 上から表示順
time[0]=(5000);
time[1]=(5000);
time[2]=(5000);
var menu=0;
function bchange(){
document.getElementById('banner_change').innerHTML=(banner[menu]);
timerID = setTimeout("bchange()",time[menu]);
if(menu == banner.length-1){
menu=0;
}else{
menu++;
}
}
HTMlファイルのソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title></title>
<script language="javascript" type="text/javascript" src="banner_chg.js"></script>
</head>
<body>
<span id="banner_change">
<script language=javascript>
<!--
bchange();
//-->
</script>
</span>
</body>
</html>
できれば上記のinnerHTMLを使用してタグを書き換えるやり方で、
正常に表示できる方法を探しています。
御存知の方がいれば教えてください。
よろしくお願いいたします。
お礼
ありがとうございます。 もしかして私の環境だけで発生する現象かと疑い、 アドオンの中の「Web Developer」を無効にしたところ、 なんと正常に表示されるようになりました。 アドオンツールが表示に影響を与えるとは思いつきませんでした。 無事に解決してよかったです。