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

jQuery maphilight documentation

 

昨日の記事で、画像の一部をクリック可能にする方法を取り扱いました。

html5で画像などの一部をクリック可能にする方法

マウスポインタを当てるとマウスカーソルの形が変わるのがわかりますが、一見しただけではクリック可能なエリアが判別できません。

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

 

使い方は単純で、jquery.maphilight.jsをロードし以下のコードを実行するのみです。

$('img[usemap]').maphilight();

ソースは以下より入手可能です。

GitHub - kemayo/maphilight: jQuery plugin that adds highlighting to image maps

日本地図

「可視化する」ボタンをクリックすると、画像上のクリック可能エリアがハイライトされます。

 

また、maphilight()を呼び出す際にはパラメータを付与することが可能です。

付与できるパラメータについては冒頭のリンク先に記載されています。

{
	fill: true, // エリアを塗りつぶす(true)
	fillColor: '000000', // 塗りつぶすカラーコード
	fillOpacity: 0.2, // 塗りつぶしの透過度(0=透明、1=完全な塗りつぶし)
	stroke: true, // エリアを枠線で囲む(true)
	strokeColor: 'ff0000', // 枠線のカラーコード
	strokeOpacity: 1, // 枠線の透過度
	strokeWidth: 1, // 枠線の太さ
	fade: true, 
	alwaysOn: false, // エリアの表示タイミング(true=常に表示、false=オンマウス時のみ表示)
	neverOn: false,
	groupBy: false,
	wrapClass: true,
	shadow: false, // エリアの影を表示する(true)
	shadowX: 0,
	shadowY: 0,
	shadowRadius: 6,
	shadowColor: '000000', // 影のカラーコード
	shadowOpacity: 0.8, // 影の透過度
	shadowPosition: 'outside',
	shadowFrom: false
}

適当にコメントを書いてみました。試してないパラメータについてはおいおい補足します。たぶん。