美容・健康・ファッション・インテリア・DVD・お花・ギフト 安全安心のお買い物

町工場ネット トップ  ◇サイトマップ ◇新規登録 ◇プライバシーポリシー ◇相互リンクの方法 ◇問い合わせ

町工場 | 総合 | 美容 | ファッション | インテリア | 家電 | 資格| 食料 | 個人開業 | 書籍 | ギフト | ホビー | CD・DVD

←前ページ トップページ 内容一覧 次ページ→
■画像が表示されない場合に代わりの画像を表示する。


画像はパスが通っていればこのようにちゃんと表示されますが、広告や他サイトのバナーなど、自分のページがあるサイト以外に画像がある場合に、他サイトのサーバの障害があると画像が表示されずに X が表示されてしまいます。

こんな感じです。これがなんとも不細工で気に入らないという方も多いと思います。そこでこのスクリプトを使います。画像がダウンロードされなかった場合は別の画像を表示させます。

ソースを見るとわかりますが、上も下も同じように画像のパスを設定しています。ですからそのままでは両方とも X が表示されるのですが、下の場合画像が表示できない場合は別に用意した画像を表示させるスクリプトを加えています。

<img src="../image1.jpg" width="150" height="112" onError="rep_img(3)"

onError="rep_img(3)" というのが、差し替える画像をよびだす部分です。
onErrorは画像の呼び出しに失敗したときに発生します。
rep_imgは呼び出す関数の名前なので好きな名前にかえられます。

注意が必要なのはその次の( )の中の数字です。
画像はページに表示されているものが上から順に番号がつけられています。(勝手についています。そうなんだと理解しましょう。)ですから、このページの場合上から順に 0,1,2 の番号がついています。(0から始まることに注意してください)表示されていないのは 1番 の画像です。2番の画像もそのままでは表示されませんが、上の表のように関数を呼び出してかわりの画像を表示させています。

表示するためのソースです

<function rep_img(i){
image2= new Image( );image2.src=”image2.jpg
switch(i) {
    case 0: document.images[0].src=image2.src;
        break;
    case 1: document.images[1].src=image2.src;
        break;
    case 2: document.images[2].src=image2.src;
        break;

    case 3: document.images[3].src=image2.src;
        break;
    default:break;
        }

image2.jpgが代わりに表示させる画像のファイル名です。
変更するのはこのファイル名を代わりに表示する画像のファイル名にします。もちろん全部同じである必要はないので、いろいろ差し替えることも出来ます。

images[ ]の括弧の中の数字は画像の数にあわせて0から順につけていきます。この場合は3つですが、必要なだけ書き込めばOKです。images[ ]は、はじめから用意されている入れ物のようなものです。配列といいますがきりがないので、「なるものはなる」と割り切ってください。

注意が必要なのは広告が自動で挿入されるプロバイダを使っている方です。自動で挿入された画像にも当然番号はつけられます。だいたいページのトップに表示されますから、0番はその広告になります。

ここの場合がそうですから、このページは0番から4番までの画像があります。

たとえばこのページでも、広告が表示されるなら、スクリプトのなかの番号は 1 からになります。 当然呼び出す部分も変更しなければなりません。

onError="rep_img(3)"の括弧の中の 3 という数字は、この画像がページの中の画像の2番目ですという意味です。


←前ページ トップページ 内容一覧 次ページ→