ミスチルの大名曲の数々が配信決定!! 31日間無料!!【PR】

画像+リンク+文字のランダム表示について

復数ある画像、リンク、文字のなかからランダムで数個(かぶらないように)表示させたいのです。
それもテーブルタグの中に。
(画像Aには必ずリンクAと文字Aがせっとになるようにです)

初心者なのでどのようにしたら良いのか、またこんな事ができるのかどうかもわかりませんが・・・
おわかりになる方、詳しく教えてください。

一応HTMLでHPをつくっているので、このように書いたら良いよ・・・という見本のようなモノを作って頂けると幸いです。
宜しくお願いします

↓の画像のように3パターンの表示を考えています。
解りづらいかもしれませんが、よろしくお願いします。

「画像+リンク&文字のランダム表示について」の質問画像

このQ&Aに関連する最新のQ&A

A 回答 (2件)

<script type="text/javascript">


<!--
var msg = new Array();

msg[0] = '<img src="画像Aアドレス"><br>ここにA文章';
msg[1] = '<img src="画像Bアドレス"><br>ここにB文章';
msg[2] = '<img src="画像Cアドレス"><br>ここにC文章';
msg[3] = '<img src="画像Dアドレス"><br>ここにD文章';
msg[4] = '<img src="画像Eアドレス"><br>ここにE文章';

var no = Math.floor(Math.random() * msg.length);
document.write(msg[no]);
// -->
</script>

これを<td></td>の中に入れれば大丈夫だと思います。
msg[0]←この数字を増やしていけばいくつでも可能です。
    • good
    • 0

連続すいません、見落としていた文章がありました。


「かぶらないように」とのことでしたが、先ほどの記述では何が出るかランダムなのでかぶってしまいます。

この回答への補足

かぶらないように、複数の画像(文字なども)を表示させるにはどうしたら良いのでしょうか?

補足日時:2009/03/18 20:06
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qhtmlのランダム表示について

楽天やヤフーのトップページにいくと、
閲覧する度に違うhtmlファイル(特集部分)が表示されると思います。

自分で運営しているサイトにも、
このランダム表示を利用したいと思っているのですが、
どのようにすればよろしいでしょうか?

尚、現状知ってるのはhtmlやcss、cgi設置くらいです。
画像だけをランダム表示するのは調べてわかったのですが、
htmlファイルそのものをランダム表示するやり方がわからなかったので、
よろしくお願いいたします。

Aベストアンサー

★ヒント
・<IFRAME>タグと JavaScript を組み合わせて作ります。
 <IFRAME>タグはテキストエリアのような領域に小さな HTML ページを表示できます。
 そして、JavaScript を利用してランダムにリンク文字列(アドレス)を切り替えれば
 簡単に作れると思います。
・下にその簡単なサンプルを載せます。

サンプル:
<SCRIPT LANGUAGE="JavaScript">
<!--
var table = [
 "http://oshiete1.goo.ne.jp/c230.html",
 "http://oshiete1.goo.ne.jp/c240.html",
 "http://oshiete1.goo.ne.jp/c250.html",
 "http://oshiete1.goo.ne.jp/c260.html"
];
var objDate = new Date();
var myURL = table[objDate.getSeconds() % 4];

document.write( '<IFRAME SRC="',myURL,'" name="sample" width="200" height="150">' );
document.write( 'この部分はインラインフレームを使用しています。' );
document.write( '</IFRAME>' );
//-->
</SCRIPT>

解説:
・<SCRIPT>~</SCRIPT>タグ内が JavaScript のソース部です。
 ここで table となっている部分のリンクを増やしたり、編集するとランダムで表示される
 HTML の広告ページを変更できます。
・また、現在の秒を元にしてランダムに広告ページが選択されるようになっています。
 『var myURL = table[objDate.getSeconds() % 4];』の1行がそれです。
 『table』のデータが4行なので『4』となっているため、『table』データのリンクを
 増やして 30 行にした場合は、『4』の場所を『30』にして下さい。
 さらに秒を使っているため、60 以上には設定できません。必ず 60 以内にして下さい。
