画像をランダムに表示させマウスを重ねるとさらに切り替わる方法

質問

今ＨＰを作成しているんですが、題名の方法が知りたいです。

JavaScriptを使って画像をランダムに表示させる方法ありますよね。
<script language="javascript">
<!--
//ランダムに画像を表示
img = new Array();
img[0] = "画像1";
img[1] = "画像2";
img[2] = "画像3";
n = Math.floor(Math.random()*img.length);
document.write("<img src='"+img[n]+"'　border='0'>");
//-->
</SCRIPT>

それとマウスを重ねると画像が変わる
onmouseover="this.src='画像4'"
onmouseout="this.src='画像5'"
というタグありますよね。

2つのタグを組み合わせてランダムに表示された画像に
マウスを重ねると画像がかわるということがやりたいのですが
JavaScriptの知識があまりないためわかりません。
この方法は可能でしょうか？
もしくは他の方法あるでしょうか？

ランダムに表示される画像は３枚と仮定し、
それぞれ３枚の画像はマウスを重ねるごとに
違う画像を表示させたいと思っています。

解決法をわかるかたがいらっしゃったら
よろしくお願い致します。

回答No.2

noname#35109 · ベストアンサー

>> ランダム画像1～3があります。
>> マウスを重ねたときに表示される画像4～6があります。

はあ，なるほど。
ランダムの後には規則性があるわけですか。

>> 画像1が選ばれたときはマウスを重ねると画像3。
>> 画像2が選ばれたときはマウスを重ねると画像4。

？？？　たぶん，
画像1が選ばれたときはマウスを重ねると画像4。
画像2が選ばれたときはマウスを重ねると画像5。
ということですよね。

上の部分から修正になります。
具体的にJPEGのファイル名と拡張子名まで入れておきます。

--------------------------------
<script language="javascript">
<!--
//ランダムにgazouを表示
img = new Array();
img[0] = "gazou1.jpg";
img[1] = "gazou2.jpg";
img[2] = "gazou3.jpg";
img[3] = "gazou4.jpg";
img[4] = "gazou5.jpg";
img[5] = "gazou6.jpg";
n = Math.floor(Math.random()*3);
m = n+3;
document.write("<img src='"+img[n]+"' border='0' onmouseover=src='"+img[m]+"' onmouseout=src='"+img[n]+"'>");
//-->
</script>
-------------------------------

で行けます。

>> やはり動くgif画像をランダム表示などの方が
>> はやいのでしょうか？

意味がわかりません…。
動くgif画像って，勝手に動くアニメーションでしょう。
あれを，JavaScriptで制御できるのですか。

その方法は知りません。
Flashなら得意なので，よくActionScriptで制御しますが，GIFはわかりません。

お礼

できました！！ありがとうございます。
ほんとうにありがとうございます。
これがやりたかったんです！！

補足文間違ってしまって申し訳ありません。
sassakun様のおっしゃられるように、画像1→画像4ということです。

gif画像についてなんですが、当方がやりたかったのは
表示された画像に動きをつけることです。
その動きの発生要因を、できるならば
マウスを重ねるという方法にしたかったのです。

その方法が不可能な場合、動くgif画像を用意し、
それをJavaＳcriptでランダムに
表示にしてみようという方法も考えていたのです。

わかりづらい質問文に答えて頂き本当にありがとうございます。
とても参考になりました。
本当にありがとうございました。

回答No.1

noname#35109

上はそのままで，document.writeの部分だけを変るので良いと思います。

---例------------------------------
document.write("<img src='"+img[n]+"' border='0' onmouseover=src='画像4.jpg' onmouseout=src='"+img[n]+"'>");
----------------------------------
(↑改行していません。１行です。)

クォーテーションの位置などが，ちゃんとしていないと，うまく動作しないようです。

補足

回答ありがとうございます。
上記の方法は可能だったんですが私のやりたい事と
少し違いました。
私の説明不足、申し訳ありません。
再度説明させて頂いて、よろしければまたご教授ください。

ランダム画像1～3があります。
マウスを重ねたときに表示される画像4～6があります。
ランダムで
画像1が選ばれたときはマウスを重ねると画像3。
画像2が選ばれたときはマウスを重ねると画像4。
というように表示されるのはランダム選択
マウスを重ねたときは対応する画像を任意でという
方法がやりたいのですが可能でしょうか？

やはり動くgif画像をランダム表示などの方が
はやいのでしょうか？
よろしければ補足回答お願い致します。