ウェブデザイン制作/ウェブ・ポジショニングのウェブZYCO'S [ ウェブ・トリック: DynamicHTML ]

ウェブに動きを付加するDynamicHTML

ウェブ上でマウスの動きでイベントを発生させコンテンツが変化(移動させたり重ね合わせたり)する動的なHTML(DynamicHTML)を作成してウェブのインタラクティブの機能をアップさせる。

17 February,2006

ウェブ・トリック : DynamicHTML

イメージCSSロールオーバー
イメージCSSロールオーバー
JavaScriptを使わないでイメージだけをロールオーバーさせる2つのサンプル:htmlとCSS参照
スイッチメニュー
スライドダウン・スイッチメニュー
クリックで開閉するスイッチメニューだ。スライドダウンするときに視覚効果を発揮する。Reference link : zip file download
CSSロールオーバー・リストメニュー
CSSロールオーバー・リストメニュー
Javascriptを使わないでCSSのfloatとdisplay:blockを使ってロールオーバーを演出する。
onMouseで説明表示する---解説
onMouseで説明表示する---解説
CSSレイアウトに対応したポップアップメッセージを紹介。また過去に紹介したスクリプトの再利用も解説。 ※特集(7 Feb,2006掲載)
フロントページ
5thのフロントページ
ビジュアルを優先させた前回のフロントページ。テクニックを凝縮させた演出が見もの。
Pop-Up Message---完全なるリンク説明
Pop-Up Message---完全なるリンク説明
重要なリンクについてPop-Up Messageを表示、その配置および特殊効果に25の配置パラメーターを装備。イメージマップを使った別SAMPLE(MAP案内)は特に有効!
スライド---複数のレイヤーを移動させる
Slide---複数のレイヤーを移動させる
複数のレイヤーを指定したスタ−ト位置から指定した終了位置へスライド移動させるためのサンプルファンクションはこれslideLAYERs() だ!
スライドをインラインフレームに入れる
Slide---3frameをiframeに入れる
ボタンをクリックすると固定されたウィンドウの画面が移動。dhtmlをメインページにフレーム構成し、それを更にiframeで読み込むと、こうなる!
プルダウンメニュー
DHTML-プルダウンメニュー イメージバージョン
下のテキストバージョンに対して全てをGIFが構成し動作するよう制作。勿論テキストバージョンへの移行も簡単!3階層展開タイプ。
プルダウンメニュー
DHTML-プルダウンメニュー テキストバージョン
4階層展開タイプ。ワンポイントでイメージを使用しているが、その他全ては外部JavaScriptで書かれている。IE5.5以上ではeffectも作動する。
ウィンドウを一から作る
Make a window---小ウィンドウを一から作る
HTMLとCSSのコンビネーションがウィンドウを構築するためのコンポーネントとして使用される。
インラインフレームをスクロール
Scrollable iframe---What's New
onMouseで画面を上下にスクロールさせ、スイッチボタンをクリックすると画面を変更する、iframeを使ったスペシャルバージョン。Referenceは■■■をクリック。
インラインフレームの演出
インラインフレームをトップに使う!
コンパクトにiframeのウインドウを演出させる参考出品。ロールオーバーとアニメーションをボタンに加え、レイアウトされたテキストを表示させる。
インラインフレームのページ切り替え
インラインフレームを使ってページをチェンジ
ページレイアウトをセンターにして同一ページ内で複数のページを切り替える効果的な方法を解説。トップページなんかにこれ使えるぞ。/reference
イメージを横方向へ流す
Conveyor Belt slideshow
イメージを大量に横方向に流出させるスライドショー。イメージインデックスを考えるとき、クールに演出させるひとつの解決策。/reference link
Wipe Splash
別のページに転送される前にダイナミックなイントロ効果(テキストとイメージワイプする)を与えます。ボンドのイメージ加工が一番時間くったとか?/reference link
ツリーメニュー
ツリーメニュー
アニメーションGIFを使ったツリーメニュー。リンクをクリックすると階層下のメニューが開きます。/No reference(ソースを参照してください)
スライドCD BOOK
CD BOOK
OPENをクリックするとBOOKがスライドして開きます。TABにマウスを重ねるとページが移動します。動的効果を狙って作成。/No reference(ソースを参照してください)
IE Data Binding
スライドショー IE Data Binding
CSVファイルを読み込んで複数項目のテキストとイメージを表示します。/reference link(download)
CSVファイルのIE Data Binding
Database(Sorting and Filtering with the TDC)---IE Data Binding
CSVファイルを読み込んでリスト表示します。各項目よりソートが実行できます。/reference link(download)
メッセージ スクローラー
Message scroller
リンクメッセージをスクロールさせては一時停止させる、そしてまたスクロールするスクリプトです。
オンマウスでテキストをチェンジする
OnMouse Change Text
リンクされたテキストやイメージにマウスを置くとテキストがチェンジ(イメージも)します。/reference link
オンマウス説明表示
Explain windows
リンクされたテキストにマウスを置くと小ウインドウが開き説明を表示します。/reference link
広告自動消滅
Advertisement
DHTML AD(advertisement)スクリプトは、広告をコンテンツの中央に表示して、自動的に消滅します。/reference link
スライドショー ドロップダウン
Slide show : drop down
イメージ変換はドロップダウンしてチェンジします。商品のイメージインデックスに効果的。/reference link
メッセージをスクロールする
Scrollers : basic
[scroll up]と[scroll down] でメッセージをアップ&ダウンスクロールさせます。/reference link


※2001年からのアーカイブで、新しいものから順番に並べてあります。古いものは表記のリファレンスリンクが切れているものがあります。その場合はソースを参照してください。

ページのトップへ


文字の大きさについて 文字の大きさは、ブラウザで調節して下さい。
当サイトへのリンクは自由に行えます。