jsを使ったロールオーバーで特定の画像だけ表示できません

質問

インターネット上に同じ様な内容の情報がありましたが、若干今回の問題とずれており、どれを見ても解決できないため質問しました。

以下のサイトを参考にjavascriptを使ったロールオーバーを設置しました。
http://css-happylife.com/log/javascript/000157.shtml

以下がjavascriptのコードです。
----------------------------------------------------
function smartRollover() {
if(document.getElementsByTagName) {
var images = document.getElementsByTagName("img");

for(var i=0; i < images.length; i++) {
if(images[i].getAttribute("src").match("_off."))
{
images[i].onmouseover = function() {
this.setAttribute("src", this.getAttribute("src").replace("_off.", "_on."));
}
images[i].onmouseout = function() {
this.setAttribute("src", this.getAttribute("src").replace("_on.", "_off."));
}
}
}
}
}

if(window.addEventListener) {
window.addEventListener("load", smartRollover, false);
}
else if(window.attachEvent) {
window.attachEvent("onload", smartRollover);
}
----------------------------------------------------

画像に「●●_off」という名前つけると、マウスオーバー時に「●●_on」の画像へ切り替わるというものです。（●●は同じ名前です）

特定の画像が表示されないという具体的な内容ですが
メニューとして4つの画像を縦並びでリスト表示させているのですが、その一番上の画像だけが表示されません。
表示されないのは、通常時に表示されるべき「●●_off.gif」です。
4つの画像は全てgif画像です。

IE6、7、8とFirefox3で試しました。
IE6、7、8は「●●_off.gif」が×印で表示され、そこにマウスオーバーすると「●●_on.gif」の画像が表示されます。マウスを離すとまた×印に戻ります。Firefoxは何も表示されず、マウスオーバーする場所もありません。

2～4つ目の画像については問題なく表示、切り替えも動作します。

パスが間違っているのではないかと思い確認し、念のため絶対パスをブラウザのアドレスに直接入力してみましたが、表示されません（404エラー）。
確実にサーバーへアップロードしているのに表示されません。
こんなことってあり得るのでしょうか？？
●●_on.gifの方は同様に確認すると表示されました。

さらに、jsのせいかもしれないと思い、jsの影響がない別のディレクトリにアップロードしてみました。上記と同様にブラウザに絶対パスを入力して確認しましたが、それでも表示されません。
まるでこの画像だけがネットに拒否されているかの様です・・・。

さらに、ファイル名が悪いのかと思い（あり得ないですが・・）、別の名前でいろいろと試しましたがやはり_offの方は表示されませんでした。

さらに、しつこいですが、4つのリストメニューのうち、一番最初だけが表示されないというバグではないかと思い、とりあえず表示されない「●●_off.gif」のリストだけをhtmlから消去してみました。
すると2～4番目にあったものがそのまま表示されます。一番最初だけが・・・というわけではない様です。

最後にダメもとで、gifをjpgに変えてアップロードしてみたら、表示されました・・・。
いちおう表示できたということで解決したのですが、何が原因だったのか、今後同じことが起こり、どうしてもgifでなければならない際を考えて、また、実はすごく根本的な間違いだったのでは？と思い質問させていただきました。

jsはまだ初心者のため、想像でいろいろと試しましたが解決しませんでした。勉強が足りないのは承知していますが、もし原因がお分かりの方がいらっしゃいましたら、ご教示ください。
宜しくお願いします。

回答No.3

4017B · ベストアンサー

＞gifをjpgに変えたら表示されました
～と言う事であれば。問題は確実に「そのGIF画像」にあります。

2～4番目の画像もGIF画像だったのですから。
お使いのブラウザでGIF画像が表示出来ないと言う訳でもありませんので。何らの理由で1番目のGIF画像のみ、ファイルが破損していたのかも？

もしくは最初に1番目のGIF画像を作成する時に。
ブラウザではうまく解釈出来ない“イイ加減な”GIF画像形式になっていたのかも？

・もう1度、1番目のGIF画像をUpし直す。
・別のツールを使って、1番目のGIF画像を作成保存し直す。

～等々やってみれば原因が分るかもしれません？？

お礼

回答ありがとうございます。

私も画像自体に問題があるという印象で、いろいろやってみました。
ファイル破損を予想して、作り直しもしたのですが、やはりだめでした。
イラストレーターを使っていて、その他のツールで作成する方法がないためその点は試していません。

今、試しに正常に表示されている2番目のgif画像を1番目の画像の名前にリネームしてUPしてみたのですが、正常に表示されました。
やはり画像自体の問題かもしれませんね。

同じイラストレーターのアートボード内で作った同じような画像が、ひとつだけ、何度保存し直しても破損する、ということはあり得るのでしょうか？jsというより、イラストレーターの操作方法に関わることかもしれませんので、また別の機会に質問投稿させていただきます。

回答No.2

dell_OK

画像ファイルの拡張子が .gif ではなく .GIF になっていたとか。
サーバーによるのかどうかわかりませんが、
大文字小文字の違いで画像が表示されないと言う事がありましたので。

だとすると、
.jpg に変えて表示されたと言うのが、
変換時に確実に小文字にされたのでしょうし、
ＨＴＭＬ内の設定も小文字で入力されたのではないかと思います。

お礼

回答ありがとうございます。

たしかに、GIFとgif、JPGとjpgの違いで改善したという記事を見たことがあったのでチェックしたのですが、すべてgif統一してあります。
わざわざ正常に表示されるファイル名をコピペして編集もしました。
それでもだめでした^^;

回答No.1

rorona667

IE6でも透過画像（アルファ値アリのもの）が表示されるようにしたくて、その為のjsを入れた時に割と似た症状になったことがありますね。
確かに「ロールオーバーをあてた」「サイズ、拡張子、ファイル名などほぼ同種の画像」の「最後の（これだけ違いますね）一つ」だけ「ブラウザによっては」まるで存在ないかのような扱いでした。
私はjsど素人なので解決できず（しようともせず^^;）に放置だったので参考意見にもなりませんが、ライブラリに似たようなものが混ざってることもありますし、gifがダメでjpgが平気""ブラウザごとに違う"という症状からあるいは可能性としてどうでしょう？

お礼

回答ありがとうございます。お礼が遅くなりました。
IE６～８もfirefoxもどちらもNGなので（firefoxは×の画像はもともと表示されない仕様だと思っているのですが）、「ブラウザごとに違う」というわけではないように思います。どちらかというと、画像自体に問題があるような印象です。
ただ、確かに似たような環境ですね。きつねにつままれたような感じですね・・。