コンテンツ上に広がるバナーの作り方

HTMLコンテンツ上に広がるバナーを作成しよう！

今回はマウスのアクションでHTMLコンテンツ上に広がるバナーを作成してみたいと思います。「HTMLコンテンツ上に広がる」というのは、ページ表示の最初はバナー枠に収まるように表示されていますが、何らかのイベントで「HTMLコンテンツ上にレイヤーとして重なる（広がる）」という意味です。

最初に、どのようなデザインにするかを決めましょう。

前回までに作ってきた「FLA-ALE」という架空のビールメーカーのロゴを使用し、これを大きく表示するバナーを作ってみます。動作は「初期状態は大きなロゴの一部がスーパーバナー領域に見えており、そこをクリックするとバナーエリアがHTMLコンテンツ上に広がり、ロゴのすべてが見える」というものです（図1）。

次にHTMLとしてどのような処理を行えばいいかを考えます。

もともと表示させているスーパーバナー領域のdiv要素をそのまま広げると、単にエリアが下方向に押し広げられるだけで、「すでに表示中のHTMLに重なる」という表現ができませんので、別にオーバーレイ用のdiv要素を用意する必要があります。

そこで、スーパーバナー領域に相当するdiv要素と、オーバーレイさせるdiv要素の2つのdiv要素を準備し、これらの切り替えを考えます。便宜上、それぞれのdiv要素を、プレビュー、オーバーレイと呼ぶことにします。

実装方法の検討

最初に思いつくのは、「プレビューにPNGなどの画像を表示し、それをクリックしたときにJavaScriptでオーバーレイを表示させ、そこにFlashバナーを広げる」という方法です（方法1）。

しかし、方法1では最初の画像バナーとFlashバナーの表現の連携が難しく、インタラクティブな表現を中心とするコラムの意図から外れますので、今回は採用しません。

次に、「Flashバナーを囲うdiv要素を、レイヤーとして表示させる」方法を考えてみます（方法2）。つまり、「プレビュー時には、そのdiv要素の位置とサイズをバナー枠に合わせて表示させ、バナー拡大時にはそのdiv要素のサイズを変化させるだけ」という方法です。

方法2の利点は読み込むSWFが1つで良いので、HTML構造やJavaScriptとFlashのやりとりがシンプルになることです。一見うまく動作するように見えますが、方法2には、ウィンドウをリサイズしたときに問題が発生します。

今回も使用しているPrototype.jsには、ブラウザウィンドウに対して発生する各種イベントに対して、イベントハンドラを定義することができます。その機能を使用して、以下のようなJavaScriptコードでイベントハンドラを登録します。

Event.observe( window, 'resize', window_resize, false );

このようにして、ウィンドウリサイズ時にwindow_resize関数内でオーバーレイ用div要素の位置を修正します。しかし、一部のブラウザ上ではウィンドウリサイズ中（マウスでドラッグしている最中）にresizeイベントが発生せず、ドラッグのマウス動作が終わった後にのみresizeイベントが発生しまうものがありました。

つまり、そのタイミングでしかウィンドウリサイズに伴う表示位置調整が行えないので、ウィンドウリサイズ中にオーバーレイ部分がズレて見えてしまうのです。この問題は、オーバーレイ表示させているときには常につきまとうことになります。

結論として、方法2ではプレビュー状態でもオーバーレイ表示させているため、常にウィンドウリサイズで、画像が崩れているように見えてしまう可能性があります。これではページ全体の見栄えと印象が悪くなりますので、今回は方法2も採用しないことにします。