【メモみたいなもの】IEのロールオーバー表示バグには困った

仕事である企業のホームページを作成した。

あまり凝ったデザインは好きじゃないという、ありがたいお客様のご意見のおか
げで、私のような本職ではないにわかWebデザイナーにも仕事をいただけた次第
だが、それでもプロとしてのエッセンス(小技)をホームページに適用しようと思
い立った。

専門用語では「ロールオーバー」と言う。
マウスカーソルをメニューボタンの上に乗せると、ボタンの色が明るく変化す
る、という技。
昔は単純に色を変えていただけだが、最近は画像ファイルを入れ替えることがで
きる。
つまりマウスカーソルが乗っていない時の画像Aとマウスカーソルが乗った時の
画像Bを入れ替えるというのがカラクリだ。

マウスカーソルが乗ってから画像ファイルをダウンロードしていたのでは遅いの
で、Prelaodという技を使う。あらかじめ画像Aと画像Bをダウンロードさせてお
けば、メニューボタンの画像が一瞬にして切り替わるという理屈である。
ところがこのPreload、FirefoxやChromeなどGekko系のブラウザでは機能する
が、IEではなぜか動かない。
ホームページをDreamweaverなどのソフトで制作している場合、特に設定をしな
い限り、プレビュー画面ではIEが起動する。だが、このプレビューはくせ者で、
ローカル（つまりパソコンのハードディスク上）に一時ファイルを作成して、そ
れをIEで開くだけなので、Prelaodが働いていなくとも、画像Aと画像Bの切り替
えは一瞬にして行われる。問題は、実際にサーバーにコンテンツをアップロード
してからである。

ボタンの上をマウスカーソルがなぞると、画像Bに切り替わるのがえらく遅い。
ワンテンポ遅れて画像Bに切り替わり、しばらくしてから画像Aに戻る。
プレビュー時のきびきびとした動きとはえらい違いだ。

「まぁ、中国だし、インターネット回線が遅いから仕方ないでしょ。日本なら
ちゃんと表示されますから大丈夫ですよ。」
一つあたりわずか数百バイトのボタン用画像を読み込むのに、中国の回線が遅い
とか、理由にならない(笑)。
昨夜は、この件でさんざん悩んで、結局ボタン部分のロールオーバー処理に問題
があるのだろうと結論づけた。以前別のサイトを作った際は、画像を切り替え表
示する技は使っておらず、色のみを切り替えていた。だから画面のもたもたした
症状は無かったのである。

今朝方になって、ネットでIEのロールオーバー処理には問題がある記事を発見。
その対処方法も書かれていた。要するにIEではPreloadコマンドを送っても機能
しないということだ。
じゃあ、どうするかというと、あらかじめ先読みさせておきたい画像Bを、ホー
ムページの画面上の目立たないところで画像サイズ１ドット×１ドットで配置し
ておく、というのが対処方法だそうだ。
まさしく点みたいな画像だ。
だが、まぎれもなく画像Bである。こうすることで、IEのメモリ上には画像Aと画
像Bが読み込まれているため、ロールオーバーによる画像切り替えは一瞬ででき
るようになる。

技術者的視点やデザイナー的視点から見ても、全くスマートじゃない（イケてな
い）方法だが、こうしないとIEではロールオーバーが正常に動かないのだから仕
方ない。
とは言え、実際の運用ではレイヤー機能を使って、Barなどのレイヤーの裏に１
ドット×１ドットのダミー画像のレイヤーを配置しているので、見た目上は全く
わからない。
家の壁のベニヤ板にマジックで落書きをしておいても、その上から壁紙を貼って
しまえば見えないのと同じ理屈だ。

ちゃんと動かないIEのために、こういう面倒な処理をしなければならないのは理
不尽だが、一番利用者が多いブラウザがIEなのだから仕方がない。
頼むからIE８ではちゃんと動作するようにして欲しいものだ。
それでも、IE6〜7を無視できるようになるのは３年以上先だろうけど・・・。