一番簡単なのは、imgタグにonErrorイベントを設定する方法です。
<img src="画像AのURL" alt="" onError="this.src='画像BのURL'" />
onErrorイベントは、読み込む画像が存在しない時に呼び出されます。
imgタグは、画像Aを読み込もうとする
↓
画像Aが存在しない
↓
onErrorイベントが発動
↓
自分自身のsrc属性 (this.src) を、画像BのURLに変更
↓
画像Bを読み込む
どのような状況で使うのかが分かりませんが、JavaScriptが無効の場合は画像が表示されませんので、最初から画像Aが存在しない場合を想定できるのなら別の方法を取った方が良いのかもしれません。
以下は、別の方法の例です。
// これ以降は、コメントです。
<script type="text/javascript">
// imgタグを生成
var gazo = document.createElement("img");
// imgタグにsrc属性を設定
gazo.setAttribute("src", "画像AのURL");
// imgタグにalt属性を設定
gazo.setAttribute("alt", "画像Aの説明");
// onerrorイベントを設定
gazo.onerror = function() {
// imgタグのsrc属性を変更 (画像Bも存在しない場合、onerrorイベントがループしてしまうので注意が必要です)
gazo.setAttribute("src", "画像BのURL");
// imgタグのalt属性を変更
gazo.setAttribute("alt", "画像Bの説明");
};
// 画像をbodyタグに追加する (DOMを検索してみて下さい)
document.body.appendChild(gazo);
// document.getElementsByTagName("body").item(0) ...
// element.addEventListener(...);
</script>
<noscript>
...
javascriptが無効の場合
...
</noscript>
頑張って下さい。
