こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

こちらの質問を参考に同じ様に画像をランダムするものを作りました。

こちらの質問を参考に同じ様に画像をランダムするものを作りました。
http://okwave.jp/qa/q716071.html

No.3の回答を参考に一緒のものを作り、正常に動作しております。
ここからさらに、画像に合わせたリンク先へ飛ばしたいのですが
(0.jpg→0.html 1.jpg→1.html 2.jpg→2.html の様に)
どう手を加えればいいでしょうか?アドバイスよろしくお願いします。



【以下javascriptの部分】

<script type="text/javascript"><!--
NoMem = new Array();

function RndmNo(n){
x=Math.floor(Math.random()*100);//「Math.random()*100」の"100"は、用意している画像ファイルの枚数を指定
if (NoMem.length){
for (j=0; j<NoMem.length; j++){
if (NoMem[j]==x){ RndmNo();}
}
}
NoMem[n]=x;
}

for (k=0; k<3; k++){
RndmNo(k);
}
//以上、乱数を生成して配列に格納。

RndImg= new Array();

for (i=0; i<3; i++){
RndImg[i]= new Image();
RndImg[i].src="images/image"+NoMem[i]+".jpg";
//「"images/image"」には画像ファイルへのパスの共通部分を、「".jpg"」には画像ファイルに共通の拡張子を入れます
}
//イメージオブジェクトとして表示する画像を取得

function ImgDisp(){
document.images["imgs0"].src=RndImg[0].src;
document.images["imgs1"].src=RndImg[1].src;
document.images["imgs2"].src=RndImg[2].src;
}

window.onload=ImgDisp;
//--></script>

投稿日時 - 2010-09-24 16:14:30

QNo.6204916

すぐに回答ほしいです

このQ&Aは役に立ちましたか?

2人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.2

順番をシャッフルして、その順に出力させます。

画像数が増減した場合を考えておきましたが、
固定なら/*または~*/のコメントアウトを外して
そちらを使ってみてください。
画像位置が特定ブロック内に収まっておらず、
バラバラの場合でも使えるかも。

<script type="text/javascript">
function rdmImgLink(){

var imgs = document.getElementById("box").getElementsByTagName("IMG");

/*または
var imgs = [
document.images["imgs0"],
document.images["imgs1"],
document.images["imgs2"]];
*/

var i, len = imgs.length, n=[], rdm=[], links = [], L = len, r, tmp, x;
//初期化
for( i = 0; i < len; i++ ){
n[i] = i; //0,1,2,....
rdm[i] = imgs[i].src;
links[i] = imgs[i].parentNode.href;//imgの親ノード:Aのリンク先
}
//シャッフル:Fisher-Yates法
while( L ){
r = Math.floor( Math.random() * L );
tmp = n[--L];n[L] = n[r];n[r] = tmp;
}
//出力
for( i = 0; i < len; i++ ){
x = n[i]; //シャッフルされた番号
imgs[i].src = rdm[x];
imgs[i].parentNode.href = links[x];
imgs[i].alt = "imgs" + x;
}
}

//window.onload
//@cc_on
window./*@if(@_jscript_version<=5.8)
attachEvent('on'+ @else @*/ addEventListener(/*@end @*/
'load', function(){

rdmImgLink();

}, false );
</script>
</head>
<body>
<div id="box">
<p><a href="0.html"><img name="imgs0" src="images/image0.jpg" alt="imgs0" width="190" height="40"></a></p>
<p><a href="1.html"><img name="imgs1" src="images/image1.jpg" alt="imgs1" width="190" height="40"></a></p>
<p><a href="2.html"><img name="imgs2" src="images/image2.jpg" alt="imes2" width="190" height="40"></a></p>
</div>
</body>
</html>

投稿日時 - 2010-09-25 11:29:01

ANo.1

<div>
<a href="0.html"><img src="0.jpg" alt="test0"></a>
<a href="1.html"><img src="1.jpg" alt="test1"></a>
<a href="2.html"><img src="2.jpg" alt="test2"></a>
<script type="text/javascript">
(function (doc) {
(function (n, r) {
var a, i, L, no;

a = n.getElementsByTagName('A');

for (i = 0, L = a.length; i < L; ++i) {
no = Math.floor(Math.random() * 100);

r.call (a[i], 'href', no);
r.call (a[i].getElementsByTagName('IMG')[0], 'src', no);
}
}) (
(function () {
var n = doc.getElementsByTagName('SCRIPT');
return n[n.length-1].parentNode;
}) (),
function (a, no) {
this[a] = this[a].replace(/\d+(\.[^.]+)$/, no + '$1');
}
);
}) (document);
</script>
</div>

投稿日時 - 2010-09-24 17:31:05

お礼

ありがとうございます。参考にさせていただきます。

投稿日時 - 2010-09-24 18:09:40

あなたにオススメの質問