今回はMetaCreationsフィルタでランダムスライドショーを行います。
再掲：フィルタのタイプ名と対応Copyrightコード
|
filterValue |
CopyrightValue |
|
ColorFade |
{2A54C908-07AA-11D2-8D6D-00C04F8EF8E0} |
|
GlassBlock |
{2A54C913-07AA-11D2-8D6D-00C04F8EF8E0} |
|
Liquid |
{AA0D4D0A-06A3-11D2-8F98-00C04FB92EB7} |
|
Twister |
{107045CF-06E0-11D2-8D6D-00C04F8EF8E0} |
|
CenterCurls |
{AA0D4D0C-06A3-11D2-8F98-00C04FB92EB7} |
|
PageCurl |
{AA0D4D08-06A3-11D2-8F98-00C04FB92EB7} |
|
Water |
{107045C5-06E0-11D2-8D6D-00C04F8EF8E0} |
|
LightWipe |
{107045C8-06E0-11D2-8D6D-00C04F8EF8E0} |
|
RollDown |
{9C61F46E-0530-11D2-8F98-00C04FB92EB7} |
|
Wormhole |
{0E6AE022-0C83-11D2-8CD4-00104BC75D9A} |
|
Lens |
{107045CA-06E0-11D2-8D6D-00C04F8EF8E0} |
|
FadeWhite |
{107045CC-06E0-11D2-8D6D-00C04F8EF8E0} |
|
Jaws |
{2A54C904-07AA-11D2-8D6D-00C04F8EF8E0} |
|
FlowMotion |
{2A54C90B-07AA-11D2-8D6D-00C04F8EF8E0} |
|
Vacuum |
{2A54C90D-07AA-11D2-8D6D-00C04F8EF8E0} |
|
Grid |
{2A54C911-07AA-11D2-8D6D-00C04F8EF8E0} |
|
Threshold |
{2A54C915-07AA-11D2-8D6D-00C04F8EF8E0} |
|
Ripple |
{AA0D4D03-06A3-11D2-8F98-00C04FB92EB7} |
|
Curls |
{AA0D4D0E-06A3-11D2-8F98-00C04FB92EB7} |
|
PeelABCD |
{AA0D4D10-06A3-11D2-8F98-00C04FB92EB7} |
|
Curtains |
{AA0D4D12-06A3-11D2-8F98-00C04FB92EB7} |
|
BurnFilm |
{107045D0-06E0-11D2-8D6D-00C04F8EF8E0} |
Direct Animation 2DであるMetaCreationsフィルタ「DXTMETA..DLL」の場合はフィルタのタイプが22種類あります。その種類ごとに異なったCopyrightコードがあり、Copyrightプロパティで設定しておかないと社名ロゴが表示されます。
例えば上から三つ目のLiquid（液体）効果の場合はフィルタ名はprogid:DXImageTransform.MetaCreations.Liquidとなります。青い部分は共通です。これに対するCopyrightコードはCopyright MetaCreations Corp. 1998. Unauthorized duplication of this string is illegal. {AA0D4D0A-06A3-11D2-8F98-00C04FB92EB7}となります。やはり緑の部分は共通です。
22種類ある内のひとつをランダムに選び、その効果でセットし、また対応するCopyrightプロパティへの値をセットします。例えば3ならばLiquidとAA0D4D0A-06A3-11D2-8F98-00C04FB92EB7を拾い出してやればできますよね。
1ならColorFade、2ならGlassBlock、・・・、22ならBurnFilmという風に特定の値によって処理を変えるのは覚えていますか？
講座6にありましたswitch～case・・・文ですね。breakを忘れないように。
変数koukaを用意し、koukaに1～22までのランダムな数値を計算で代入します。そのkoukaの値に応じてフィルタ名とCopyright部分の非共通部分を選択するようにしましょう。
var kouka//効果の番号用
var fName//効果名用
var cName//Copyright用
function
slide(){
kouka=Math.floor(Math.random()*22)+1//0～21までの乱数に1を加算して1～22までの乱数にする
switch(kouka){
case 1:
fName="ColorFade";cName="{2A54C908-07AA-11D2-8D6D-00C04F8EF8E0}";break
case 2:
fName="GlassBlock";cName="{2A54C913-07AA-11D2-8D6D-00C04F8EF8E0}";break
case 3:
fName="Liquid";cName="{AA0D4D0A-06A3-11D2-8F98-00C04FB92EB7}";break
case
4:
fName="Twister";cName="{107045CF-06E0-11D2-8D6D-00C04F8EF8E0}";break
case
5:
fName="CenterCurls";cName="{AA0D4D0C-06A3-11D2-8F98-00C04FB92EB7}";break
case
6:
fName="PageCurl";cName="{AA0D4D08-06A3-11D2-8F98-00C04FB92EB7}";break
case
7:
fName="Water";cName="{107045C5-06E0-11D2-8D6D-00C04F8EF8E0}";break
case
8:
fName="LightWipe";cName="{107045C8-06E0-11D2-8D6D-00C04F8EF8E0}";break
case 9:
fName="RollDown";cName="{9C61F46E-0530-11D2-8F98-00C04FB92EB7}";break
case
10:
fName="Wormhole";cName="{0E6AE022-0C83-11D2-8CD4-00104BC75D9A}";break
case
11:
fName="Lens";cName="{107045CA-06E0-11D2-8D6D-00C04F8EF8E0}";break
case
12:
fName="FadeWhite";cName="{107045CC-06E0-11D2-8D6D-00C04F8EF8E0}";break
case
13:
fName="Jaws";cName="{2A54C904-07AA-11D2-8D6D-00C04F8EF8E0}";break
case
14:
fName="FlowMotion";cName="{2A54C90B-07AA-11D2-8D6D-00C04F8EF8E0}";break
case
15:
fName="Vacuum";cName="{2A54C90D-07AA-11D2-8D6D-00C04F8EF8E0}";break
case
16:
fName="Grid";cName="{2A54C911-07AA-11D2-8D6D-00C04F8EF8E0}";break
case
17:
fName="Threshold";cName="{2A54C915-07AA-11D2-8D6D-00C04F8EF8E0}";break
case
18:
fName="Ripple";cName="{AA0D4D03-06A3-11D2-8F98-00C04FB92EB7}";break
case
19:
fName="Curls";cName="{AA0D4D0E-06A3-11D2-8F98-00C04FB92EB7}";break
case
20:
fName="PeelABCD";cName="{AA0D4D10-06A3-11D2-8F98-00C04FB92EB7}";break
case
21:
fName="Curtains";cName="{AA0D4D12-06A3-11D2-8F98-00C04FB92EB7}";break
case
22:
fName="BurnFilm";cName="{107045D0-06E0-11D2-8D6D-00C04F8EF8E0}";break
}
}
koukaは1～22以外の値をとることはありませんので、上記の記述ではdefault部分は不要になります。
後は前回のRevealTransフィルタのようにフィルタをエレメントにセットして、apply()で凍結させ、画像ファイルをsrcプロパティで変更して、play()で再生する。この繰り返しになります。
フィルタはobject.style.filter="progid:DXImageTransform.MetaCreations."+fNameのようになりますね。
Copyrightプロパティはobject.filters["DXImageTransform.MetaCreations."+fName].Copyright="Copyright MetaCreations Corp. 1998. Unauthorized duplication of
this string is illegal. "+cNameとなります。progid:は不要なので注意！！まず""で囲まれた部分はスクリプトでは文字列だと思って間違いありません。もしその部分に変数を使用する場合は""で囲まないようにします。object.filters["DXImageTransform.MetaCreations."+fName]
とりあえず基本的なランダムスライドショー、まとめましょう。
[ソース]
<HTML>
<head>
<meta http-equiv="content-type"
content="text/html; charset=shift_jis">
<META http-equiv="Content-Style-Type"
content="text/css">
<title></title>
</head>
<body
style="margin:0px; padding:0px;">
<img id="simg"
onclick="slide()" src="ph1.jpg" style="position:absolute;
left:20px; top:20px; border:gray 20px ridge; width:333px; height:500px">
<img
id="simg" src="ph2.jpg" style="position:absolute; left:-1000px">
<img
id="simg" src="ph3.jpg" style="position:absolute; left:-1000px">
<script>
var
imgEls=document.all("simg")
var imgsrc=new Array()
for(n=0;n<imgEls.length;n++){
imgsrc[n]=imgEls[n].src
}
var
imgno=0
var kouka//効果の番号用
var fName//効果名用
var cName//Copyright用
function
slide(){
kouka=Math.floor(Math.random()*22)+1//0～21までの乱数に1を加算して1～22までの乱数にする
switch(kouka){
case 1:
fName="ColorFade";cName="{2A54C908-07AA-11D2-8D6D-00C04F8EF8E0}";break
case 2:
fName="GlassBlock";cName="{2A54C913-07AA-11D2-8D6D-00C04F8EF8E0}";break
case 3:
fName="Liquid";cName="{AA0D4D0A-06A3-11D2-8F98-00C04FB92EB7}";break
case
4:
fName="Twister";cName="{107045CF-06E0-11D2-8D6D-00C04F8EF8E0}";break
case
5:
fName="CenterCurls";cName="{AA0D4D0C-06A3-11D2-8F98-00C04FB92EB7}";break
case
6:
fName="PageCurl";cName="{AA0D4D08-06A3-11D2-8F98-00C04FB92EB7}";break
case
7:
fName="Water";cName="{107045C5-06E0-11D2-8D6D-00C04F8EF8E0}";break
case
8:
fName="LightWipe";cName="{107045C8-06E0-11D2-8D6D-00C04F8EF8E0}";break
case 9:
fName="RollDown";cName="{9C61F46E-0530-11D2-8F98-00C04FB92EB7}";break
case
10:
fName="Wormhole";cName="{0E6AE022-0C83-11D2-8CD4-00104BC75D9A}";break
case
11:
fName="Lens";cName="{107045CA-06E0-11D2-8D6D-00C04F8EF8E0}";break
case
12:
fName="FadeWhite";cName="{107045CC-06E0-11D2-8D6D-00C04F8EF8E0}";break
case
13:
fName="Jaws";cName="{2A54C904-07AA-11D2-8D6D-00C04F8EF8E0}";break
case
14:
fName="FlowMotion";cName="{2A54C90B-07AA-11D2-8D6D-00C04F8EF8E0}";break
case
15:
fName="Vacuum";cName="{2A54C90D-07AA-11D2-8D6D-00C04F8EF8E0}";break
case
16:
fName="Grid";cName="{2A54C911-07AA-11D2-8D6D-00C04F8EF8E0}";break
case
17:
fName="Threshold";cName="{2A54C915-07AA-11D2-8D6D-00C04F8EF8E0}";break
case
18:
fName="Ripple";cName="{AA0D4D03-06A3-11D2-8F98-00C04FB92EB7}";break
case
19:
fName="Curls";cName="{AA0D4D0E-06A3-11D2-8F98-00C04FB92EB7}";break
case
20:
fName="PeelABCD";cName="{AA0D4D10-06A3-11D2-8F98-00C04FB92EB7}";break
case
21:
fName="Curtains";cName="{AA0D4D12-06A3-11D2-8F98-00C04FB92EB7}";break
case
22:
fName="BurnFilm";cName="{107045D0-06E0-11D2-8D6D-00C04F8EF8E0}";break
}
imgEls[0].style.filter="progid:DXImageTransform.MetaCreations."+fName
imgEls[0].filters["DXImageTransform.MetaCreations."+fName].Copyright="Copyright
MetaCreations Corp. 1998. Unauthorized duplication of this string is illegal.
"+cName
imgEls[0].filters["DXImageTransform.MetaCreations."+fName].apply()
imgno=(imgno+1)%imgEls.length
imgEls[0].src=imgsrc[imgno]
imgEls[0].filters["DXImageTransform.MetaCreations."+fName].play()
setTimeout("slide()",5000)
}
setTimeout("slide()",5000)
</script>
</body>
</html>
基本形の画像表示部分の上に文字を表示させてみましょう。divエレメントをposition:absoluteで画像の上に重なるように配置します。文字にはグローフィルタをかけておきます（divエレメントにglowフィルタをかけておく）。文字色やフォントサイズなどを設定しておくのも面白いでしょう。ここでは文字色を白に、フォントサイズは12ptに、グローフィルタの色は赤で光彩の強さを5ピクセル（strength=5）としました。
glowフィルタ
<hElement style="filter:glow(Color=color, Strength=strength)">
object.style.filter="glow(Color=color, Strength=strength)"
| color | シャドウ効果の特別な色。#RRGGBBの形式で指定する。あるいはweb safe カラー名。 |
| strength | 発光の強さ（輝度）。1から255までの値を指定する。 |
<div id="div1" style="position:absolute; left:15px; top:500px; color:white; font-size:12pt; filter:progid:DXImageTransform.Microsoft.Glow(Color=#ff0000,Strength=5); width:373px; height:40px; overflow:hidden; text-align:center"></div>
このdivエレメント（id=div1)に文字を表示させます。それにはdivエレメントの内部HTMLとして表示させたい文字を設定します。内部HTMLに設定するにはobject.innerHTMLプロパティを使用します。文字列にHTMLタグを含む場合は解釈されてHTML要素として表示されます。
表示させる文字列をフィルタ名にしてみましょう。
フィルタ名はimgEls[0].style.filterですね。
メタクリランダム基本形、フィルタ名表示あり
・・・ソースを参考にしてくださいね。
ここでswitch～case・・・を使用しましたが、別の方法に気がつきませんか？ランダムに得られた値0～21に、予め決められた文字列を選択してくるのですから、文字列を配列に入れておけばいいことに気がつくことでしょう。
例えばkoukaが0ならば"ColorFade"と"{2A54C908-07AA-11D2-8D6D-00C04F8EF8E0}"、1ならば"GlassBlock"と"{2A54C913-07AA-11D2-8D6D-00C04F8EF8E0}"という具合ですね。
ならばfNameとcNameを配列にしてfName[kouka]とcName[kouka]で文字列を求めればいいのではないでしょうか？文字列は配列要素として予めセットしておけばいいことでしょう。
配列に文字列を要素にするのはもう学習済みです。new Array()は必要としません。直接[と,と]で要素を代入します。
var fName=["文字列１","文字列2",・・・]のようにします。インデックス番号が0から始まるので、fName[0]が"文字列1"となることに注意します。
var fName=["ColorFade","GlassBlock","Liquid","Twister","CenterCurls","PageCurl","Water","LightWipe","RollDown","Wormhole","Lens","FadeWhite","Jaws","FlowMotion","Vacuum","Grid","Threshold","Ripple","Curls","PeelABCD","Curtains","BurnFilm"]//効果名用
var cName=["{2A54C908-07AA-11D2-8D6D-00C04F8EF8E0}","{2A54C913-07AA-11D2-8D6D-00C04F8EF8E0}","{AA0D4D0A-06A3-11D2-8F98-00C04FB92EB7}","{107045CF-06E0-11D2-8D6D-00C04F8EF8E0}","{AA0D4D0C-06A3-11D2-8F98-00C04FB92EB7}","{AA0D4D08-06A3-11D2-8F98-00C04FB92EB7}","{107045C5-06E0-11D2-8D6D-00C04F8EF8E0}","{107045C8-06E0-11D2-8D6D-00C04F8EF8E0}","{9C61F46E-0530-11D2-8F98-00C04FB92EB7}","{0E6AE022-0C83-11D2-8CD4-00104BC75D9A}","{107045CA-06E0-11D2-8D6D-00C04F8EF8E0}","{107045CC-06E0-11D2-8D6D-00C04F8EF8E0}","{2A54C904-07AA-11D2-8D6D-00C04F8EF8E0}","{2A54C90B-07AA-11D2-8D6D-00C04F8EF8E0}","{2A54C90D-07AA-11D2-8D6D-00C04F8EF8E0}","{2A54C911-07AA-11D2-8D6D-00C04F8EF8E0}","{2A54C915-07AA-11D2-8D6D-00C04F8EF8E0}","{AA0D4D03-06A3-11D2-8F98-00C04FB92EB7}","{AA0D4D0E-06A3-11D2-8F98-00C04FB92EB7}","{AA0D4D10-06A3-11D2-8F98-00C04FB92EB7}","{AA0D4D12-06A3-11D2-8F98-00C04FB92EB7}","{107045D0-06E0-11D2-8D6D-00C04F8EF8E0}"]//Copyright用
これで
kouka=Math.floor(Math.random()*22)//0～21までの乱数にする
とすればfName[kouka]とsName[kouka]で文字列を得られますね。
先ほどは
kouka=Math.floor(Math.random()*22)+1//0～21までの乱数に1を加算して1～22までの乱数にする
でしたが、今回は+1加算がないことに注意してください。1～22までの乱数ではなく、0～21までの乱数にしなければなりません。
関数slide()は次のようになります。
function slide(){
kouka=Math.floor(Math.random()*22)//0～21までの乱数にする
imgEls[0].style.filter="progid:DXImageTransform.MetaCreations."+fName[kouka]
div1.innerHTML=imgEls[0].style.filter//フィルタ名をdiv1エレメントに表示する
imgEls[0].filters["DXImageTransform.MetaCreations."+fName[kouka]].Copyright="Copyright
MetaCreations Corp. 1998. Unauthorized duplication of this string is illegal.
"+cName[kouka]
imgEls[0].filters["DXImageTransform.MetaCreations."+fName[kouka]].apply()
imgno=(imgno+1)%imgEls.length
imgEls[0].src=imgsrc[imgno]
imgEls[0].filters["DXImageTransform.MetaCreations."+fName[kouka]].play()
setTimeout("slide()",5000)
}
メタクリランダム、配列仕様・・・先ほどよりもソースが小さくなることに注目ください。
写真の説明文をdiv1エレメントに表示させるには、説明文を配列要素に代入しておき、画像番号を示す変数によって配列のイデックス番号とするとできますね。
上の場合は画像は三つ使用しているので、説明文もみっつ用意します。
var setumei=["クリスマスツリー","鶴の夫婦","雪山"]
番号はimgnoに対応しているので・・・div1.innerHTML=setumei[imgno]となりますね。
ボタンを配置し、ボタンで画像を変更させよう。次のようなボタンを用意してボタンを押すことで画像を変更するようにしてみましょう。但し前の写真がない場合は【前の写真へ】ボタンを非表示に、次の写真がない場合は【次の写真へ】ボタンを非表示にすることを考えます。
ボタンは<input>タグを使用します。rtype="button"にすればプッシュボタンになります。value="文字列"でボタン表面に表示するテキストを設定できます。尚idではなく、nameを使用するのが普通です。name=button1"など。
<input type="button" name="b1" value="前の写真へ">
<input type="button" name="b2" value="次の写真へ">
これを非表示にするにはvisibility="hhiden"にすればいいです。nameがオブジェクト識別子になります。
b1.style.visibility="hidden"
b1ボタンが非表示であるべきなのはどのようなときですか？
play()開始された時に表示されるべき画像番号imgnoが0のときですね。b2ボタンが非表示であるべきなのは？
表示されるべき画像番号imgnoがimgEls.length-1のときです。
ところで【次の写真へ】のときはimgno=(imgno+1)%imgEls.lengthでよいのですが、【前の写真へ】のときはこのままでは前になりませんね。この計算は今回やろうとしているスクリプトでは使いづらそうです。
ボタンをクリックすると次へあるいは前へとなるのですから、ボタンにonclick="スクリプト"で処理を考えてみましょう。
b1・・・onclick="imgno--;slide()"
b2・・・onclick="imgno++;slide()"
これでどうでしょう。a--はa=a-1なのはわかっていますね。a++はa=a+1と同じですよ。
プログラムで1差し引くことをデクリメント、1加えることをインクリメントといいます。
関数slide()では
①imgnoが0ならばb1を非表示に、そうでなければ表示に。
②imgnoがimgEls.length-1と等しい時には非表示に、そうでなければ表示に。
という処理が必要になるだろうことはわかりますね。
if(imgno==0){
b1.style.visibility="hidden"
}else{
b1.style.visibility="visible"
}
if(imgno==imgEls.length-1){
b2.style.visibility="hidden"
}else{
b2.style.visibility="visible"
}
クリックの時にplay()中である場合は何もしないようにしましょう。if(imgEls[0].filters[0].status==0){処理}
imgEls[0].filters[0]とすればimgEls[0].filters["DXImageTransform.MetaCreations."+fName[kouka]]とする必要がなくなりますね。imgElsにMetaCreationsフィル対外がかかっている場合（複数のフィルタがかかっている場合は注意しなければなりませんが）。
初期状態のためにb1ボタンはインラインスタイルシートでvisibility:hiddenにしておきます。またフィルタplay()のstatusプロパティを取得するためにステージとなるIMGエレメント（一番目の）にはとりあえずfilter:progid:DXImageTransform.MetaCreations.ColorFade()をセットしておきます。
[ソース]
<HTML>
<head>
<meta http-equiv="content-type"
content="text/html; charset=shift_jis">
<META http-equiv="Content-Style-Type"
content="text/css">
<title></title>
</head>
<body
style="margin:0px; padding:0px;">
<img id="simg"
onclick="slide()" src="ph1.jpg" style="position:absolute;
left:20px; top:20px; border:gray 20px ridge; width:333px; height:500px; filter:progid:DXImageTransform.MetaCreations.ColorFade()">
<img
id="simg" src="ph2.jpg" style="position:absolute; left:-1000px">
<img
id="simg" src="ph3.jpg" style="position:absolute; left:-1000px">
<div
id="div1" style="position:absolute; left:15px; top:500px; color:white;
font-size:12pt; filter:progid:DXImageTransform.Microsoft.Glow(Color=#ff0000,Strength=5);
width:373px; height:40px; overflow:hidden; text-align:center"></div>
<input type="button" name="b1" value="前の写真へ"
onclick="if(imgEls[0].filters[0].status==0){imgno--;slide()}"
style="position:absolute; left:100px; top:570px;
visibility:hidden">
<input type="button" name="b2" value="次の写真へ"
onclick="if(imgEls[0].filters[0].status==0){imgno++;slide()}"
style="position:absolute; left:220px; top:570px">
<script>
var
imgEls=document.all("simg")
var imgsrc=new Array()
for(n=0;n<imgEls.length;n++){
imgsrc[n]=imgEls[n].src
}
var
imgno=0
var kouka//効果の番号用
var fName=["ColorFade","GlassBlock","Liquid","Twister","CenterCurls","PageCurl","Water","LightWipe","RollDown","Wormhole","Lens","FadeWhite","Jaws","FlowMotion","Vacuum","Grid","Threshold","Ripple","Curls","PeelABCD","Curtains","BurnFilm"]//効果名用
var cName=["{2A54C908-07AA-11D2-8D6D-00C04F8EF8E0}","{2A54C913-07AA-11D2-8D6D-00C04F8EF8E0}","{AA0D4D0A-06A3-11D2-8F98-00C04FB92EB7}","{107045CF-06E0-11D2-8D6D-00C04F8EF8E0}","{AA0D4D0C-06A3-11D2-8F98-00C04FB92EB7}","{AA0D4D08-06A3-11D2-8F98-00C04FB92EB7}","{107045C5-06E0-11D2-8D6D-00C04F8EF8E0}","{107045C8-06E0-11D2-8D6D-00C04F8EF8E0}","{9C61F46E-0530-11D2-8F98-00C04FB92EB7}","{0E6AE022-0C83-11D2-8CD4-00104BC75D9A}","{107045CA-06E0-11D2-8D6D-00C04F8EF8E0}","{107045CC-06E0-11D2-8D6D-00C04F8EF8E0}","{2A54C904-07AA-11D2-8D6D-00C04F8EF8E0}","{2A54C90B-07AA-11D2-8D6D-00C04F8EF8E0}","{2A54C90D-07AA-11D2-8D6D-00C04F8EF8E0}","{2A54C911-07AA-11D2-8D6D-00C04F8EF8E0}","{2A54C915-07AA-11D2-8D6D-00C04F8EF8E0}","{AA0D4D03-06A3-11D2-8F98-00C04FB92EB7}","{AA0D4D0E-06A3-11D2-8F98-00C04FB92EB7}","{AA0D4D10-06A3-11D2-8F98-00C04FB92EB7}","{AA0D4D12-06A3-11D2-8F98-00C04FB92EB7}","{107045D0-06E0-11D2-8D6D-00C04F8EF8E0}"]//Copyright用
var
setumei=["クリスマスツリー","鶴の夫婦","雪山","海に沈む夕日"]//説明文
function
slide(){
if(imgno==0){
b1.style.visibility="hidden"
}else{
b1.style.visibility="visible"
}
if(imgno==imgEls.length-1){
b2.style.visibility="hidden"
}else{
b2.style.visibility="visible"
}
kouka=Math.floor(Math.random()*22)//0～21までの乱数にする
imgEls[0].style.filter="progid:DXImageTransform.MetaCreations."+fName[kouka]
imgEls[0].filters["DXImageTransform.MetaCreations."+fName[kouka]].Copyright="Copyright
MetaCreations Corp. 1998. Unauthorized duplication of this string is illegal.
"+cName[kouka]
imgEls[0].filters["DXImageTransform.MetaCreations."+fName[kouka]].apply()
imgEls[0].src=imgsrc[imgno]
div1.innerHTML=setumei[imgno]
imgEls[0].filters["DXImageTransform.MetaCreations."+fName[kouka]].play()
}
</script>
</body>
</html>
ところで異種トランジションフィルタをダブルでかけることはできるのでしょうか？
こういうことは試してみるのが一番！！
RevealTransフィルタとMetaCreationsフィルタを同時にセットしてほぼ同時に実行させてみました。
サンプルをご覧になってください。ちゃ～んと二つの効果が重なってトランジションします。
RevealTransとMetaCreations同時Play()
次回予定は二次元配列を紹介します。JavaScriptでは一般のプログラム言語のように多次元配列というものが元々備わっていませんが、配列オブジェクトを配列オブジェクトの要素にする（配列の配列）という方法で多次元配列のように使用できます。余りややこしくならないように二次元配列だけ紹介する予定です。
var hairetu=new Array()
for(i=0;i<3;i++){
hairetu[i]=new Array()
}
のような感じです。これですとhairetu[0]、hairetu[1]、hairetu[2]がそれぞれ配列オブジェクトになりますので、hairetu[0][0]、hairetu[0][1]、hairetu[1][1]、hairetu[2][1]・・・のように二次元配列同様に扱えます。