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はまだ初心者のため、想像でいろいろと試しましたが解決しませんでした。勉強が足りないのは承知していますが、もし原因がお分かりの方がいらっしゃいましたら、ご教示ください。
宜しくお願いします。
補足
返事が遅れてしまいすみません。 アドバイスありがとうございます。 仰る通り、自分で作ってみてから質問するべきだと思いましたので、勉強させてもらっています。初歩からのスタートなので正攻法が分かりませんが、replaceを使った方法で実現できました。 お手数をお掛けしましたm(_ _)m