kayactech https://blog.hatena.ne.jp/kayactech/ KAYAC Engineers' Blog https://techblog.kayac.com/ JavaScript jquery tips Fxの拡張ではAutoCopyがお気に入りです。agoです。 今回はリニューアルしたwww.kayac.comからKAYACスタイルのページをご紹介したいとおもいます。 このページはぱっと見特殊な処理はないんですが、よく見ると画面下部の画像が斜めに切れており、それぞれ切れた領域ごとにhoverしているのがわかると思います。 ここでは背景の枠部分はimagemapを使用しており、その上の矢印、数字、タイトルはposition:absoluteで別のimgを浮かしています。 （KAYACサイトは曜日ごとに画像の色が変わるため、すべてを一枚の画像にして入れ替える実装は除外しました） 当初ここでは単純… 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Ftechblog.kayac.com%2Fimagemap-hover.html" title="イメージマップでhoverを実現する - KAYAC Engineers&#39; Blog" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> Hatena Blog https://hatena.blog 2009-08-03 12:00:00 rich https://techblog.kayac.com/imagemap-hover.html 1.0 100%