クリックされたらワイプで別画像に切り替える

動作ブラウザ
Internet Explorer Netscape Navigator
4.0x 4.5 5.0x 5.5 6.0 4.x 6.0
Windows - × ×
Macintosh × × × - - × ×
UNIX - - - - - × ×

解  説  クリックされたらワイプで別画像に切り替えるには画像にスタイルシートでトランジション効果を指定しておきます。onClickイベントでクリックを検知したら関数を呼び出します。関数内ではフィルタに対してApply()、表示画像URLの切り替え、最後にPlay()で自動的にワイプ効果が適用されます。
コード <html> <head> <title>クリックされたらワイプで別画像に切り替える</title> <script language="JavaScript"><!-- efNum = 1; // ワイプの種類 count = 0; iName = ["image0.jpg","image1.jpg","image2.jpg","image3.jpg"]; function changeImg(iObj) { iObj.filters["revealTrans"].Apply(); iObj.filters["revealTrans"].Transition = efNum; count = ( count + 1 ) % iName.length; iObj.src = iName[ count ]; iObj.filters["revealTrans"].Play(); } // --></script> </head> <body> クリックすると画像がワイプで別画像に切り替わります。<br><br> <img src="image0.jpg" style="filter:revealTrans(duration=1)" onClick="changeImg(this)"> </body> </html>

■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!