Javascriptでのシャッフルについて質問

このQ&Aのポイント
  • Javascriptでのシャッフルについて質問させていただきます。ホームページでアクセスする度に結果の違う答えを出したいと考えています。
  • シャッフルについて検索はしてみたのですがなかなか希望の答えに辿り着けなかったので・・・
  • ランダムに配置する事は出来ても「当たりを選んでリンク固定」の部分が難しく思います。もし、参考サイトでもあればお教え頂ければ幸いです。
回答を見る
  • ベストアンサー

Javascript シャッフル

Javascript シャッフル Javascriptでのシャッフルについて質問させていただきます。 概要を言いますと ホームページでアクセスする度に結果の違う答えを出したいと考えています。 シャッフルについて検索はしてみたのですが なかなか希望の答えに辿り着けなかったので・・・(涙 条件としては ・三個の画像をランダムで配置。 ・一個当たりで二個がはずれ。 ・画像にマウスを乗せると当たりは当たりの画像。はずれははずれの画像に変更。 ・当たりをクリックするとページに移動。 ※ ・当たりは3種有り、その中のどれか一つ。 ・各当たりそれぞれにリンクは固定。 です。 ランダムに配置する事は出来ても 「当たりを選んでリンク固定」の部分が難しく思います。 もし、参考サイトでもあればお教え頂ければ幸いです。 宜しくお願い致します。

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

  • ベストアンサー
  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.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>

buzinesswa
質問者

お礼

ご返答有難う御座います。 私のしたい事に似ています。 ただ、少し改良したく自分で弄っているのですが中々上手くいかず・・・ マウスオーバーが外れた時、オーバー前の状態に戻す事は可能でしょうか? 後、リンク表示の指のマークは出す事は出来ませんでしょうか? cssなら cursor: pointer !important; cursor: hand; とかの記述で言いと思うのですが Javaは難しいです・・・。 どうか宜しくお願い致します。

buzinesswa
質問者

補足

追記: 今色々変更してみた所、カーソルを指マークに変える事は出来ました!!!

その他の回答 (5)

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.5

 別方法ということで、CSS擬似セレクターを使わずに、javascriptの イベントハンドラーだけを使ってやってみる方法。当然javascript無効 の人の事はいっさい考慮無しです。 (概要) まず、ページロード時に当たり画像とそのリンク先を3個の中からランダムに 決めます。 当たり処理の関数とはずれ処理の関数を作ります。当たり処理の関数では、 先に決めた当たり画像と当たりリンク先をつかうようにします。 当たり処理の関数とはずれ処理の関数配列にいれます。 3枚の画像のそれぞれの、イベントハンドラー関数を関数配列から、ランダムに 決めてリスナー登録します。

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.4

No1です。 >少し私の説明が不足してたようで 参考サイトの代わりに、サンプルとして一例を提示しただけなので、ある程度似ていれば問題はないと思いますが… 説明をしていただくのなら、javascriptがオフの場合にどのように表示したいのかを想定して、行いたいマークアップを最初に提示しておくべきでは? 参考までに、No1の例の場合では、シャッフルは行われず、ホバー時は全部「はずれ」にはなるが、リンクは全て有効という状態になると思います。 画像毎に当りの画像を変えたいのであれば、例のようにCSSを用いる方式の場合は、 (IEでa要素以外にhoverが効かないので)外側に<div>などを加えて、  <div class="image1"><a href="~" class="atari">text</a></div> などのようにしておけば、ほとんど同じ方法のままでそれぞれを書き分けられませんか? あるいは、数が増えると面倒くさくなるので(3個限定なのかも知れませんが)、ホバーの処理もスクリプトで行うようにしてしまう方法もありかと。 どうせなら、 data[i] = ["画像URL1", "画像URL当り", "リンク先URL"] みたいに、可変データはセットで保持しておくのが便利かも知れません。

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.3

No.2です。クリックじゃなくてマウスオーバーでしたね...

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.2

補足を読んでも、意味がよく分からないのは私だけかもしれませんが、 3つの画像を同時にクリックする事は物理的に不可能なので、 最初にクリックされた時、さいころを振って1/3の確立で 当たり判定する。当たりなら、3個の当たり画像のうちのどれかを ランダムに選び、画像をそれにしてリンク先もそれようのにする。 この時、クリックされなかった画像のクリック時の動作を、はずれ画像 表示にセットする。 解釈が違うかも知れないので、コードは書かない。

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

画像とリンク先が固定という意味でいいのですよね?(違ってるかも) 参考サイトでも良いとのことなので、ごく簡単なサンプル。 * ホバーは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>

buzinesswa
質問者

お礼

> 画像とリンク先が固定という意味でいいのですよね? その通りです。 ソースを態々記述いただいて有難う御座います。 大変参考にもなりますし 今から書き込んで解読・理解しながら使ってみたいと思います。 また、他の方法もありましたらご教授下さいませ。

buzinesswa
質問者

補足

ご返信: 上記のソースを利用させて頂きました。 動作も確認したのですが少し私の説明が不足してたようで申し訳御座いません。 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 になります。 当たりは三種有り毎回違うので何度かアクセスしないと全ページには行けない形です。

関連するQ&A

  • JavaScriptを使わずにやりたいのですが

    ホームページ作成の勉強をしています。 独学で本を片手に、あとはインターネット検索でコツコツやっているのですが、 「画像をランダムに切り替える」という、 ホームページを表示するごとに画像ファイル5つの中からランダムで表示画像が変わるJavaScriptを、JavaScriptを使わずにやりたいのですが、やはり他の方法では無理なのでしょうか? 画像がそれなりに大きい為、アニメーションGIFでは、画像が荒くて見れたものではなかった為、JPEG画像を使いたいのですが。 ご指導、よろしくお願いします。

  • 16面パズルを作ったのですが、シャッフルすると解けないパターンが出てしまいます

    ■□□□ □□□□ □□□□ □□□□ ■=空きマス プログラミング初心者です。javascriptの練習にと思い、↑のような16面のパズルを作りました。(正式名称はよくわかりません。マスをずらして絵柄を完成させるアレです) パズルを始める際にマスの並びをシャッフルする、まではできたのですが、一つ問題があり、シャッフルされたマスの並びで絶対に解けないパターンが発生してしまいます。 16面のパズルの解けないパターンというのは、↓の状態から(2)と(1)を入れ替える事が不可能、というものです。 ■(2)(1)(3) (4)(5)(6)(7) (8)(9)(10)(11) (12)(13)(14)(15) 現段階でのシャッフルの方法は、単純に、マス(画像)が正しい順番で並んでいる状態を シャッフル前 ⇒ 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15 とし、これをシャッフルして シャッフル後 ⇒ 14,8,1,7,12,9,3,5,15,2,10,6,4,11,13 のようにランダムな並び順となった配列を作り、それを元に画像を並べていく、というものです。 このシャッフル後の配列をチェックして解けないパターンであればエラーとしたいのですが、どのようなチェックをすれば良いのかがわかりません。数学のカテゴリに質問すべきかとも思いましたが、もしどなたかわかる方いらっしゃいましたら教えて頂けると幸いです。

  • JavaScriptで出来ること

    javascriptでは、次のようなことはできますか? 1, 指定時刻(またはランダムな時刻)に指定の音楽を鳴らす。 2, 指定時刻(またはランダムな時刻)に、既存の画像を指定の画像に切り替える。 3, お絵かき掲示板を設置する javascriptを勉強しようかどうか迷っています。しかし、初心者でも勉強すれば上記のようなプログラムは作れますでしょうか? 具体的には、指定時刻に、たとえば夜の21時に、「21時になりました。」とホームページに喋らせたり、ランダムな時刻に、ランダムなセリフを喋らせたりしたいのです。 また、上記の様なことはすべて、PHPでも可能ですか?

  • JavaScriptでランダムに画像を表示させ、5秒ぐらいで画像は自動

    JavaScriptでランダムに画像を表示させ、5秒ぐらいで画像は自動切換え、さらにその画像にリンク先urlの指定のやり方をわかる方いらっしゃいましたら教えてください。 JavaScriptでランダムに画像を表示、5秒ぐらいで自動切換えまでは過去質問でわかったのですが、その画像にリンクさせる方法をお願い致します。 JavaScriptでランダムに画像を表示、5秒ぐらいで自動切換えまでは http://www.tagindex.com/kakolog/q4bbs/201/360.html こちらの質問内記載のタグを参照させて頂きました。 これに個々の画像にリンクをつけたいのです。 よろしくお願い致します。

  • JavaScriptを使用せず画像をランダムに表示したい

    はじめまして。 私は、Php NukeというCMSを利用してサイトを運営しております。 Php Nukeでは、HTMLを利用してページを表示できるのですが、画像をランダムに表示させたいのですが、 JavaScriptは無効のようで、できません。 つきましては、JavaScriptなしでHTMLに書き込むような形で画像をランダムに表示させたいのです。(またその画像にリンクも貼れればと思います) 或いは、JavaScriptを有効にするように設定?変更ができても可です。 どなたかお知恵をお貸しいただけないでしょうか? よろしくお願いいたします。

  • JavaScriptの事で?

    ホームページビルダー8を使っています。 ロールオーバー効果で画像を入れ替えてリンクを貼るようにしました。 タグを見てみますとJavaScriptのタグがぎっちり書いてあります。 そこで質問なのですが、ホームページビルダーでJavaScriptを外部ファイルにしてそこへとリンクしたいのですが、その方法が分かりません。ちなみにスタイルシートを外部ファイルにして、それをリンクする方法は分かります。 IBMへTELしましたが、タグに関してはサポートはしていないとの事でした。 よろしくお願いします!

  • Javascriptでランダムに画像を表示させ、さらにリンクさせる

    当方、ホームページを作成していまして、 画像をランダムに表示させることはできたのですが、 さらにその画像をクリックにて違うページにリンクさせたいと考えております。 いろいろ検索してみたのですが、明確な回答が見つからなかったもので、、、 どなたかご回答いただけると、大変助かります。 どうぞよろしくお願いいたします。 現時点で、以下の様になっています。 (4枚の画像をランダム表示させ、リンク先は同じ場所を考えています) <script language="JavaScript"> <!-- ranimg = new Array(); ranimg[0]="0.gif"; ranimg[1]="1.gif"; ranimg[2]="2.gif"; ranimg[3]="3.gif"; xx = Math.floor(ranimg.length*Math.random()); ranimg = ranimg[Math.floor(xx)]; document.write('<img src="'+ ranimg +'">'); // --> </script>

  • FIREWORKS使い方 画像を入れ替えるjavascript

    画像を入れ替えるjavascript なんですが、要するにそのリンクの画像にマウスオーバー になった際、色が変わる程度の事なんですが、 どれをどのようにし、(機能等)HTMLで切り出すそうですが、 手順を教えてください。 よろしくお願いいたします。

  • JavaScriptでwindowopenを使用したとき

    ホームページビルダー7を使ってHP作成中ですが、JavaScriptでwindowopenを使用してページを表示することまでは出来たんです(一晩もかけて(T_T))プレビューでは表示されますがサイトを転送してみるとリンクされていません。ビルダーの「サイトのビジュアルを開く」で見てみてもやはりリンクされていません。タグが間違っているのでしょうか?ファイルはもちろん同じフォルダにあります。 <SCRIPT Language="JavaScript"> <!-- function nwn(url) { w = window.open(url, 'win01','width=350,height=600,status=0,scrollbars=1,directories=0,menubar=0,resizable=1,toolbar=0');} //--> </SCRIPT> <A HREF="javascript:nwn('link.htm')">○○○○</A>です。 ビルダーのプレビュー画面で、リンクされている文字や画像の上にマウスを乗せると画面上部にリンクされているファイル名が表示されますが、リンクがうまくいかないこの分に関してはマウスを上に乗せると javascript:nwn('link.htm')と表示します。 どなたかアドバイスお願いいたします。(T_T)/~~~

  • javascriptの下に空白ができる

    いつもお世話になっております。 ランダムに画像が表示されるjavascriptを作っており、無事に表示はされるのですが、そのランダム画像の下にテーブルを配置し、別の画像(javascriptを使っていない固定画像)をぴったりくっつけたいのですが、3ピクセルくらいの空白ができてしまいます。 Opera、Firedoxでは空白ができず、IEでのみできます。 何が悪いのでしょうか? 下記にタグを書かせていただきます。 <Script language="JavaScript"><!-- myImg = new Array() myImg[0] = "img1.jpg"; myImg[1] = "img2.jpg"; myImg[2] = "img3.jpg"; //--></Script> </HEAD> <BODY background="img/back.gif"> <SCRIPT language="JavaScript"><!-- i = Math.floor(Math.random()*);document.write("<img src="+myImg[i]+">");//--></SCRIPT> <table width="700" border="0"cellpadding="0" cellspacing="0"><th align="left" valign="top" scope="col"><img src="number1.gif" width="151" height="40" /> number1.gifがぴったりくっつけたい画像です。 以前FLASHを使用したページでも上記のようなことが起こり、教えて頂いて解決したので、(→ http://oshiete1.goo.ne.jp/qa4010291.html です。)同じようにやってみたのですが、ダメでした。 環境はWindows XP、使用ソフトはDreamweaver8です。 申し訳ありませんが、お助けいただけるとありがたいです。 よろしくお願いします。