changeLAYERimage/画像フェイド入れ替えBOX

数枚の画像が(デフォルトでは3枚)重なり合って同じ部分に表示されています。changeLAYERimage()を呼び出すと、重なり順が変わり(z-index)、一番上の画像がフェイドイン前の画面がフェイドアウトされ、ゆっくりと入れ変わります。TOPや商品の紹介等に画像を一枚に限定できない場合などに便利かと思います。
構造としては、htmlでは空のdivに、ナビゲーションボタンのonmouseoverで関数を呼び出し、javascript側からgetElementByIdで、コードをhtmlのdivに配置しています。そのときに各イメージを、z-indexで重なり順を関数の引数により変更させ出力します。あとは透明度をフェイドさせる関数で、あわせて入れ替わる用に、opasityを変更させています。
スクリプト名称 | ![]() |
|
梱包内容 | ![]() |
|
![]() |
![]() |
|
![]() |
||
![]() |
||
![]() |
||
操作確認済ブラウザ | ![]() ![]() ![]() ![]() |
|
最終更新日 | 2007/06/15 | |
