- ベストアンサー
Javascriptでのシャッフルについて質問
- Javascriptでのシャッフルについて質問させていただきます。ホームページでアクセスする度に結果の違う答えを出したいと考えています。
- シャッフルについて検索はしてみたのですがなかなか希望の答えに辿り着けなかったので・・・
- ランダムに配置する事は出来ても「当たりを選んでリンク固定」の部分が難しく思います。もし、参考サイトでもあればお教え頂ければ幸いです。
- buzinesswa
- お礼率42% (50/117)
- JavaScript
- 回答数6
- ありがとう数5
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
No.5のサンプルコード <body> －－－－－－－－－－－－－－－ <img src="/image01.jpg" alt"image01" class="kuji"> <img src="/image02.jpg" alt"image02" class="kuji"> <img src="/image03.jpg" alt"image03" class="kuji"> －－－－－－－－－－－－－－－ <script type="text/javascript"> (function (){ var data=[["/atari1.jpg","atari1.html"], ["/atari2.jpg","atari2.html"], ["/atari3.jpg","atari3.html"]]; //当たり画像を選ぶ var atari_data = data[Math.floor(Math.random() * 3)]; //当たり処理関数 var atari = function(event){ var target = event.target; switch (event.type){ case 'mouseover': target.src = atari_data[0]; target.alt = "atarigazo"; return; case 'click': window.open(atari_data[1],"_blank"); return; } } //はずれ処理関数 var hazure = function(event){ var target = event.target; switch (event.type){ case 'mouseover': target.src = "/hazure.jpg"; target.alt = "hazuregazo"; return; } } var handler = [atari,hazure,hazure]; //ハンドラー関数をシャッフル var c = handler.length; while(c){ var j = Math.floor(Math.random()*c); var t = handler[--c]; handler[c] = handler[j]; handler[j] = t; } //リスナー登録 var imgs = document.querySelectorAll("img.kuji"); for(var i=0;i<imgs.length;i++){ imgs[i].addEventListener("mouseover",handler[i],false); imgs[i].addEventListener("click",handler[i],false); } })(); //kuji(); </script> </body>
その他の回答 (5)
- yyr446
- ベストアンサー率65% (870/1330)
別方法ということで、CSS擬似セレクターを使わずに、javascriptの イベントハンドラーだけを使ってやってみる方法。当然javascript無効 の人の事はいっさい考慮無しです。 （概要） まず、ページロード時に当たり画像とそのリンク先を３個の中からランダムに 決めます。 当たり処理の関数とはずれ処理の関数を作ります。当たり処理の関数では、 先に決めた当たり画像と当たりリンク先をつかうようにします。 当たり処理の関数とはずれ処理の関数配列にいれます。 ３枚の画像のそれぞれの、イベントハンドラー関数を関数配列から、ランダムに 決めてリスナー登録します。
- fujillin
- ベストアンサー率61% (1594/2576)
No1です。 ＞少し私の説明が不足してたようで 参考サイトの代わりに、サンプルとして一例を提示しただけなので、ある程度似ていれば問題はないと思いますが… 説明をしていただくのなら、javascriptがオフの場合にどのように表示したいのかを想定して、行いたいマークアップを最初に提示しておくべきでは？ 参考までに、No1の例の場合では、シャッフルは行われず、ホバー時は全部「はずれ」にはなるが、リンクは全て有効という状態になると思います。 画像毎に当りの画像を変えたいのであれば、例のようにCSSを用いる方式の場合は、 （ＩＥでa要素以外にhoverが効かないので）外側に<div>などを加えて、 <div class="image1"><a href="～" class="atari">text</a></div> などのようにしておけば、ほとんど同じ方法のままでそれぞれを書き分けられませんか？ あるいは、数が増えると面倒くさくなるので（3個限定なのかも知れませんが）、ホバーの処理もスクリプトで行うようにしてしまう方法もありかと。 どうせなら、 data[i] = ["画像URL1", "画像URL当り", "リンク先URL"] みたいに、可変データはセットで保持しておくのが便利かも知れません。
- yyr446
- ベストアンサー率65% (870/1330)
No.2です。クリックじゃなくてマウスオーバーでしたね...
- yyr446
- ベストアンサー率65% (870/1330)
補足を読んでも、意味がよく分からないのは私だけかもしれませんが、 3つの画像を同時にクリックする事は物理的に不可能なので、 最初にクリックされた時、さいころを振って1/3の確立で 当たり判定する。当たりなら、３個の当たり画像のうちのどれかを ランダムに選び、画像をそれにしてリンク先もそれようのにする。 この時、クリックされなかった画像のクリック時の動作を、はずれ画像 表示にセットする。 解釈が違うかも知れないので、コードは書かない。
- fujillin
- ベストアンサー率61% (1594/2576)
画像とリンク先が固定という意味でいいのですよね？（違ってるかも） 参考サイトでも良いとのことなので、ごく簡単なサンプル。 * ホバーはCSSのホバーで行っています。背景画像の変更で可能。 （背景色も指定してありますが、画像があれば不要でしょう） * スクリプトで行っているのは、画像のシャッフルと、atari（クラス名）の設定 及びクリックイベント時にatariでない場合は、クリックをキャンセル * シャッフルには以下の方法を使用 http://la.ma.la/blog/diary_200608300350.htm <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> div#images a { display:inline-block; width:150px; height:150px; margin-right:20px; background-color:#def; text-decoration:none; border:1px solid #00f; } div#images a:hover { background-color:#aaf; background-image:url(hazure.gif); } div#images a.atari:hover { background-color:#fdd; background-image:url(atari.gif); } div#images a.image1 { background-image:url(A.gif); } div#images a.image2 { background-image:url(B.gif); } div#images a.image3 { background-image:url(C.gif); } </style> </head> <body> <div id="images" onclick="test(event)"> <a href="http://www.yahoo.co.jp/" class="image1">画像1</a> <a href="http://www.google.co.jp/" class="image2">画像2</a> <a href="http://www.bing.com/" class="image3">画像3</a> </div> <script type="text/javascript"> <!-- (function(rnd){ var elm = document.getElementById("images").getElementsByTagName("a"); var i, j, tmp, e = [], n = elm.length; for (i=0; i<n;) e.push(elm[i++]); //シャッフル for (i=0; i<n; i++) { j = rnd(n), tmp = e[j], e[j] = e[i], e[i] = tmp; } tmp = tmp.parentNode; for (i=0; i<n;) tmp.appendChild(e[i++]); //当りをセット elm[rnd(n)].className += " atari"; })(function(n) { return Math.floor(Math.random() * n); }); function test(evt) { var t = evt.target || evt.srcElement; if (t.nodeName != "A" || t.className.match(/ atari$/)) return; if (evt.preventDefault) evt.preventDefault(); else evt.returnValue = false; } //--> </script> </body> </html>
お礼
> 画像とリンク先が固定という意味でいいのですよね？ その通りです。 ソースを態々記述いただいて有難う御座います。 大変参考にもなりますし 今から書き込んで解読・理解しながら使ってみたいと思います。 また、他の方法もありましたらご教授下さいませ。
補足
ご返信： 上記のソースを利用させて頂きました。 動作も確認したのですが少し私の説明が不足してたようで申し訳御座いません。 HPの素材を元に書いてみます。 ・待機A.jpg ・待機B.jpg ・待機C.jpg ・当たりA.jpg（＝http://www.yahoo.co.jp/） ・当たりB.jpg（＝http://www.google.co.jp/） ・当たりC.jpg（＝http://www.bing.com/） ・はずれ.jpg ※ 当たりリンクは各素材固定 ページアクセス時には 待機A、待機B、待機Cが配置。（少し絵柄が違う箱をランダム） 中身は当たりが一つ、はずれが二つ。 マウスオーバー時、はずれの場合にははずれ.jpgに、当たりなら当たりA or 当たりB or 当たりC になります。 当たりは三種有り毎回違うので何度かアクセスしないと全ページには行けない形です。
お礼
ご返答有難う御座います。 私のしたい事に似ています。 ただ、少し改良したく自分で弄っているのですが中々上手くいかず・・・ マウスオーバーが外れた時、オーバー前の状態に戻す事は可能でしょうか？ 後、リンク表示の指のマークは出す事は出来ませんでしょうか？ cssなら cursor: pointer !important; cursor: hand; とかの記述で言いと思うのですが Javaは難しいです・・・。 どうか宜しくお願い致します。
補足
追記： 今色々変更してみた所、カーソルを指マークに変える事は出来ました！！！