• ベストアンサー

画像を切り替えランダム表示

初めて質問をします。 画像をクリックすると別の画像に切り替わる画像を、ランダムに表示させるにはどうしたらよいでしょうか?教えてください。 Javascript初心者で、どうしてもできず困っています。よろしくお願いします。

  • mei1
  • お礼率33% (1/3)

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

  • ベストアンサー
  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.2

まあ、こんな感じで <script type="text/javascript"> <!-- //クリックしたらランダムに画像を変更する //あらかじめイメージを読み込んでおく var imgs = new Array; var n = 6; //画像の数 var i; for(i=0;i<n;i++){ imgs[i] = new Image(); } imgs[0].src="1.jpg"; //名前は何でもいい imgs[1].src="2.jpg"; imgs[2].src="3.jpg"; imgs[3].src="1.gif"; imgs[4].src="2.gif"; imgs[5].src="3.gif"; function disp(img){ img.src=imgs[Math.round(Math.random()*(n-1))].src; } //--> </script> … <img src="1.jpg" onclick="disp(this)">

その他の回答 (2)

  • yukaself
  • ベストアンサー率45% (22/48)
回答No.3

No1です。 色々と試してみましたが、No.2さんのスプリクトが一番良い方法だと思います。 (私も勉強になりました。ありがとうございました) 書かれたどおり、タグをコピペして一度ご自分で確かめてみてください。 もし何かわからない事があれば聞いてくださいね。 頑張ってください!

mei1
質問者

お礼

迅速な回答ありがとうございました! Javascript、とても難しいですね(汗)これからどんどん勉強してアドバイスできる位になりたいです☆ またお目にかかることがありましたら、よろしくお願いいたします。

  • yukaself
  • ベストアンサー率45% (22/48)
回答No.1

初めまして。 「画像をクリックすると別の画像に切り替わる」というのは、 マウスオーバーで切り替えるという事でしょうか? 私は今の所そういったジャバスプリクトを見た事がないのですが、 どこかのサイトで、それを使用しているの見た事があっての質問でしょうか? もう少し詳しく書いて頂けると調べられると思うのですが・・・ URLのサイトも参考にしてみてください^^

参考URL:
http://myako.net/index.htm
mei1
質問者

補足

ご返答ありがとうございます。 「画像をクリックすると別の画像に切り替わる」というのは、下記アドレスの【★クリックすると画像が変わる】という項目の動作のことです。 http://www.npo-aichi.or.jp/blanca/style/style14.html これを、ページを更新するたびに色々なパターンをランダムに表示させたいのですが、可能でしょうか? 教えて下さい。お願いします。

関連するQ&A

  • 画像のランダム表示

    ページの更新時に画像をランダムに表示し、かつその画像をクリックするとランダムに画像が変わっていくようにしたいのですが・・。 まったくの初心者なので、答えまで教えていただけますと幸甚です。 よろしくお願いいたします。

  • 画像のランダム表示について

    スクリプトに関する質問です。 JavaScriptの「var imglist = new Array」を使って、 閲覧するたびに画像がランダムに変わるようにしたいと思います。 その場合、ランダムに変わる画像を多くしてしまうと、 いったん全部読み込むなどの理由で、ロード時間が長くなるのでしょうか? それともロードの度にひとつだけのファイルを選ぶので変わらないのでしょうか? こちらはたくさんの画像をランダムに表示したいと思っているのですが、 あまり重くなるようなら画像をしぼろうかと考えています。 どなたかお解かりいただければ、ご回答ください。 よろしくお願いします。

  • クリッカブルマップで別フレームにランダムに画像を表示する方法

    クリッカブルマップでクリックするごとに別フレームに複数の画像をランダムに表示させることは可能でしょうか。 具体的にどんなことがしたいかというと、 格闘ゲーム風のキャラクターセレクト画面(1枚の画像)でキャラクターアイコンをクリックすると別のフレームにキャラクターを表示、 ランダムアイコンをクリックすると同じく別のフレームにランダムにキャラクターを表示させたいのです。 前者はなんとかできたんですが、複数ランダムとなるとどうすればいいのかわからず; 色々と調べてはみたのですが思わしいのがなく、 さらに当方それなりのHTML知識しかなく恐らくjavascriptを使うのではと思い、こちらで質問させていただいた次第です。 どなたかお分かりになられる方、助言いただければ幸いです。

  • 画像をランダムに表示させるには?

    パソコン初心者です。。。 デジカメで撮った画像をランダムに表示したいのですが、、、 (よくTVでランダムに画像が表示され、画像が止まった人の物真似をするなどありますよね?) 何かいい方法ありませんか?

  • 画像をランダムに

    JavaScript初心者です。回答していただければさいわいです。 初心者といってもタグサイトからコピペしていじくるだけの者ですが。 画像をランダムに表示したいと思いJavaScriptを使用したのですが うまく表示させることができません。 画像自体表示していないことになってしまいます。 画像を表示させたい部分に <SCRIPT language="JavaScript"> <!-- // img = new Array(); img[0] = "t/1.jpg"; img[1] = "t/2.jpg"; img[2] = "t/3.jpg"; img[3] = "t/4.jpg"; img[4] = "t/5.jpg"; n = Math.floor(Math.random()*img.length); document.write("<img src='"+img[n]+"' border='0'>"); //--> </SCRIPT> とタグをうっているのですが、なにか足りないところがあるのでしょうか?

  • ランダムに表示する画像にリンク

    javascriptで、リロードするたびにランダムに画像を 表示するようにしている(画像は合計5枚)のですが、 ランダムに表示するように用意している画像の一枚一枚に 各画像バラバラのリンク先を設定することというのは可能なのでしょうか? また、可能であるのならその方法をお教え願えませんでしょうか。 よろしくお願い申し上げます。

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

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

  • 画像をランダム表示させたい

    画像を5枚横並びにランダム表示させたいです。 XHTMLとCSSでサイトを制作しようと考えています。 イメージフォルダに複数の画像データを格納、そこからアクセス毎にランダム(同じものが表示されないよう)表示。 画像をクリックすると指定したページにリンク。 下記URLページ右の真ん中あたりにある感じのものです。 http://picpi.net/main.html 方法としてはCGI、Javascriptなどいろいろあると思うのですが、まったくわからない人間です。 参考になるサイト、もしくは答えまで出して頂けると大変助かります。 以下、参考までにサーバ環境です。 perl5.8.、Ruby1.8.、Python2.4.、PHP4.4.、PHP5.1.、MySQL4.0.25、ColdFusion が使えるそうです。

  • 画像のランダム表示について

    下記URLを参考に、画像のランダム表示をしたく思っています。 http://iwantaneff.in/repo/plugins/image-galleries/photofy/ 上記URLの場合、表示された番号の画像をクリックすると、shdowboxのように詳細ページが 表示される仕組になっています。 画像をクリックしたら、別ページに遷移(例のようにポップアップな感じではなく、単純な遷移)させる には、どのようにコードを修正すればよいでしょうか。

  • javascriptでの画像表示について

    javascript初心者です。 画像を一つランダムに表示させ、それをクリックしたらその画像は隠れ、新たに複数枚画像を表示させるプログラムを作りました。 これに、最初の画像をクリックしたらストップウォッチを表示し起動させ、新たに表示された複数枚の画像の中から最初(クリック前)の画像と同じものをクリックしたらストップウォッチが止めるようにしたいです。 jqueryは使用していません。どうすればよいかアドバイス頂けませんでしょうか。

専門家に質問してみよう