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

締切済

質問者：carsea802
質問日時：2010/09/24 16:14
回答数：2件

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

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

【以下javascriptの部分】

<script type="text/javascript"></script>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： zeff#1
回答日時：2010/09/25 11:29

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

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

<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>

- 0
- 件

通報する

No.1

回答者： yuu_x
回答日時：2010/09/24 17:31

<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>