java scriptで複数の画像とテキストをがランダムに入れ替わるように表示させたいです。

画像だけはhttp://q.hatena.ne.jp/1202909655を参照させて頂いて、無事入れ替わるようになりましたが、
テキストをいろいろ入れてみてもどうしても画像だけが動いて、テキストは残ってしまいます。。。
画像とそれぞれのテキストとが一緒に動くためには、どこにテキストを入れたらいいのでしょうか。

もう一つ、同じページにインフレームで2カ所(またはそれ以上)表示させたいと思うのですが
一カ所だけしか動きません。複数箇所動くようにすることは可能でしょうか?
どなたかご教授くださいm(_ _)m
よろしくお願いいたします。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2011/10/19 09:35:52
  • 終了:2011/10/19 16:43:57

ベストアンサー

id:tdoi No.1

tdoi回答回数174ベストアンサー獲得回数752011/10/19 12:40:03

ポイント80pt

前質問の1つ目の方をちょっとアレンジしただけですが、画像とURLと文字をセットとして扱うなら、こんな感じです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <script type="text/javascript">
      var images = {
        // 画像とジャンプ先のURLとキャプションの定義
        url : [
          ['hatena.gif', 'http://www.hatena.ne.jp', 'あいうえおあいうえお'],
          ['yahoo.gif',  'http://www.yahoo.co.jp',  'かきくけこかきくけこ'],
          ['google.png', 'http://google.com',       'さしすせそさしすせそ']
          ],
        // 順番のシャッフル
        shuffle : function() {
          for (i = this.url.length; i > 0; --i) {
            tmp = this.url[p = Math.floor(Math.random()*i)] ;
            this.url[p] = this.url[i-1] ;
            this.url[i-1] = tmp ;
          }
        },
        p : 0, // 表示画像のポインタ
        // 画像表示
        put : function() {
          // 画像とキャプションの表示させ方を変える場合は以下を編集
          document.write('<div>' + this.url[this.p][2] + '</div>');
          document.write('<a href="'+this.url[this.p][1]+'"><img src="'+this.url[this.p++][0]+'" /></a>') ;
          if (this.p >= this.url.length) this.p = 0 ;
        }
      };
      images.shuffle() ;
    </script>
  </head>
  <body>
    <div>
      <!-- 表示させたいところに ↓ これを挿入 -->
      <script type="text/javascript">images.put();</script>
    </div>
    <div>
      <script type="text/javascript">images.put();</script>
    </div>
    <div>
      <script type="text/javascript">images.put();</script>
    </div>
  </body>
</html>

インフレームとは、インラインフレームのことでしょね?

どううまく動かないのか分かりませんが、上記のファイルをp1.html、p2.htmlとして保存しておき、以下のようなページを開くと、それぞれが独立にランダムに表示されます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
  </head>
  <body>
    <iframe src="p1.html"></iframe>
    <iframe src="p2.html"></iframe>
  </body>
</html>

こっちの方はもう少し詳しく状況を教えてもらえると、何かコメントできるかと思います。

何かの参考になれば。

その他の回答(2件)

id:tdoi No.1

tdoi回答回数174ベストアンサー獲得回数752011/10/19 12:40:03ここでベストアンサー

ポイント80pt

前質問の1つ目の方をちょっとアレンジしただけですが、画像とURLと文字をセットとして扱うなら、こんな感じです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <script type="text/javascript">
      var images = {
        // 画像とジャンプ先のURLとキャプションの定義
        url : [
          ['hatena.gif', 'http://www.hatena.ne.jp', 'あいうえおあいうえお'],
          ['yahoo.gif',  'http://www.yahoo.co.jp',  'かきくけこかきくけこ'],
          ['google.png', 'http://google.com',       'さしすせそさしすせそ']
          ],
        // 順番のシャッフル
        shuffle : function() {
          for (i = this.url.length; i > 0; --i) {
            tmp = this.url[p = Math.floor(Math.random()*i)] ;
            this.url[p] = this.url[i-1] ;
            this.url[i-1] = tmp ;
          }
        },
        p : 0, // 表示画像のポインタ
        // 画像表示
        put : function() {
          // 画像とキャプションの表示させ方を変える場合は以下を編集
          document.write('<div>' + this.url[this.p][2] + '</div>');
          document.write('<a href="'+this.url[this.p][1]+'"><img src="'+this.url[this.p++][0]+'" /></a>') ;
          if (this.p >= this.url.length) this.p = 0 ;
        }
      };
      images.shuffle() ;
    </script>
  </head>
  <body>
    <div>
      <!-- 表示させたいところに ↓ これを挿入 -->
      <script type="text/javascript">images.put();</script>
    </div>
    <div>
      <script type="text/javascript">images.put();</script>
    </div>
    <div>
      <script type="text/javascript">images.put();</script>
    </div>
  </body>
</html>

インフレームとは、インラインフレームのことでしょね?

どううまく動かないのか分かりませんが、上記のファイルをp1.html、p2.htmlとして保存しておき、以下のようなページを開くと、それぞれが独立にランダムに表示されます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
  </head>
  <body>
    <iframe src="p1.html"></iframe>
    <iframe src="p2.html"></iframe>
  </body>
</html>

こっちの方はもう少し詳しく状況を教えてもらえると、何かコメントできるかと思います。

