slidebox/昇降式イメージBOX
The SlideBox

dl,dt,ddでの、イメージ説明文構造を動的に作成しました。一画面で表示されるサイドバー領域には限度があります。「なるべくスクロールさせないでユーザビリティーを向上させたい」「サイトの高さに制限がある」なんて場合にも、'イメージ'+'説明文'を省スペースで利用できクリック率も上がる(きっと)一石二鳥。
構造としては、floatをかけたdt,ddをひとかたまりのboxとして、各boxをpsition:relativeでtopをマイナスの値に指定し、相対的に配置します。そして各boxにz-indexで重なり順を変えることにより、重なったbox達を作り、各boxのmargi-topをjavascriptによって、増減させています。
スクリプト名称 | ![]() |
|
梱包内容 | ![]() |
|
![]() |
![]() |
|
![]() |
||
![]() |
||
![]() |
||
操作確認済ブラウザ | ![]() ![]() ![]() ![]() ![]() |
|
最終更新日 | 2007/06/30 | |
