Fxの拡張ではAutoCopyがお気に入りです。agoです。
今回はリニューアルしたwww.kayac.comからKAYACスタイルのページをご紹介したいとおもいます。
このページはぱっと見特殊な処理はないんですが、よく見ると画面下部の画像が斜めに切れており、それぞれ切れた領域ごとにhoverしているのがわかると思います。
ここでは背景の枠部分はimagemapを使用しており、その上の矢印、数字、タイトルはposition:absoluteで別のimgを浮かしています。 （KAYACサイトは曜日ごとに画像の色が変わるため、すべてを一枚の画像にして入れ替える実装は除外しました）
当初ここでは単純に$(‘area’).hover()でイベントを取っていたのですが、areaの上に浮いているimgにマウスが乗った時には画像を切り替えない処理が必要になり、その部分の判定を行う必要がありました。
通常であればevent.targetでイベントの発生元を取得し、画像要素であればmouseoutを無視する処理でいいんですが、なぜかarea上のimgのに限ってevent.targetがareaを指してしまい判断ができません。
そこで各ブラウザ毎にEvent Objectを解析したところ、IE、safariではevent.toElement、FxではEvent.relatedTargetでimgを取得できました。
imagemapでhoverという、非常にニッチなJSを作成する場合ご注意ください。
カヤックではflashなら30秒でできることにあえてJSで挑戦する技術者を募集しています！ （最初はJSでもすぐできると思ってたんですが。。。）
