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

jQueryプラグイン「maphilight」で領域ごとに色や定義を分ける方法

関連:クリッカブルエリアを可視化(色付け)するjQueryプラグイン「maphilight」

jQueryプラグイン「maphilight」を使うと、mapタグareaタグで定義されたクリック可能なエリアに色が付き可視化されます。

ただ、そのまま使うと全てのmapタグで色指定を含む各種パラメータが一括で設定されます。

 

実は、「maphilight」の定義は個別に指定することも可能です。

日本地図

最初は気付かなかったのですが、「maphilight」の解説ページにさらりと方法が掲載されています。

jQuery maphilight documentation

 

もともと必須であるjquery.maphilight.jsファイルに加えて、同じくjQueryプラグインのjquery.metadata.jsというファイルを併せて使います。

jquery.metadata.jsについては上記のサイトからだとリンクが切れてしまっていますが、以下のページより入手可能です。

GitHub - jquery-archive/jquery-metadata: A jQuery plugin for extracting metadata from DOM elements.

 

上記の2ファイルを読み込んだ状態で、areaタグclass="{fillColor:'00ff00'}"という記述を追加すると、追加したエリアのみ新たにオプションを付与することが可能です。

これは、fillColorに限らず、「maphilight」のほかのオプションについてもエリアごとに個別で指定が可能です。

頑張って元ファイルにカスタマイズをかけてみようと思いましたが、途中で気付けて良かったです。