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

復数ある画像、リンク、文字のなかからランダムで数個(かぶらないように)表示させたいのです。
それもテーブルタグの中に。
(画像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と関連する良く見られている質問

QSSDのシーケンシャル/ランダムアクセスの違い

SSDでは、シーケンシャルのほうが、ランダムよりもRead/Writeともに高速ですが、これはどうしてなのでしょうか??

物理的には、ばらばらの位置にあるページにデータが記録されているのに、シーケンシャルのほうが著しく高速になる理由がいまひとつ理解できないです。
(SSDの基本的な仕組みは知っています。)

以下の3つの原因を推測したのですが、合ってますでしょうか?
でも、これらの理由だけではせいぜい数倍の差しかつかなくて、ベンチマーク上での大きな速度差を説明できないような気がします。。。


1.物理ページの大きさ
 物理ページを8Kとする。
 8MBのデータを読み出すとき、シーケンシャルなら1000ページ読み出せばよいが、4Kランダムなら2000ページ読み出す必要がある。
 書き込みの場合は、さらにread-modify-writeのオーバヘッドも発生する。

2.同時処理できるコマンド数
 コントローラが同時処理できるコマンド数が4つで、メモリチップから8並列で読み出せるとする。
 シーケンシャルなら8並列でアクセスできるが、4Kランダムでは4並列のアクセスしかできず、最大スループットを達成できない。

3.コマンド受付自体のオーバヘッド
 コマンドの受付・終了処理などで、オーバヘッドが発生し、その間アクセスが止まる。


もしよろしければ、近年の高速化のための技術などもご教授いただければ幸いです。

よろしくお願いします。

SSDでは、シーケンシャルのほうが、ランダムよりもRead/Writeともに高速ですが、これはどうしてなのでしょうか??

物理的には、ばらばらの位置にあるページにデータが記録されているのに、シーケンシャルのほうが著しく高速になる理由がいまひとつ理解できないです。
(SSDの基本的な仕組みは知っています。)

以下の3つの原因を推測したのですが、合ってますでしょうか?
でも、これらの理由だけではせいぜい数倍の差しかつかなくて、ベンチマーク上での大きな速度差を説明できないような気がします。。。...続きを読む

Aベストアンサー

Crystal Disk Markあたりのベンチマークテストの結果だろうと思いますが、こちらも専門家ではないので、解る範囲で答えさせてもらいます。なお、間違った解釈等がありましたらご容赦下さい。その場合は、もっと詳しい方の解答にお任せします。

シーケンシャルアクセスの場合、CPUはコマンドを発行するだけで実際の転送は、大きなブロック単位でDMA(Direct Memory Accesse)転送されます。

DMA転送は極めて効率が良く、転送にCPUが介在しないのでオーバーヘッドも殆どありません。従って、HDDの持っている転送能力ギリギリまで転送可能なのです。

これに対し、ランダムアクセスは、比較的小さいブロック毎の転送となり、DMA転送の利点が生かされません。転送毎にCPUが介在するので効率が低下します。

それでも、512KBブロックあたりは、シーケンシャルアクセスに迫る転送レートを出すケースもあると思います。

これが、4KBくらいになると、がっくり転送レートが落ちてきます。

まあ、こう言った仕掛けではないかと思っているのですが、如何でしょうか。

Crystal Disk Markあたりのベンチマークテストの結果だろうと思いますが、こちらも専門家ではないので、解る範囲で答えさせてもらいます。なお、間違った解釈等がありましたらご容赦下さい。その場合は、もっと詳しい方の解答にお任せします。

シーケンシャルアクセスの場合、CPUはコマンドを発行するだけで実際の転送は、大きなブロック単位でDMA(Direct Memory Accesse)転送されます。

DMA転送は極めて効率が良く、転送にCPUが介在しないのでオーバーヘッドも殆どありません。従って、HDDの持っている転送能力...続きを読む

Qテーブルで画像+文字+リンクをランダム表示させる

HTMLでサイトを作ろうとしています。

DreamWeaverを利用し、XAMPPでサーバを構築するところまで終了しています。


質問内容なんですが
いくつかある画像(リンク有)+リンク文字+テキストを1セットとしてテーブル内に3つずつ被らずランダムに表示させる方法をご教授願いたいです。
テーブルは横に3つ並んだ状態がいいです。

自分で調べてみたのですがよくわからなかったんです…
見てのとおり初心者なので我侭ですが優しく詳しく教えていただきたいです。
よろしくお願いします。

Aベストアンサー

http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q10117086670
この人?

今回の質問にDWやXAMPPが何も関係ないってことすら分からんレベルの癖に贅沢言わないでくれないかな…
初心者ですって言えば何でも許されると思ったら大間違いですよ。

・「ランダムに1つ」ならできて「重複なしで3つ」ができないのか
・「1つ」ならできて「3つ」ができないのか
・そもそもランダムができないのか
・「何を」調べて「何が」分からなかったのか
どこまでできて何ができないのかをはっきり言わないと、結局一から十まで教えることになり、宿題を丸投げしてくる小中学生と同レベルです。
何も分からなくて他人に頼るなら、せめてそれくらいは自分で努力してくださいね。

ご希望のプログラムを組むには「配列」「乱数」「HTMLへの出力」などの知識が必要ですが、どれもまったく知らないんでしょ?
初心者が高望みなどせず、順番に覚えなさい。
まずは「配列」について理解しましょう。
次に「乱数」について理解しましょう。
そうすると「配列の中のどれかをランダムにひとつ取得」ができるようになります。
次に、HTMLへの出力を覚えます。
出力するためには、出力する「もの」を作成することと、出力先を取得することが必要になります。
まずは空の<body>内に文字を出力することから始めましょう。
慣れてくれば、特定の場所(今回で言えば特定のテーブルセル内)に特定の要素を入れることができるようになります。
これを組み合わせると「配列の中からランダムに3つを特定の場所に出力」ができます。
これくらいのレベルに来てやっと「重複なく3つ」に手を出せます。
JavaScriptには標準で「配列のある要素を取得し、それは配列から削除する」という機能がありますので、インデックスに乱数を与えてこれを3回行えば「重複なくランダムに3つ」が実現できます。

どうですか?
「何も分かりません全部教えてください」って言ったからって簡単に教えられるような内容じゃない(あなたレベルの人にとって)ことが分かりましたか?
悪いことは言わないからできることからやりましょう。


※下記が動作としてはあなたの希望通りであることを確認してください。

<html>
<head>
<script>
window.onload = function(){
var list = new Array(
'<img src="画像1.jpg" alt="sample1" width="170" height="200">\n<p><a href="画像1.html">説明1</a></p>\n<p>詳細1</p>',
'<img src="画像2.jpg" alt="sample2" width="170" height="200">\n<p><a href="画像2.html">説明2</a></p>\n<p>詳細2</p>',
'<img src="画像3.jpg" alt="sample3" width="170" height="200">\n<p><a href="画像3.html">説明3</a></p>\n<p>詳細3</p>',
'<img src="画像4.jpg" alt="sample4" width="170" height="200">\n<p><a href="画像4.html">説明4</a></p>\n<p>詳細4</p>',
'<img src="画像5.jpg" alt="sample5" width="170" height="200">\n<p><a href="画像5.html">説明5</a></p>\n<p>詳細5</p>',
'<img src="画像6.jpg" alt="sample6" width="170" height="200">\n<p><a href="画像6.html">説明6</a></p>\n<p>詳細6</p>',
'<img src="画像7.jpg" alt="sample7" width="170" height="200">\n<p><a href="画像7.html">説明7</a></p>\n<p>詳細7</p>',
'<img src="画像8.jpg" alt="sample8" width="170" height="200">\n<p><a href="画像8.html">説明8</a></p>\n<p>詳細8</p>',
'<img src="画像9.jpg" alt="sample9" width="170" height="200">\n<p><a href="画像9.html">説明9</a></p>\n<p>詳細9</p>'
);
for(i=1;i<=3;i++){
document.getElementById("td" + i).innerHTML = list.splice(Math.floor(Math.random() * (list.length-1)),1);
}

}
</script>
<title>test</title>
</head>
<body>
<table border="1">
<tr><td width="265" id="td1"></td><td width="265" id="td2"></td><td width="265" id="td3"></td></tr>
</table>
</body>
</html>

http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q10117086670
この人?

今回の質問にDWやXAMPPが何も関係ないってことすら分からんレベルの癖に贅沢言わないでくれないかな…
初心者ですって言えば何でも許されると思ったら大間違いですよ。

・「ランダムに1つ」ならできて「重複なしで3つ」ができないのか
・「1つ」ならできて「3つ」ができないのか
・そもそもランダムができないのか
・「何を」調べて「何が」分からなかったのか
どこまでできて何ができないのかをはっきり言わないと、結局一から...続きを読む

Q[C#]2つのランダム文字列を作りたい

いつもありがとうございます。

2種類のランダム文字列を作りたいのですが、
なぜか同じ文字列が作成されるという現象が起こります。

以下の関数を用意して
public static string ランダム(int 桁数)
{
string[] codelist = new string[] { "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z" };

Random Random = new System.Random();

for (int i = 0; i < 桁数; i++)
{
randomcode += codelist[Random.Next(0, 36)];
}

return randomcode;

}

textBox1.Text = ランダム(10);
textBox2.Text = ランダム(10);

とやっても、同じランダムの文字列が入ってしまいます。

間に、
Thread.Sleep(100);

とか入れると変わるのですが・・・
理由がわかりません。

初心者的質問ですみませんがよろしくお願いします。

いつもありがとうございます。

2種類のランダム文字列を作りたいのですが、
なぜか同じ文字列が作成されるという現象が起こります。

以下の関数を用意して
public static string ランダム(int 桁数)
{
string[] codelist = new string[] { "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z" };

Random Random = new System.Random();
...続きを読む

Aベストアンサー

コンピュータで使われている乱数は、実際には「疑似乱数」と言って、一見バラバラで乱数と言ってもいい性質を持っていますが、実際には計算によって求められたものです。

それまでの値に、なんらかの計算をした結果を、「次の乱数」として使います。(Nextというメソッド名もそこに由来)
このとき、一番最初の状態になるものを「種(シード,seed)」と言います。
「前の状態から新しい乱数を計算する」ということから「種が同じなら、乱数列も同じになる」という性質があります。

バラバラにするための常套手段として、種に現在時刻から求めた値を使うことで、実行時刻が変化すれば値が変わるようにする、というのがあります。ただ、無限に細かい時刻をそのままコンピュータでは扱えないので、適当な単位(例えば、秒単位)になってしまい、単位時間以内(例えば、秒単位なら1秒以内)なら、同じ乱数列になってしまう、という問題があります。

Random.Random()のマニュアルを読むと
http://msdn.microsoft.com/ja-jp/library/h343ddh9%28v=vs.95%29.aspx
「既定のシード値はシステム時計から取得されるため、その分解能は有限です。 その結果、既定のコンストラクターを呼び出すことによって連続で作成される、異なる Random オブジェクトの既定のシード値は同一であるため、同一の乱数セットが生成されます。」
と、明記されています。

public static string ランダム(int 桁数) を2回呼び出していますが、その度に、Random Random = new System.Random();で新しい System.Randomオブジェクトを生成しています。
間にいくつかの処理が入っているとは言え、非常に短時間で終わるものなので、この「連続で作成される、異なる Random オブジェクト」となっている、と考えてよいでしょう。

対処法は、マニュアルにも書いてあります

コンピュータで使われている乱数は、実際には「疑似乱数」と言って、一見バラバラで乱数と言ってもいい性質を持っていますが、実際には計算によって求められたものです。

それまでの値に、なんらかの計算をした結果を、「次の乱数」として使います。(Nextというメソッド名もそこに由来)
このとき、一番最初の状態になるものを「種(シード,seed)」と言います。
「前の状態から新しい乱数を計算する」ということから「種が同じなら、乱数列も同じになる」という性質があります。

バラバラにするための常套手段とし...続きを読む

Qhtml初心者です。画像サイズについて。 テーブルの中に、文字と、画像リンクを貼っているのですが画像

html初心者です。画像サイズについて。
テーブルの中に、文字と、画像リンクを貼っているのですが画像と文字がズレます!泣
画像というより、文字が下にずれます。

文字<a href=”リンク先”><IMG src=”画像URL” width=”30” height=”40” border=”0”>

3×3のテーブルの中に、上記のコードが9つあります。画像アイコンは2種類で、もう一つは
width=”25” height=”20” border=”0”>です。
アイコンの横と幅が二つそれぞれ違うのでズレてるようです。しかし双方を同じくらいのサイズにしようとするとこうなります。ちなみにフリー素材を拾ってきました。
同じサイズにするにはどうすれば…
ペイントでピクセル値をいじっても、元のサイズが双方違うから結局一緒ですよね?
元が同じサイズの画像をとるしかないでしょうか?

Aベストアンサー

単純にスタイルシートで指定すればよい
img[src=”画像URL”]{height:80px;width:auto;}
位置は、position:relative:top:5px;とかで好きに変えればよい。

そもそも、tableを使って配置するのは問題ですが、それはおいておいて・・

alignなんて16年前から非推奨の代表ですから、そんなもの使わない。

QjQueryを使ってランダムに表示

jQueryを使って5つのボックス要素を、ランダムに3つ表示させています。
現在はページを読み込むたびに表示を切り替えていますが、これを「一定時間で表示を切り替え」に変更する事は可能でしょうか?
できればjsのみの修正でできれば良いのですが…。
どなたかお助けください。よろしくお願いいたします。
jsとhtmlは以下のようにしています。

jQuery(function($) {

$.fn.extend({
randomdisplay : function(num) {
return this.each(function() {
var chn = $(this).children().hide().length;
for(var i = 0; i < num && i < chn; i++) {
var r = parseInt(Math.random() * (chn - i)) + i;
$(this).children().eq(r).show().prependTo($(this));
}
});
}
});

$(function(){
$("[randomdisplay]").each(function() {
$(this).randomdisplay($(this).attr("randomdisplay"));
});
});

});


<div randomdisplay="3">
<div id="box">ランダム1</div>
<div id="box">ランダム2</div>
<div id="box">ランダム3</div>
<div id="box">ランダム4</div>
<div id="box">ランダム5</div>
</div>

jQueryを使って5つのボックス要素を、ランダムに3つ表示させています。
現在はページを読み込むたびに表示を切り替えていますが、これを「一定時間で表示を切り替え」に変更する事は可能でしょうか?
できればjsのみの修正でできれば良いのですが…。
どなたかお助けください。よろしくお願いいたします。
jsとhtmlは以下のようにしています。

jQuery(function($) {

$.fn.extend({
randomdisplay : function(num) {
return this.each(function() {
var chn = $(this).children().hide().length;
for(var i = 0; i...続きを読む

Aベストアンサー

ランダム表示する関数を呼び出している部分を関数にして、setIntervalで繰り返して呼んであげればいいんでないでしょうか。

https://developer.mozilla.org/ja/docs/Web/API/window.setInterval

Q画像リンクの上に文字リンクを乗せる方法は?

画像(アイコン)リンクの上にテストで、文字リンクを貼りつけたいのですが、どのようにしたらよいでしょうか?

ちなみに、リンク先はphpで読み込ませています。

ソースは

<li><a href="<!--{$smarty.const.URL_DIR}-->abouts/index.php"><img src="<!--{$TPL_DIR}-->img/side/about_on.jpg" width="166" height="30" alt="当サイトについて" style="border: none" name="about" id="about" /></a></li>

のようになっています。現在、画像(アイコン)リンクはこれで表示できています。

どなたかよろしくお願い致します。

Aベストアンサー

アンカーのスタイルシートでdisplayをblockにして、backgroundに
イメージを置いてやればよいのでは?

Qランダム英数

Flash Lite1.0でランダムの英数を表示させたく、
以下のスクリプトを書いてみたのですが

eisuu="0123456789abcdefghijklmnopqrstuvwxyz"
text = random(eisuu);

randomは整数しか表示されないようで困っています。
英数をランダムで表示させるにはどのようにしたら良いのでしょうか?
分かる方がいらっしゃればお教え下さい。
宜しくお願い致します。

Aベストアンサー

> ランダムの英数を表示と言うのは36桁中10桁の英数字を表示させたいと言う事です。

「○文字目を取り出す」を10回繰り返して、10個の文字を連結する
コードはご自分で考えてみて下さい。
ヒントを出すのも何ですが、for と + または += です。

QHTMLでトップページの画像およびリンクのランダム表示について

どなたかお力を貸して下さい。
現在HPを作成中なのですがそのHPのトップページに表示される画像と、
それとセットで商品名、購入ページへのリンクを更新する度にランダム表示になるようにできればと思っています。
添付画像の販売ページへ飛ぶという所でリンクをつけたいと思っています。
HTMLは
<h2>New!!新着製品</h2>

<div class="itemlist">
<div class="img"><a href="#"><img src="images/sampleimg1.jpg" alt="item name" width="250" height="188" /></a></div>
<h3>機種名</h3>
<p>販売ページへ飛ぶ</p>
</div>

スタイルシートは
#main .itemlist {
border: 1px solid #CCCCCC;/*1個あたりのボックスのボーダー設定*/
padding: 5px;
overflow: hidden;
margin-bottom: 0.5em;
width: 673px;/*段落タグ(p)の横幅とサイズを合わせる設定です。この下二つのmarginも。*/
margin-right: auto;
margin-left: auto;
}

#main .itemlist h3 {
color: #000000;
border-bottom: 1px solid #cccccc;
border-left: 4px solid #CCCCCC;
padding: 0px 0px 0px 5px;
margin-bottom: 0.5em;
font-size: 100%;
}

#main .itemlist p {
padding: 0px;
}

#main .itemlist p, #main .itemlist h3 {
margin-left: 265px;/*画像の幅に合わせてここは変更する*/
}

#main .itemlist a img {
padding: 5px;/*写真と外線との余白*/
border: 1px solid #CCCCCC;
}

#main .itemlist a:hover img {
border: 1px solid #999999;
}

#main .itemlist div.img {
float: left;
}
なのですが相当難しいでしょうか?

どなたかお力を貸して下さい。
現在HPを作成中なのですがそのHPのトップページに表示される画像と、
それとセットで商品名、購入ページへのリンクを更新する度にランダム表示になるようにできればと思っています。
添付画像の販売ページへ飛ぶという所でリンクをつけたいと思っています。
HTMLは
<h2>New!!新着製品</h2>

<div class="itemlist">
<div class="img"><a href="#"><img src="images/sampleimg1.jpg" alt="item name" width="250" height="188" /></a></div>
<h3>機種名</h3>
<p>販売...続きを読む

Aベストアンサー

JavaScriptを使えば簡単にできますよ。

「画像をランダムに表示する」(http://javascript.eweb-design.com/0804_ri.html)が参考になるでしょう。

Q配列を使って、ランダムな値を複数作りたい

いつも、ありがとうございます。MAC_OSXでFlash8です。
配列を使い4つの値をランダムに出し、spd1~spd4までの変数に入れたいのですが、つまづいて立ち往生しています。今は、下記のようになっています。
randomList = new Array (1, 2, 3, 4);
for (i = 1; i <= 4; i++)
{
pos = Math.floor (Math.random () * randomList.length);
spdNum = randomList[pos];
spd = spdNum;
spdban = "spd"+i;
spdban = spd;
randomList.splice (pos, 1);
}
trace (spd1);
trace (spd2);
trace (spd3);
trace (spd4);

で、traceしても値は出てきません。
spdbanにその都度、値が入ってしまうということだと思うのですが、spd1~spd4までにそれぞれ値を入れるにはどうしたらいいのでしょうか?
よろしく、お願いします。

いつも、ありがとうございます。MAC_OSXでFlash8です。
配列を使い4つの値をランダムに出し、spd1~spd4までの変数に入れたいのですが、つまづいて立ち往生しています。今は、下記のようになっています。
randomList = new Array (1, 2, 3, 4);
for (i = 1; i <= 4; i++)
{
pos = Math.floor (Math.random () * randomList.length);
spdNum = randomList[pos];
spd = spdNum;
spdban = "spd"+i;
spdban = spd;
randomList.splice (pos, 1);
}
trace (spd1);
trace (spd2);
trace (spd3);
trace (s...続きを読む

Aベストアンサー

こんにちは。
spd=spdNumまでで、
spdには、randomListのどれかが、
入っていると、仮定します。

spd1に値を入れるには、
spd1=xx
とする必要があります。
このプログラムには、それがありません。
したがって、もともと、spd1という変数が
ないので、traceできないはずです。
ここでは、
spd=new Array();
としておいて、
forの中で、
spd[i]=spdNum
とすれば、
trace(spd[1])~trace(spd[4])
で、取り出せるはずです。

"spd"+i=spdNumという書き方は、
変数名に、変数を使うんで、
無理だと思います。

まだまだ、短くなると思います。
プログラム上、分からないところも
ありますが。
すぐに、気づきましたので。

QCSSで、サイト共通のリンクのカラー設定をしても、画像のリンクまで反映させないように出来ないでしょうか?

CSSで、サイト共通のリンクのカラー設定をしました。

しかし、このままだとテキストリンクだけでなく、画像リンクまでも
このリンク設定が反映れてしまうので、これを回避したい、
つまり「画像リンクだけは例外」と記述する術がないものかと以前から探しておりますが、
このようなことはできないでしょうか。

Aベストアンサー

こんにちは

なるほど<a>要素にborderをつけているのですね

リンク群(複数のリンク)がセットになっている(全て画像リンク)のであれば

.link a { border:none; }

<div class="link">
<a><img></a>
<a><img></a>
</div>

ということはできますが

>そうなるリンク画像と、そうならないリンク画像があります
ちょっとよく分からないですが<img>に対してfloatやposition:absoluteしていると出ないようではありますが・・・


人気Q&Aランキング