イメージマップでhoverを実現する : tech.kayac.com - KAYAC engineers' blog

Fxの拡張ではAutoCopyがお気に入りです。agoです。 今回はリニューアルしたwww.kayac.comからKAYACスタイルのページをご紹介したいとおもいます。 このページはぱっと見特殊な処理はないんですが、よく見ると画面下部の画像が斜めに切れており、それぞれ切れた領域ごとにhoverしているのがわかると思います。 ここでは背景の枠部分はimagemapを使用しており、その上の矢印、数字、タイトルはposition:absoluteで別のimgを浮かしています。 （KAYACサイトは曜日ごとに画像の色が変わるため、すべてを一枚の画像にして入れ替える実装は除外しました） 当初ここでは単純に$(‘area’).hover()でイベントを取っていたのですが、areaの上に浮いているimgにマウスが乗った時には画像を切り替えない処理が必要になり、その部分の判定を行う必要がありました。 通常