今回は４４回目です。
ボタンをクリックすると画像が移動していきます。

ボタンで画像をスライドさせる
今回の効果は、ボタンをクリックすると、あらかじめ指定しておいた位置へ画像がスライドしていくというものです。
位置の指定は自由にできます。ただ、移動前と移動先の上からあるいは左からの位置は全く同じ数字ではダメです。例えば、ｔｏｐ２００からｔｏｐ２００へ指定しても移動はできません。
数字を変えて位置調整するだけでそんなに難しくなくできると思います。
今月も少しだけこの実験にお付き合い下さい。

ポイント ポイント #test0 { left:20px;top:280px;font-size:12pt } で、画像の最初の位置と文字の大きさを指定します。
#test1 { left:100px;top:180px;font-size:12pt } で、ボタンの表示位置と文字の大きさを指定します。
VALUE="left:20;top:280からleft:220;top:90へ" で、ボタンに表示させる文字を書きます。
slideLAYER('test0',20,280,220,90,10) で、どこからどこへ移動させるかを指定します。最後の１０は、移動の速さです。小さい数字だと速くなり、大きい数字だと遅くなります。
効果 効果 ボタンをクリックすると、そのボタンで指定した位置から位置へ、指定した速さで画像が移動していきます。
使い方 使い方 実際の実験画面のソースをご覧下さい。

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

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

この効果は、数字だけ変えれば割と簡単に使えると思います。
気をつけるのは、最初の画像の位置と一番最初のボタンで指定した位置（「〜から〜へ」の「〜から」の部分）を同じにすることです。
できれば、最後（３番目）のボタンをクリックした時に、移動先が一番最初の位置と同じになるようにしておけば流れがスムーズになります。

2000年05月の実験と似ていますが、あの時のは、横から出てきて上の方に消えていくものでした。
今回のは、位置の指定がもっと自由にできて斜めにも動きます。その代わり、ボタンで操作しなければなりませんが。
目的によって使いやすい効果を試してみて下さい。


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