• コーディング ファクトリーHOME
  • Coding Methodology
  • 第85回 レスポンシブ対応 ロールオーバークリッカブルマップの実装

コーディングメソドロジー

第85回 レスポンシブ対応 ロールオーバークリッカブルマップの実装

SEOの観点から最近はあまり使われなくなってきたクリッカブルマップですが、地図やイラストの一部から他のページにリンクする場合など、まだまだ使用するタイミングは多いと思います。今回はそんなクリッカブルマップをレスポンシブに対応させ、ロールオーバーも同時に実装してみましょう。

クリッカブルマップをレスポンシブ対応させる

クリッカブルマップをレスポンシブ対応させる

クリッカブルマップのリンクエリアはマップとなる画像の左上を基準にした座標で指定するため、従来はマップ画像をリサイズさせると座標がズレてしまっていました。以下のプラグインを使うと、マップ画像をリサイズさせても、リンクエリアがズレてしまうことなくクリッカブルマップを実装することができます。
Responsive Image Maps jQuery Plugin
https://github.com/stowball/jQuery-rwdImageMaps
Copyright (c) 2012 Matt Stow

A-1.<head>内でプラグインを読み込みます。

A-1.<head>内でプラグインを読み込みます。

コード①-A ( HTML )

A-1.<head>内でプラグインを読み込みます。

A-2.クリッカブルマップを実装したい位置に以下のHTML(コード①-A) を記述します。

クリッカブルマップにロールオーバーを実装

コード①-B ( HTML )

コード①-B ( HTML )

B-1.各リンクエリアのロールオーバー画像を、マップ画像と同サイズで用意します。
B-2コード①-Aをロールオーバー用にアレンジします(コード①-B)。マップとなる<img>に任意のクラス.areaMap01を与えます(①-B-1)。 <area>タグのdata-src属性の値に、ロールオーバー画像をそれぞれ指定します(①-B-2)。 全体をdivで囲み、任意のクラス.areaMap-Wrap01を与えます(①-B-3)。

コード② ( CSS )

コード② ( CSS )

B-3.CSSを記述します(コード②)。マウスオーバー時の画像のちらつきを防ぐため、.areaMapWrap01にマップ画像を背景として読み込みます。

コード③( Javascript )

コード③( Javascript )

B-4.JSを記述します(コード③)。 <area>に対し、hover時の動きを記述していきます(③-1)。data-srcに指定された画像パスを.areaMap01のsrc属性と入れ替えることでマウスオーバーさせ、さらにフェードの動きも実装しています。
カーソルが離れたときには、src属性をもとのマップ画像のパスに戻します(③-2)。

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • レスポンシブWebデザインセミナーがDVDになりました。
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム