ページにアクセスするたびにランダムな画像を二枚表示する (ページ構築後に処理)


動作ブラウザ 【 IE:4.0   FF:1.0   Safari:1.0
Internet Explorer Firefox Opera Safari
4.0x 4.5 5.0x 5.5 6.0 7.0 1.0 1.5 2.0 7.x 8.x 9.0 1.x 2.0 3.0
Windows - - -
Macintosh - - -
UNIX - - - - - - - -

ポイント window.onload = function(){ var imgURL = ["images/DSC0001.jpg", "images/DSC0002.jpg", "images/DSC0003.jpg", "images/DSC0004.jpg", "images/DSC0005.jpg", "images/DSC0006.jpg"]; var n = Math.floor(Math.random() * imgURL.length); document.images["photo1"].src = imgURL[n]; n = Math.floor(Math.random() * imgURL.length); document.images["photo2"].src = imgURL[n]; } <img src="images/loading.gif" name="photo1"><br> <img src="images/loading.gif" name="photo2"><br>
説  明 ページにアクセスされるたびランダムに画像を一枚表示するには、あらかじめ表示したい画像のURLを配列に入れておきます。 Math.random()で乱数を発生させ、その値に画像のURLが格納された配列の個数(長さ)を掛けます。この値は小数値になるのでMath.floor()を使って小数値以下を切り捨てます。この得られた番号を配列の参照番号(添字)として指定し画像のsrcに指定します。 スクリプトではページが完全に読み込まれた後に画像を入れ替えています。このようにするとHTML, CSS, JavaScriptを分離することができるためです。その際に、画像を入れ替える画像にはidまたはname属性で固有の名前を指定しておきます。アクセスする場合はidであればdocument.getElementById()で、nameの場合はdocument.images[]を使います。
サンプル <html> <head> <meta http-equiv="content-type" content="text/html;charset=shift_jis"> <title>ページにアクセスするたびにランダムな画像を二枚表示する (ページ構築後に処理)</title> <script type="text/javascript"><!-- window.onload = function(){ var imgURL = ["images/DSC0001.jpg", "images/DSC0002.jpg", "images/DSC0003.jpg", "images/DSC0004.jpg", "images/DSC0005.jpg", "images/DSC0006.jpg"]; var n = Math.floor(Math.random() * imgURL.length); document.images["photo1"].src = imgURL[n]; n = Math.floor(Math.random() * imgURL.length); document.images["photo2"].src = imgURL[n]; } // --></script> </head> <body> <h1>ランダムな画像が二枚表示されます(ページ構築後に処理)</h1> <img src="images/loading.gif" name="photo1"><br> <img src="images/loading.gif" name="photo2"><br> </body> </html>
補足説明 なし

■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!



写真素材 PIXTA