予め用意していた画像をリドロー毎にランダムに変更する設定。
※今回から状況に合わせてHTML、CSS、JavaScriptを個別に記述しないケースもあります。
用意した7名の画像（picフォルダー内）
HTMLのソース（今回はHTMLのみ）
--------------------
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<script>
var images = [
'pic/photo01.jpg', 'pic/photo02.jpg', 'pic/photo03.jpg',
'pic/photo04.jpg', 'pic/photo05.jpg', 'pic/photo06.jpg',
'pic/photo06.jpg', ];
//画像のソースをimage配列で定義
//画像のファイルパスは'pic/photo0' + i + '.jpg'としていますが
//実際の画像ファイルパスに置き換えてください。
function getRandomImage() {
var randomIndex = Math.floor(Math.random() * images.length);
// ランダムなインデックスを取得
var image = document.getElementById('myImage');
image.src = images[randomIndex]; // ランダムな画像を表示
}
//getRandomImage()関数は、ランダムなインデックスを生成し、
//そのインデックスに対応する画像を表示する。
</script>
</head>
<body bgcolor="darkgray" onload="getRandomImage()">
<div style="text-align: center">
<img id="myImage" src="" width="400" height="300" />
</div>
<!--タグのonload属性にgetRandomImage()関数を指定することで、
ページがリロードされるとランダムな画像をセンター表示する。
元画像のサイズは400px×300px-->
<br>
</body>
</html>
<!-- index.html -->
--------------------
index.htmlを起動した直後・・・
リドローマイに画像がランダムに切り替わります。