・上記の<SCRIPT>~</SCRIPT>タグを HTML ソースに貼り付ければページに切り替わるたび、
 または『更新』ボタンが押されるたびに<IFRAME>内の広告ページが切り替わります。
・以上。おわり。

参考URL:http://www.htmq.com/html/iframe.shtml

★ヒント
・<IFRAME>タグと JavaScript を組み合わせて作ります。
 <IFRAME>タグはテキストエリアのような領域に小さな HTML ページを表示できます。
 そして、JavaScript を利用してランダムにリンク文字列(アドレス)を切り替えれば
 簡単に作れると思います。
・下にその簡単なサンプルを載せます。

サンプル:
<SCRIPT LANGUAGE="JavaScript">
<!--
var table = [
 "http://oshiete1.goo.ne.jp/c230.html",
 "http://oshiete1.goo.ne.jp/c240.html",
 "http://oshiete1.goo.ne.jp/c250.html"...続きを読む

QCSSで背景画像をランダムに表示させたいのですが

CSSで背景画像をランダムに表示させたいのですが、簡単な対応方法などありますでしょうか?

背景のランダム表示としてbody部分をjavascriptで背景のランダム処理はたくさんあるのですが、今回はスタイルシートでbodyではなく、サイト内のいち部分のクラス要素の背景をランダムに表示させたいと思っています。

<div class="main">
ここにコンテンツがあって、このmainのクラス要素の背景をランダムに変えたいです。
</div>

スタイルシートの方では現在は
.main {
float:left;
background-image:url(/image/top_bg01.jpg);
background-repeat:no-repeat;
min-width:736px;
height:auto;
border-right:1px solid #000000;
}

としており、このtop_bg01.jpgの部分の画像を
top_bg01.jpg
top_bg02.jpg
top_bg03.jpg
top_bg04.jpg
top_bg05.jpg
とランダムに表示させたいのですが、対応方法が分からずに困っています。
http://www.designwalker.com/2006/12/random-css.html
はためしてみましたが、PHPがうまく対応できずに断念してしまいました。

どなた様か宜しくお願いいたします。

CSSで背景画像をランダムに表示させたいのですが、簡単な対応方法などありますでしょうか?

背景のランダム表示としてbody部分をjavascriptで背景のランダム処理はたくさんあるのですが、今回はスタイルシートでbodyではなく、サイト内のいち部分のクラス要素の背景をランダムに表示させたいと思っています。

<div class="main">
ここにコンテンツがあって、このmainのクラス要素の背景をランダムに変えたいです。
</div>

スタイルシートの方では現在は
.main {
float:left;
background-image:url...続きを読む

Aベストアンサー

変更する対象が異なるだけで、要領は同じです。

参考まで。
<html>
<style type="text/css">
.main {
background-image:url(/image/top_bg01.jpg);
}
</style>
<script type="text/javascript">
window.onload = function(){
//var url = "a.jpg,b.jpg,c.jpg".split(',');
var url=[];
url[0] = 'top_bg01.jpg';
url[1] = 'top_bg02.jpg';
url[2] = 'top_bg03.jpg';
var n = Math.floor(Math.random() * url.length);
var elm = document.getElementById('main');
elm.style.backgroundImage = 'url(/image/' + url[n] + ')';
}
</script>
<body>
<div class="main" id="main">
コンテンツ
</div>
</body>
</html>

変更する対象が異なるだけで、要領は同じです。

参考まで。
<html>
<style type="text/css">
.main {
background-image:url(/image/top_bg01.jpg);
}
</style>
<script type="text/javascript">
window.onload = function(){
//var url = "a.jpg,b.jpg,c.jpg".split(',');
var url=[];
url[0] = 'top_bg01.jpg';
url[1] = 'top_bg02.jpg';
url[2] = 'top_bg03.jpg';
var n = Math.floor(Math.random() * url.length);
var elm = document.getElementById('main');
elm.style.backgroundImage =...続きを読む


人気Q&Aランキング