jQuery maphilight documentation
昨日の記事で、画像の一部をクリック可能にする方法を取り扱いました。
マウスポインタを当てるとマウスカーソルの形が変わるのがわかりますが、一見しただけではクリック可能なエリアが判別できません。
プラグイン「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 }
適当にコメントを書いてみました。試してないパラメータについてはおいおい補足します。たぶん。