画像付きでランダムメッセージを表示させる方法をご紹介します。
このサイトのヘッダー右上のギミックがそうです！
今回はそちらをサンプルに説明していきたいと思います。
ランダム表示させたい所に下記htmlソースを設置します。
【HTML】
|
1 2 3 4 5 6 |
<div id="randomBanner"></div> <script type="text/javascript" src="●/random.js"></script> <script type="text/javascript"> var rNo = Math.floor(Math.random() * lists.length); document.getElementById('randomBanner').innerHTML = lists[rNo]; </script> |
（※jsへのパスは変更して下さい。）
次に以下のソースを外部スクリプトとして「randam.js」とか適当に名前をつけて保存します。
【javascript】
|
1 2 3 4 5 6 7 8 |
var lists=[ '<img src="画像のパス" alt="メッセージ" /><p>解決方法が見つからない…。<br />この苦行は一体いつまで続くのか…。</p>', '<img src="画像のパス" alt="メッセージ" /><p>詰んだ・・・・。</p>', '<img src="画像のパス" alt="メッセージ" /><p>俺は魔法使いじゃねぇ。</p>', '<img src="画像のパス" alt="メッセージ" /><p>そもそもこの機能は最初っからあっても良いのでは！？<br />（いえ嘘です、すいません…）<br />', '<img src="画像のパス" alt="メッセージ" /><p>今日も会社で、<br />ジェットストリームか…。</p>', '<img src="画像のパス" alt="メッセージ" /><p>待て―ぃ！<br />それは後出しジャンケンだ！</p>' ]; |
後は表示する画像を指定したディレクトリに用意して、好きなメッセージを入力して下さい。
ブラウザをリロードする度に、ランダムで画像が切り替わるはずです。
