smartRolloverのカスタマイズについて

smartRollover.jsを使っています。
ロールオーバー時に　〇〇_off.jpg　が〇〇　_on.jpgに画像ファイル名が変更されるようになっています。

今は、〇〇_off.jpg　にロールオーバー時に〇〇_on.jpgという　画像ファイルがない場合、何も画像が表示されません。

それを〇〇_off.jpgにロールオーバーしたときに〇〇　_on.jpgの画像がない場合に、ファイル名を変更させない（〇〇_off.jpgをそのまま表示する）ようにしたいのですが、どのようにすれば良いでしょうか？
よろしくおねがいいたします。



■smartRollover.js
-------------------------
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);
}
--------------------------

No.1 回答者： fujillin 回答日時： 2013/12/13 10:41

各要素にロールオーバーを設定する前に、画像が存在するかを確かめればよいのではないでしょうか？

画像の存在を確認するには、よく行なわれている画像のプレロードを試みて成功すれば存在、失敗なら存在しないと判断すればよさそう。
画像の読み込みには多少なりとも時間を要するので、コードの書き方に注意が必要です。

この回答へのお礼

ありがとうございます。

画像のプレロードで判断してみます。

お礼日時：2013/12/13 14:07