ウェブZYCO'S > ウェブ・トリック:DynamicHTML > インラインフレームをトップに使う!

  iframe---トップページで使う!効果的なスモールウインドウの切り替え 
トップで使うことを考えるとこうなる!

iframeを使って前回アップしたモノよりもっとデコレイティブにチャレンジしたのが今回のモノである!

iframeのコード自体は前回と全く同じなのでコード記載方法は前回を参考のこと。テクニックとしてはロールオーバーとアニメーションも使っているが、ここも他のtipsで使いまわしてきているので問題はない。

そう、問題は・・・。
この手のモノは設計図を引きながらサイズを決めてからデザインするようだ。いきなりディスプレイに向かってマウスを走らせると、何回も修正を余儀なくされる。

トップにこのボディを置きiframe内にテキストを表示させることを想定したので、ボタンに入れるテキスト、iframe内に表示されるテキストサイズは9pxを使った。いつもなら12pxを使ってしまうが、何せコンパクトにまとめられない。表示したいテキストの文字数が決まって、それを平均的なブロックサイズにしてイメージを起こした、そんな感じかな。

出来上がって、ボタンをクリックして画面をチェンジさせる。おおっ、ピタっとはまって気持ちよい。

・・・といことで、後日トップにはめ込んだ。以下はトップについて。

何度かのトライでまずまずの納得したカタチになった。テイストはiPodだ。
トップなのでテキスト部分を画像に変更。ロールオーバーを駆使した結果デザイン的に重くなったので、グラデーション部分はバックグラウンドで処理し、メインのロールオーバー画像は透過GIFを使いファイルを軽くした。

iframeでロールオーバーで画像をチェンジさせる場合、アクションが遅くなるようなので、軽いファイル作成とその構成が必要だ。
Back