クリッカブル・マップ（usermap）を視覚化する

クリッカブル・マップは、
通常、CSSの border や outline, background を指定しても再現出来ません。

そこで、jQueryプラグインを使用すると、
ロールオーバ時に選択範囲のエリアを表示したり、
モックを作成する時には、常にタップエリアを表示したり出来ます。

プラグイン
設定パラメータ
実行コード

プラグイン

設定パラメータ

$.fn.maphilight.defaults = {
    fill: true, //枠内を塗りつぶすか
    fillColor: '000000', //枠内色
    fillOpacity: 0.2, //枠内の透明度
    stroke: true, //枠線の表示
    strokeColor: 'ff0000', //枠線の色
    strokeOpacity: 1, //枠線の透明度
    strokeWidth: 1, //枠線の太さ
    fade: true, //表示/非表示にフェードするか  true:する / false:しない
    alwaysOn: false, //常時表示するか true:する / false:しない
    neverOn: false,
    groupBy: false,
    wrapClass: true, //trueの場合、作成されたdivにimg上のクラスを追加する
    shadow: false, //影の表示
    shadowX: 0, //影の横軸
    shadowY: 0, //影の縦軸
    shadowRadius: 6, //影のぼかし
    shadowColor: '000000', //影の色
    shadowOpacity: 0.8, //影の透明度
    shadowPosition: 'outside', //outside or inside or both
    shadowFrom: false
}

実行コード

実行するエレメントは、area や map タグではなく、usemap を指定した imgタグになります。

<script>
$(document).ready(function(){
    $('.foo').maphilight();
    $('img[usemap]').maphilight({
        alwaysOn: true //常に表示するようデフォルト値を上書きする
    });
});
</script>