ベストアンサー

４つの「画像＋テキスト」をアクセス毎に順番を変える

2009/03/11 17:17

いつも参考にさせていただいております！ <div id="bana1"> 画像テキスト </div> <div id="bana2"> 画像テキスト </div> <div id="bana3"> 画像テキスト </div> <div id="bana4"> 画像テキスト </div> のdiv要素をアクセス毎に順番を変えて表示したいのですが、方法が分からず、質問させていただきました。画像の入れ替えなどの記事も参考にさせていただいたのですが、あてはまらず、こまってしましました。どうかよろしくお願い申し上げます。

yajizou
お礼率66% (16/24)

JavaScript
回答数6
ありがとう数6

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

質問者が選んだベストアンサー

ベストアンサー

noname#84373

2009/03/12 09:47 回答No.3

nodeをこんなふうに弄ってよいものか、わかりません。上級者の方にゆだねたい^^; <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>set select?</title> <ul id="p0"> 　<li class="t0"> 　　<img src="./img/0.gif"> 　　かくかくしかじか新登場！　</li> 　<li class="t1"> 　　<img src="./img/1.gif"> 　　かくかくしかじか新登場！　</li> 　<li class="t2"> 　　<img src="./img/2.gif"> 　　かくかくしかじか新登場！　</li> 　<li class="t3"> 　　<img src="./img/3.gif"> 　　かくかくしかじか新登場！　</li> 　<li class="t4"> 　　<img src="./img/4.gif"> 　　かくかくしかじか新登場！　</li> </ul> <p><em>全角空白は、タブまたは半角空白に変換のこと</em></p> <script type="text/javascript"> //@cc_on //全角空白は、タブまたは半角空白に変換のこと /*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'load', 　function () { 　　var tg = document.getElementById('p0'); 　　var li = []; 　　var no = []; 　　var max = tg.childNodes.length; 　　var o; 　　var i; 　　　　for (i = 0; i < max; i++) li.push(tg.removeChild(tg.firstChild)); 　　if( (o = getCookie('RList')) ) no = o.split(','); 　　if (no.length != li.length) no = []; 　　if (!no.length) { 　　　for (i = 0; i < max; no.push(i++)) ; 　　　no = no.sort(function () { return Math.random() > 0.5 ? 1 : -1 }); 　　} 　　for (i = 0; i < max; i++) tg.appendChild(li[no[i]]); 　　no.push(no.shift()); 　　setCookie('RList', no.join(','), 1); 　} , false); function getCookie( name ) { 　name = encodeURIComponent( name ).replace( /([.*()])/g, '\\$1' ); 　var value = document.cookie.match( RegExp ( name + '\\s*=\\s*(.*?)(?:[\\s;,]|$)' ) ); 　return value ? decodeURIComponent( value[1] ) : ''; } function setCookie ( name, value, day, path, domain ) { 　return document.cookie = encodeURIComponent( name ) + '=' + encodeURIComponent( value ) + 　　'; ' + 'expires=' + new Date( (new Date) - 86400000 * -day ).toUTCString() + 　　'; ' + ( path ? 'path=' + encodeURI( path ) + '; ': '' ) + 　　( domain ? 'domain=' + encodeURI ( domain ) + '; ': ''); } </script>

質問者

お礼 2009/03/12 14:51

_pipi_さん　ありがとうございました！おかげさまで、できました！ブロック要素を <div class="t0" id="bana1"> <h2>h2title</h2> <p>説明文</p> <img src="画像パス" /> </div> とカスタマイズさせていただいてもできました。本当にありがとうございました。

ログインすると、全ての回答が全文表示されます。

その他の回答 (5)

fujillin
ベストアンサー率61% (1594/2576)

2009/03/12 12:07 回答No.6

No2の補足が＞しかし、これではがぞうだけですよね。＞画像とテキストを含んだDIV要素をランダムに表示したいので・・・だったので、No4は、その部分のみの参考例です。（DIV要素をランダムに表示）全機能をスクリプト化したものではありません。　念のため…　^^;ゞ

質問者

お礼 2009/03/12 14:53

fujillinさん！何度もありがとうございます。わたくし初心者なもので、_pipi_さんが紹介していただいたものを参考にさせていただきました。本当にありがとうございました！

ログインすると、全ての回答が全文表示されます。

noname#84373

2009/03/12 10:47 回答No.5

fujillinさん！それだと１個だけランダム表示。

ログインすると、全ての回答が全文表示されます。

fujillin
ベストアンサー率61% (1594/2576)

2009/03/12 10:14 回答No.4

No2です。＞しかし、これではがぞうだけですよね。画像も<div>も同様に要素として扱えるので、同じ処理でできます。便宜上「画像」という書き方をさせていただきましたので、画像を<div>要素と読み替えていただければよろしいかと思います。＜以下参考例＞ <html> <style type="text/css"> #banner div {display:none;} #banner div img{width:100; height:100; border:1px solid lightgrey;vertical-align:middle; background-color:Honeydew;} </style> <script type="text/javascript"> window.onload = function() { var ban = document.getElementById('banner').getElementsByTagName('DIV'); ban[Math.floor(Math.random() * 4)].style.display = 'block'; } </script> <body> <div id="banner"> <div>くまさん：<img src=""></div> <div>とらさん：<img src=""></div> <div>ぞうさん：<img src=""></div> <div>とりさん：<img src=""></div> </div> </body> </html>

ログインすると、全ての回答が全文表示されます。

fujillin
ベストアンサー率61% (1594/2576)

2009/03/11 21:07 回答No.2

手順としては以下のような感じ。 1）クッキーを読む 2）ある場合：　+1して、表示画像番号を決める 3）ない場合：　ランダムで表示画像番号を決める（？） 4）番号によって表示する画像をセット 5）表示画像の番号をクッキーに保存各手順くらいに分解して、検索すれば、たくさんヒットすると思います。

質問者

補足 2009/03/11 23:49

fujillinありがとうございます！しかし、これではがぞうだけですよね。画像とテキストを含んだDIV要素をランダムに表示したいので・・・ランダムバナー等で検索してもこの要素をランダムにってところがカスタマイズできなくて・・・よろしくお願い申し上げます。

ログインすると、全ての回答が全文表示されます。

Seravy
ベストアンサー率47% (118/249)

2009/03/11 17:31 回答No.1

アクセスごと・・ということは、初回アクセス時はバナー1、次にアクセスしてきた時はバナー2・・という感じですか？画面転移をまたいで変数を手軽に共有するなら、Cookieを利用するのが便利です。クッキーに値が無い場合、1を保存しておき、次回アクセスしたとき+1をしていけば判別できますね。 Cookieの使い方は、各JavaScript解説サイトを参照してみてください。

質問者