|
ちょっと差のつくテクニック
JavaScript で遊ぼう
アクセスする度にランダムに異なる画像を表示する
アクセスするたびに、ランダムに異なる画像を表示させます。 トップページのイメージをアクセスするごとに少しづつかえたい場合などに便利です。
設置方法
そして、以下を <body> 以下のマウスを重ねると変化する画像を表示させたいところに貼り付けてください。
適宜、「利用する画像の数」、「画像ファイル名」などの値を変更してください。
下の記述方法ですと、10 個の画像ファイルを用いるようになっていますが、もし、5 個までとかならば、num==4 の部分までを残し、その下の部分を消してください。また、11
個以上をお使いになるようでしたら、num==9 以降に、「else if(num==10) document...」といった記述を追加していってください。
|
<script language="JavaScript">
<!--
var num = Math.floor(Math.random() * 利用する画像の数);
if(num == 0) document.write('<img src="画像ファイル名">');
else if(num == 1) document.write('<img src="画像ファイル名">');
else if(num == 2) document.write('<img src="画像ファイル名">');
else if(num == 3) document.write('<img src="画像ファイル名">');
else if(num == 4) document.write('<img src="画像ファイル名">');
else if(num == 5) document.write('<img src="画像ファイル名">');
else if(num == 6) document.write('<img src="画像ファイル名">');
else if(num == 7) document.write('<img src="画像ファイル名">');
else if(num == 8) document.write('<img src="画像ファイル名">');
else if(num == 9) document.write('<img src="画像ファイル名">');
//-->
</script>
|
下 (↓) のテキストボックス」にランダムに表示する 1〜10 の画像ファイル名をいれて「サンプルを作成する」ボタンを押してください。
自動的にランダムに画像を変化させる HTML が生成されます。「サンプル HTML」の内容をコピーしてお使いください。
|
|
HTMLタグ一覧
| 
FAQ | 
サイトマップ | 
お問い合わせ
