掲示板/JavaScript質問板/過去ログ/一覧/ 六つのバナーをランダムで三つ表示させたいのですが。

0 名前：レイ： 2007/08/03（金） 16:20 ID:gpgUk.e3 sub-Ax: 六つのバナーをランダムで違うものを三つ表示させてしかもロールオーバーもさせたいのですがうまくいきません。。。。
下のソースコードを3つ並べて（画像の名前を変えて）みたのですが画像がごちゃ混ぜになってしまいます。
他に何かいい方法はないでしょうか？
JavaScript初心者でまだわかっていない事がたくさんありますが、よろしくお願いします。

<script language="javascript">

</script>

1 名前：匿名： 2007/08/03（金） 16:20 ID:UQpJEoN8 sub-Cl

かなり適当。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<title>ランダムバナーサンプル</title>
<script type="text/javascript"><!--
function init()
{
	var alt = new Array()
	,banner = new Array()
	,EXTENSION
	,htmlImg = {}
	,i
	,idx
	,myImg = {}
	,PATH
	,str
	,url = new Array();
	PATH = "./index_img/";
	EXTENSION = ".png";
	banner = [
		"r-banner-01"
		,"r-banner-02"
		,"r-banner-03"
		,"r-banner-04"
		,"r-banner-05"
		,"r-banner-06"
	];
	alt = [
		"ランダムバナー1"
		,"ランダムバナー2"
		,"ランダムバナー3"
		,"ランダムバナー4"
		,"ランダムバナー5"
		,"ランダムバナー6"
	];
	url = [
		"testurl01.html"
		,"testurl02.html"
		,"testurl03.html"
		,"testurl04.html"
		,"testurl05.html"
		,"testurl06.html"
	];
	for(i = 0; i < 3; i++)
	{
		idx = Math.floor(Math.random() * banner.length);
		myImg[i] = new Image();
		myImg[i].src = PATH + banner[idx] + "_o" + EXTENSION;
		htmlImg[i] = document.getElementById("bn" + i);
		htmlImg[i].setAttribute("src", PATH + banner[idx] + EXTENSION);
		htmlImg[i].setAttribute("alt", alt[idx]);
		htmlImg[i].setAttribute("onmouseout", "this.src='" + PATH + banner[idx] + EXTENSION + "';");
		htmlImg[i].setAttribute("onmouseover", "this.src='" + myImg[i].src + "';");
		htmlImg[i].parentNode.setAttribute("href", url[idx]);
		delete banner[idx];
		str = banner.join(",");
		str = str.replace(/,,/, ",");
		str = str.replace(/^,/, "");
		str = str.replace(/,$/, "");
		if(i != 2)
			banner = str.split(",");
	}
}
try
{
	window.addEventListener("load", init, false);
}
catch(e)
{
	window.attachEvent("onload", init);
}
//--></script>
<ul>
	<li><a href="testurl01.html"><img alt="ランダムバナー1" src="./img/1.png" id="bn0"></a></li>
	<li><a href="testurl02.html"><img alt="ランダムバナー2" src="./img/2.png" id="bn1"></a></li>
	<li><a href="testurl03.html"><img alt="ランダムバナー3" src="./img/3.png" id="bn2"></a></li>
</ul>

2 名前：匿名： 2007/08/03（金） 16:20 ID:UQpJEoN8 sub-Cl

あ、ごめん、altとurlもループごとに使用した要素を消さないと駄目ですね。
それっぽいところに

		delete alt[idx];
		str = alt.join(",");
		str = str.replace(/,,/, ",");
		str = str.replace(/^,/, "");
		str = str.replace(/,$/, "");
		if(i != 2)
			alt = str.split(",");
		delete url[idx];
		str = url.join(",");
		str = str.replace(/,,/, ",");
		str = str.replace(/^,/, "");
		str = str.replace(/,$/, "");
		if(i != 2)
			url = str.split(",");

って加えといてくらはい。

3 名前：匿名： 2007/08/03（金） 16:20 ID:ejHbCz3q sub-Cz: >>1
> htmlImg[i].setAttribute("onmouseover", "this.src='" + myImg[i].src + "';");

これだと IE で動かんですよ（この件に関しては IE に落ち度はない）。

4 名前：匿名： 2007/08/03（金） 16:20 ID:UQpJEoN8 sub-Cl: 正直すまん。

5 名前：匿名： 2007/08/03（金） 16:20 ID:ejHbCz3q sub-Cz

IE6 のメモリリークを防ぐ意味でも、文字列を使うのは良いアイデアだと思うんだ。

.onmouseover = new Function (...);

に直せば無問題じゃね。非スクリプト環境での代替記述もあるし、面白いと思う。

(a). element.setAttribute('attrName', 'valueString')
(b). htmlElement.attrName = value
(c). htmlElement.oneventtype = handlerFunction
(d). node.addEventListener('eventtype', listener, useCapture)

これらは互いに異なる由来を持つ別の機構だ。置き換え可能なものも一部あるけど、全てが置き換え可能なわけじゃない。何でもかんでも setAttribute するのは止めよう。少なくとも、HTML のイベント属性に setAttribute して動作する保証はない（DOM-HTML にも DOM-Events にも規定はない）し、使う理由もない。そもそも、本質的にスクリプトデータは文書データに属すものではないのだし（スタイルデータも同様）。

事実上、IE の手抜き実装のせいで、HTML 上の setAttribute は使い物にならない。他の XML 応用を扱うのでもなければ、現状では DOM-HTML の露出プロパティを使った方がまだ安全。

6 名前：レイ： 2007/08/03（金） 16:20 ID:gpgUk.e3 sub-Ax: 匿名さん返事送れて申し訳ございません。
匿名さんのスレッドは私はまだ知識が足りなくてあまり理解できていません。
しかし匿名さんのスレッドの意味を理解出来る様に勉強してみますのでもう少し待っていてください。
成功したら報告しますね。
勉強してどうしても解らない時はまたお尋ねします。