複数の画像リンクからランダムに1つを表示する方法(4ページ目)

3. 作ったJavaScript(関数)を呼び出して表示する

それでは、前ページまでに作成したJavaScriptを使って、実際に「ランダムに選ばれた1つの画像リンク」をウェブページ上に表示させましょう。方法は簡単で、以下のようにHTMLソースを記述するだけです。

<script type="text/javascript"><!--
   RandomImageLink();
// --></script>

上記のHTMLソースを記述した箇所に、「ランダムに選ばれた1つの画像リンク」が表示されます。この3行は、head要素内に書いてはいけません。body要素内の、画像を表示させたい位置に書いて下さい。

なお、上記のHTMLに続けて、以下のような「JavaScriptが使えない環境で閲覧された場合」のための記述も加えておきましょう。

<noscript>
   <p><a href="list.html">お勧めリストへ</a></p>
</noscript>

noscript要素の内容は、スクリプトが実行できない環境でのみ表示されます。上記では、お勧めしたいページのリストを記述した「list.html」というページがあるとして、そこへのリンクを表示させています。 スクリプトが実行できない場合でも、必要な情報(ページ)へ誘導できるように書いておきましょう。

ソースのまとめと装飾

以上で、「ランダムに選ばれた1つの画像リンクを作る」作業は完了です。

最後に、すべてのソースをまとめて掲載しておきます。コピー＆ペーストして使ってみる際などにご活用下さい。また、冒頭でご紹介したサンプルページのように表示される装飾(スタイルシートソース)も加えてありますので、参考にして下さい。

それでは、すべてのソースのまとめを見てみましょう。