2003年01月01日

繋がらない時に代替画像に切替る

NOW2000.netには、ペットのライブカメラの動作状況を見せるための小窓があるのだが、ライブカメラ停止中は、画像が取れないのでエラー表示になってしまう。これじゃあみっともないじゃないか、と繋がらないときには「停止中」としたのがこれ。

応用方法としては、リンクのページ等で、バナー設置する場合等のリンク切れチェックだな。
大抵はバナーを持ち帰って、おのれの鯖にバナー置かんかい、ってのが多いんで関係ないんだけど。
たまに、リンクはろうとして相手さんのサイトを見たら、このタグで!なんちて指定されている場合等がある。定期的にバナーを交換しているサイトなんかがこれにあたる。バナー画像に直リンクしてくれ〜なんて言うてるんですわ。しかも結構あるんなぁ、これが。
こ〜いうところがサーバダウンしてたりサイト辞めてたりすると、いつまで経っても表示してくれなくて迷惑だし、見栄えが悪いんだよね。

【スクリプト例】
実は、JavaScriptを定義し、イメージタグにちょっと細工するだけでOKだったりする。

<IMG name=img00 onerror="linkOff('img00','../image/sorry2.jpg')"
src="http://www.now2000.net/hogehoge.jpg" width=56 height=42 border=1>

【ポイント】
まず、<HEAD>〜</HEAD>の間に、下記スクリプトを記述する。

<SCRIPT LANGUAGE="JavaScript">
<!--
function linkOff(name,src) {
  if (document.images) {
    document.images[name].src = src;
  }
}
// End -->
</SCRIPT>

name=img00
ターゲットとなる画像に名前をつける

onerror="linkOff('img00','../image/sorry2.jpg')"
ターゲットとなる画像の名前と代替画像を設定
onerrorとは、エラーが起きた時だけ発生するイベントオプションである。

Posted by Naoko at 20:11 | EDIT | WebTips