JavaScriptでランダムな画像を表示しよう!
こんにちは!今日は、JavaScriptを使って、アクセス毎に違った画像が表示されるページを作りませんか?マウスを重ねると、毎回違った絵が楽しめます。HPのトップページに使うと、雰囲気が変わりますし、アクセスする人が楽しんでくれそうですよね(^^) 他のHPと、ちょっとのことで差がつきますよ!
設置方法は簡単です☆ 以下を <body> 以下のマウスを重ねると変化する画像を表示させたいところにペーストしてください。
「利用する画像の数」、「画像ファイル名」などの値をお好みでチェンジしてくださいね。
下の方法は、7個の画像ファイルを用いるようになっていますが、もし、5 個までとかならば、num==4 の部分までを残し、その下の部分を消してください。また、8個以上をお使いになるようでしたら、num==6以降に、「else if(num==7) 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=”画像ファイル名”>’);
//–>
</script>