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

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

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

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

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

日本地図

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

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

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

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

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

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