クリッカブル・マップは、
通常、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>
コメント