締切済み

リロードさせるたびに画像を変えるには？

2010/09/08 01:34

リロードさせるたびに画像を変えるには？ html+cssでHPを作ってますが、一番上の目立つところに横長の写真を置いてます。これをアクセスする度に変わるようにできる方法を知ってる人はいますか？とりあえず３枚の画像でやってみたいんですが、ランダム表示でもかまいません。よろしくお願いします。

baka_nande
お礼率46% (21/45)

HTML
回答数4
ありがとう数5

みんなの回答 （4）
専門家の回答

みんなの回答

yyr446
ベストアンサー率65% (870/1330)

2010/09/08 13:46 回答No.4

補足、「古いブラウザーはcookieを使う」の追加分 //--------------------------------------------------- 　if ('undefined' !== typeof localStorage){ 　 if(localStorage.gazou_number) 　　 pre_gazou_number=localStorage.gazou_number; 　}else{ 　 if(Getcookie('gazou_number')) 　　 pre_gazou_number=getCookie('gazou_number'); 　} //--------------------------------------------------- 　if ('undefined' !== typeof localStorage) 　 localStorage.gazou_number=gazou_number; 　else setCookie('gazou_number',gazou_number); //--------------------------------------------------- function Getcookie(key){ 　var value = document.cookie.match(RegExp(name+'\\s*=\\s*(.*?)(?:[\\s;,]|$)')); 　return value?value[1]:''; } function Setcookie(key,val){ 　document.cookie = key+"="+val; 　document.cookie = ";expires=" + Date(2099,12,31).toGMTString; }

yyr446
ベストアンサー率65% (870/1330)

2010/09/08 12:21 回答No.3

毎回必ず異なる画像になるサンプル。（javascriptが無効な場合も考慮：その場合は切り替わらないが） <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Test</title> <style type="text/css"></style> <script type="text/javascript"> if('undefined' !== typeof document.addEventListener) 　window.addEventListener('load',function(){func();},false); else if ('undefined' !== typeof document.attachEvent) 　window.attachEvent('onload',function(){func();}); function func(){ 　var gazoulist=['gazou1.jpg','gazou2.jpg','gazou3.jpg']; 　var gazou_number = 0; 　var pre_gazou_number = 0; 　if ('undefined' !== typeof localStorage){ 　 if(localStorage.gazou_number) 　　 pre_gazou_number=localStorage.gazou_number; 　} 　while(gazou_number == pre_gazou_number) 　 gazou_number = Math.floor(Math.random()*gazoulist.length); 　 document.getElementById("gazo").src=gazoulist[gazou_number]; 　if ('undefined' !== typeof localStorage) 　 localStorage.gazou_number=gazou_number; } </script> </head> <body> <p>TOP画像<br> <img id="gazo" alt="Top画像" src="gazou1.jpg"> </p> </body> </html> localStorageが無いブラウザーはCookieで同様の事をする！見やすくするため全角空白を使用してます。半角空白にしてね！