IBMのホームページビルダーはイメージをダイナミックに切り替える処理を行うJavaScriptコードを出力してくれますが、 そのコードはNetscape Communicator 4.xとInternet Explorer 4以上にしか対応していません。
function HpbImgPreload()
{
var appVer=parseInt(navigator.appVersion);
var isNC=(document.layers && (appVer >= 4));
var isIE=(document.all && (appVer >= 4));
if (isNC || isIE)
{
if (document.images)
{
var imgName = HpbImgPreload.arguments[0];
var cnt;
swImg[imgName] = new Array;
for (cnt = 1; cnt < HpbImgPreload.arguments.length; cnt++)
{
swImg[imgName][HpbImgPreload.arguments[cnt]] = new Image();
swImg[imgName][HpbImgPreload.arguments[cnt]].src = HpbImgPreload.arguments[cnt];
}
}
}
}
function HpbImgSwap(imgName, imgSrc)
{
var appVer=parseInt(navigator.appVersion);
var isNC=(document.layers && (appVer >= 4));
var isIE=(document.all && (appVer >= 4));
if (isNC || isIE)
{
if (document.images)
{
var img = document.images[imgName];
if (!img) img = HpbImgFind(document, imgName);
if (img) img.src = imgSrc;
}
}
}
function HpbImgFind(doc, imgName)
{
for (var i=0; i < doc.layers.length; i++)
{
var img = doc.layers[i].document.images[imgName];
if (!img) img = HpbImgFind(doc.layers[i], imgName);
if (img) return img;
}
return null;
}
上記のソースで問題があるのはブラウザの判定部分です。
var isNC=(document.layers && (appVer >= 4)); var isIE=(document.all && (appVer >= 4)); if (isNC || isIE)
documentオブジェクトにlayersが存在したらNetscape Communicator 4.x、document.allが存在したらInternet Explorerと判定しています。しかしMozillaはWeb標準にはないこれらのプロパティをサポートしていませんので、この条件文のどちらにも引っかかりません。
しかし条件文の後にある実際の処理を行うコードはMozillaでも有効ですので、条件文を追加すればMozillaでも動くようになります。
var isNC=(document.layers && (appVer >= 4)); var isIE=(document.all && (appVer >= 4)); var isDOM1 = (document.getElementById); if (isNC || isIE || isDOM1)
追加された条件文はMozillaにかぎらずDOM1の仕様に準拠した全てのブラウザに対して有効です。
マウスポインタを下のイメージに重ねてください
このホームページビルダーが出力するコードはブラウザ判別とオブジェクト検出で説明したオブジェクト検出の方法を使えばもっと単純化できますが、さしあたっては最小限度の修正方法だけ提示しておきます。