画像だけはhttp://q.hatena.ne.jp/1202909655を参照させて頂いて、無事入れ替わるようになりましたが、
テキストをいろいろ入れてみてもどうしても画像だけが動いて、テキストは残ってしまいます。。。
画像とそれぞれのテキストとが一緒に動くためには、どこにテキストを入れたらいいのでしょうか。
もう一つ、同じページにインフレームで2カ所（またはそれ以上）表示させたいと思うのですが
一カ所だけしか動きません。複数箇所動くようにすることは可能でしょうか？
どなたかご教授くださいm(_ _)m
よろしくお願いいたします。
No.1
174
75
80pt
前質問の１つ目の方をちょっとアレンジしただけですが、画像とURLと文字をセットとして扱うなら、こんな感じです。
2
2
<!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>
こっちの方はもう少し詳しく状況を教えてもらえると、何かコメントできるかと思います。
何かの参考になれば。
No.1
17475
ここでベストアンサー
80pt
前質問の１つ目の方をちょっとアレンジしただけですが、画像と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>
こっちの方はもう少し詳しく状況を教えてもらえると、何かコメントできるかと思います。
何かの参考になれば。
No.2
18039
40pt
JavaScriptではありませんが、下記が簡単なように思います。
http://www.chama.ne.jp/download/etc/randum/index.htm
フリーソフトですし、画像や文字をランダムに表示出来るので良いように思います。
No.3
1504493
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を使うのはモダンではない）
Cherenkov
2011/10/19 10:10:22
nini318313
tdoi
1
4
2
自分ではもう無理かもと思ってこういうのを探したんですけど見つけられませんでした。
教えてくださってどうもありがとうございます！