大連開発区生活
大連経済開発区に住んでいる筆者の生活模様を特異な視点でご紹介。 大連のありのままの姿を知っていただければ幸いです。
スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
【メモみたいなもの】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を、ホー
ムページの画面上の目立たないところで画像サイズ1ドット×1ドットで配置し
ておく、というのが対処方法だそうだ。
まさしく点みたいな画像だ。
だが、まぎれもなく画像Bである。こうすることで、IEのメモリ上には画像Aと画
像Bが読み込まれているため、ロールオーバーによる画像切り替えは一瞬ででき
るようになる。

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

ちゃんと動かないIEのために、こういう面倒な処理をしなければならないのは理
不尽だが、一番利用者が多いブラウザがIEなのだから仕方がない。
頼むからIE8ではちゃんと動作するようにして欲しいものだ。
それでも、IE6~7を無視できるようになるのは3年以上先だろうけど・・・。
スポンサーサイト
コメント
この記事へのコメント
コメントを投稿する
URL:
Comment:
Pass:
秘密: 管理者にだけ表示を許可する
 
トラックバック
この記事のトラックバックURL
この記事へのトラックバック
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。