画像のランダムチェンジとフェードイン効果
質問ですが、まず最初に失礼がありましたらお許し下さい。
http://oshiete1.goo.ne.jp/qa3495988.html での質問に関連していると思うので、例を引用させて頂きます。
横590px縦300のメイン画像があり、その横に横180px縦50pxの画像を６個にしての設置を行います。横の180px縦50px画像をロールオーバーにし、更にその画像にマウスを乗せた時に横590px縦300pxのメイン画像も同時に変えたい・・
ここまでは回答で納得したのですが、メイン画像を一定時間でランダムチェンジさせる事とメイン画像の変化時にフェードイン効果を与える事の２点に挌闘しています。過去の質問ログを全部調べましたが、ないものですね。
<html>
<head>
<title></title>
<style type="text/css">
img{border:1px solid red;}
#box0 {
width:770px;
height:300px;
position:relative;
}
#box mainview{
position:absolute;
top:0;left:0;
}
#box0 ul{
position:absolute;
top:0;left:590px;
list-style-type:none;
margin:0;
padding:0;
}
#box0 li{
margin:0;
padding:0;
}
#box0 li img{
vertical-align:top;
}
</style>
<script type="text/javascript">
function sample(obj,mode){
var images = obj.getElementsByTagName('img');
images[0].style.display = (mode)?'none':'inline';
images[1].style.display = (mode)?'inline':'none';
var idNo = images[0].id.match(/(\d)/);
for(var x=document.getElementById('mainview').firstChild;
x;x=x.nextSibling){
if(x.id){
if(!mode && x.id.match(/0/) || mode && x.id.match(idNo[1]))
x.style.display = 'inline';
else
x.style.display = 'none';
}
}
}
</script>
</head>
<body>
<div id="box0">
<span id="mainview">
<img src="xxx0" width="590" height="180" alt="xxx0" id="xxx0">
<img src="xxx1" width="590" height="180" alt="xxx1" id="xxx1" style="display:none;">
<img src="xxx2" width="590" height="180" alt="xxx2" id="xxx2" style="display:none;">
<img src="xxx3" width="590" height="180" alt="xxx3" id="xxx3" style="display:none;">
<img src="xxx4" width="590" height="180" alt="xxx4" id="xxx4" style="display:none;">
<img src="xxx5" width="590" height="180" alt="xxx5" id="xxx5" style="display:none;">
<img src="xxx6" width="590" height="180" alt="xxx6" id="xxx6" style="display:none;">
</span>
<ul>
<li onmouseover="sample(this,true)" onmouseout="sample(this,false)">
<a href=""><img src="yyy1" width="180" height="50" alt="yyy1" id="yyy1"><img src="zzz1" width="180" height="50" alt="zzz1" id="zzz1" style="display:none"></a></li>
<li onmouseover="sample(this,true)" onmouseout="sample(this,false)">
<a href=""><img src="yyy2" width="180" height="50" alt="yyy2" id="yyy2"><img src="zzz2" width="180" height="50" alt="zzz2" id="zzz2" style="display:none"></a></li>
<li onmouseover="sample(this,true)" onmouseout="sample(this,false)">
<a href=""><img src="yyy3" width="180" height="50" alt="yyy3" id="yyy3"><img src="zzz3" width="180" height="50" alt="zzz3" id="zzz3" style="display:none"></a></li>
<li onmouseover="sample(this,true)" onmouseout="sample(this,false)">
<a href=""><img src="yyy4" width="180" height="50" alt="yyy4" id="yyy4"><img src="zzz4" width="180" height="50" alt="zzz4" id="zzz4" style="display:none"></a></li>
<li onmouseover="sample(this,true)" onmouseout="sample(this,false)">
<a href=""><img src="yyy5" width="180" height="50" alt="yyy5" id="yyy5"><img src="zzz5" width="180" height="50" alt="zzz5" id="zzz5" style="display:none"></a></li>
<li onmouseover="sample(this,true)" onmouseout="sample(this,false)">
<a href=""><img src="yyy6" width="180" height="50" alt="yyy6" id="yyy6"><img src="zzz6" width="180" height="50" alt="zzz6" id="zzz6" style="display:none"></a></li>
</ul>
</div>
</body>
</html>
の中に何を追加すれば・・・
ご教授の程よろしくお願いします。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_1_thumbnail_img_sm.png)
お礼
単数形と複数形の違いなのですか。 ありがとうございます。 それと、予備問題なのですが、答えは下記のように出来ているのですが、 1 デスクトップ 2 ノート 3 ハードウェア 4 ソフトウェア 5 ＯＳ（オペレーティングシステム） 6 アプリケーション 7 WindowsＯＳ 8 ＭａｃＯＳ 9 ワープロソフト 10 表計算ソフト 11 プレゼンテーションソフト 12 メールソフト 13 ブラウザソフト 14 グラフィックスソフト 15 プリンタ 16 ディスプレイ 17 キーボード 18 マウス 19 制御装置 20 演算装置 21 ＣＰＵ たとえば(8)のＭａｃＯＳですが、これは「ＭａｃＯＳ Ｘ」が正解なのか、それとも、クラッシックなのか、ＭａｃＯＳだけなのか、不安なのです。 実は私はＳＥですが、この微妙な点で子供にはっきりと教えてあげられません。父親の威厳というヤツです。。。