何かの参考になれば。

id:uwao No.2

uwao回答回数171ベストアンサー獲得回数362011/10/19 14:40:37

ポイント40pt

JavaScriptではありませんが、下記が簡単なように思います。

http://www.chama.ne.jp/download/etc/randum/index.htm

フリーソフトですし、画像や文字をランダムに表示出来るので良いように思います。

id:nini318313

自分ではもう無理かもと思ってこういうのを探したんですけど見つけられませんでした。

教えてくださってどうもありがとうございます!

2011/10/19 16:42:46
id:Cherenkov No.3

Cherenkov回答回数1502ベストアンサー獲得回数4922011/10/19 15:41:45

ポイント80pt

コメント2の回答

document.write('<div>' + this.url[this.p][2] + '</div>');
document.write('<a href="'+this.url[this.p][1]+'"><img src="'+this.url[this.p++][0]+'" /></a>') ;
を

document.write('<a href="'+this.url[this.p][1]+'"><img src="'+this.url[this.p][0]+'" /></a>') ;
document.write('<div>' + this.url[this.p++][2] + '</div>');

個人的には動作イメージとなるHTMLを提示してそれに合わせてJavaScriptを書き直したほうが保守しやすいと思います。

(表示させたいところにいちいち<scriptを書いたりdocument.writeを使うのはモダンではない)

  • id:Cherenkov
    現在のコードを提示するべきです。
    以下のサイトは無料でコードをオンライン共有できます。
    https://gist.github.com/
    http://jsfiddle.net/
  • id:nini318313
    ありがとうございました!!出来ました~!!
    そして、Cheronkovさんのご指摘どおりコードを見て頂こうと思って余計なものを省いたりしていたら</STYLE>が1個余分に入っていたことに気がつき、それを消したらどちらのインラインフレームも動きました!
    余計なお手間を取らせてしまってごめんなさい。

    もう一つだけお恥ずかしながらわからないことがあります…。
    教えて頂いたものだと、画像の上にテキストが来ますよね。
    これをテキストの下側に来るようにしたいときには

    document.write('<div>' + this.url[this.p][2] + '</div>');
    document.write('<a href="'+this.url[this.p][1]+'"><img src="'+this.url[this.p++][0]+'" /></a>') ;

    をどのようにすればよいのでしょうか。
    いろいろ調べてがんばってみたんですけどこんなことがわからなくて…
    すみませんがもしお時間ありましたらよろしくお願いいたします。



  • id:tdoi
    画像の下に文字列を配置したいのなら、

    document.write('<a href="'+this.url[this.p][1]+'"><img src="'+this.url[this.p++][0]+'" /></a>') ;
    document.write('<div>' + this.url[this.p][2] + '</div>');

    とすれば多分大丈夫ですよ。

    <script type="text/javascript">images.put();</script>

    と書いておくと、この部分に、document.write(XXXXX);と書いた順に表示されると思ってください。
    上記のように書いた場合は、

    <a href="リンクURL"><img src="画像URL" /></a>
    <div>文字列</div>

    となります。
    文字列を例えば、<p>タグで囲みたいとかであれば、

    document.write('<p>' + this.url[this.p][2] + '</p>');

    としてもらえれば。

  • id:Cherenkov
    >とすれば多分大丈夫ですよ。
    インクリメントでポインタを増加させているので大丈夫ではないです。
  • id:nini318313
    ありがとうございます(;_;)
    出来ました!!!
    ご親切に教えてくださって本当にありがとうございました。
  • id:nini318313
    ごめんなさい、よく確認してみたら画像とテキストがそれぞれバラバラに動いているみたいです。


  • id:tdoi
    あ、ホントだ。
    Cherenkovさん、ご指摘ありがとうございます。

    // 画像とキャプションの表示させ方を変える場合は以下を編集
    document.write('<a href="'+this.url[this.p][1]+'"><img src="'+this.url[this.p][0]+'" /></a>') ;
    document.write('<div>' + this.url[this.p][2] + '</div>');
    this.p++;
    if (this.p >= this.url.length) this.p = 0;

    とした上で、document.writeのところは適宜直してください。
  • id:nini318313
    今度は完璧に一緒に動いていますー!
    お二方とも本当にありがとうございました。
    とても感謝感激しています!!!

  • id:tdoi
    Cherenkovさんにモダンではないと言われてしまったので、書き直してみました。
    コメントにコード書くとあまりに醜いので、こちらに。

    https://gist.github.com/1297728


    <div class="randomObject">
    <a href="#" class="randomLink"><image src="#" class="randomImage"/></a>
    <span class="randomText"></span>
    </div>

    が1つのブロックになっており、この中はそれぞれ自由に配置できますし、複数回リンクを置いたりも出来ます。この方がデザイン的には自由度が高いかなと。
  • id:Cherenkov
    https://gist.github.com/1297794
    こういう感じが好きです。

    ランダム表示させたい場所に<div class="randomObject"></div>だけ書く。
    ランダム表示したいコンテンツを配列に入れる。
  • id:nini318313
    お二人ともホントすごいです。いろんな方法があるんですね!
    私はせっかく出来たのを作り替えるのがもったいなくて、まだ…。
    もう少し余裕が出来てきたらぜひ使わせて頂きたいと思います。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません