読者です 読者をやめる 読者になる 読者になる

イメージマップでhoverを実現する

javascript jquery tips

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でもすぐできると思ってたんですが。。。)