人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

●質問者: nini318313
●カテゴリ:インターネット ウェブ制作
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● tdoi
●80ポイント ベストアンサー

前質問の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 ● uwao
●40ポイント

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

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

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

◎質問者からの返答

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

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


3 ● Cherenkov
●80ポイント

コメント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を使うのはモダンではない)

関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