- ベストアンサー
４つの「画像＋テキスト」をアクセス毎に順番を変える
いつも参考にさせていただいております！ <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）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
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>
その他の回答 (5)
- fujillin
- ベストアンサー率61% (1594/2576)
No2の補足が ＞しかし、これではがぞうだけですよね。 ＞画像とテキストを含んだDIV要素をランダムに表示したいので・・・ だったので、No4は、その部分のみの参考例です。（DIV要素をランダムに表示） 全機能をスクリプト化したものではありません。 念のため… ^^;ゞ
お礼
fujillinさん！何度もありがとうございます。 わたくし初心者なもので、_pipi_さんが紹介していただいたものを参考にさせていただきました。 本当にありがとうございました！
fujillinさん！それだと１個だけランダム表示。
- fujillin
- ベストアンサー率61% (1594/2576)
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)
手順としては以下のような感じ。 1）クッキーを読む 2）ある場合： +1して、表示画像番号を決める 3）ない場合： ランダムで表示画像番号を決める（？） 4）番号によって表示する画像をセット 5）表示画像の番号をクッキーに保存 各手順くらいに分解して、検索すれば、たくさんヒットすると思います。
補足
fujillinありがとうございます！ しかし、これではがぞうだけですよね。 画像とテキストを含んだDIV要素をランダムに表示したいので・・・ ランダムバナー等で検索してもこの要素をランダムにってところが カスタマイズできなくて・・・ よろしくお願い申し上げます。
- Seravy
- ベストアンサー率47% (118/249)
アクセスごと・・ということは、初回アクセス時はバナー1、次にアクセスしてきた時はバナー2・・という感じですか？ 画面転移をまたいで変数を手軽に共有するなら、Cookieを利用するのが便利です。 クッキーに値が無い場合、1を保存しておき、次回アクセスしたとき+1をしていけば判別できますね。 Cookieの使い方は、各JavaScript解説サイトを参照してみてください。
補足
Seravyさん、返信ありがとうございます！ 初回アクセス時からランダムにしたいと思っております。 サンプルなどをご紹介していただくと非常に助かります！ よろしくお願い申し上げます。
お礼
_pipi_さん ありがとうございました！ おかげさまで、できました！ブロック要素を <div class="t0" id="bana1"> <h2>h2title</h2> <p>説明文</p> <img src="画像パス" /> </div> とカスタマイズさせていただいてもできました。 本当にありがとうございました。