今回は５４回目です。
画像がワイプして表示されます。

画像をワイプさせる
今回の効果は、ページを開くと画像がワイプして段々と表示されるというものです。画像を消す時も同じように段々と消すことができます。
画像の表示に少しアクセントをつけられるのではないかと思います。
今月も少しだけこの実験にお付き合い下さい。

ポイント ポイント ソースの上の方に書いてある＜style type="text/css"＞で、必ず画像を表示させる位置と画像の幅と高さを指定します。
ここでは、表示させる位置を左から１８０ピクセル（left:180）、上から１６０ピクセル（top:160）の位置に指定しています。画像の大きさは、幅が１００ピクセル（width:100）、高さが９９ピクセル（height:99）です。
＜/script＞から上４行目の wipe=new Wipe('wipe',div,20,10); の２０と１０の数字を小さくするとワイプのスピードが速くなり、大きくすると遅くなります。
効果 効果 ページを読み込む、あるいは「画像を開く」をクリックすると、指定した画像が wipe=new Wipe('wipe',div,20,10); で指定した速さでワイプして表示されます。画像を閉じる時も同じです。
使い方 使い方 実際の実験画面のソースをご覧下さい。

今回の実験でわかったこと

この効果はＩＥの４．０、ネットスケープのＶｅｒ４．０からできます。

＜ＢＯＤＹ＞タグに onLoad="init();" onUnload="if(wipe)wipe.cancel()" を入れるのを忘れないで下さい。
この効果のスクリプトは結構長くて難しいので、取りあえずソースを全部コピーして、画像の名前と表示位置、縦横の大きさ、スピードだけを変えてやってみて下さい。


ご意見などありましたらメールを送って下さい。お待ちしています。
(E-mail:hiroko@ladys-page.com)
超簡単ＨＰ実験室 実験室のトップページに