maphilightプラグインで画像の一部を強調表示

maphilight？

HTMLのイメージマップで、指定されている部分をハイライトするjQuery プラグインです。画像の一部を四角で囲ったり、顔を丸で囲ったりできます。今回は画像へ説明文をつけるために使用しました。

使い方

初期設定(指定しない場合は、デフォルトの設定が適用されます)

$.fn.maphilight.defaults = {
	fill: true,  // 枠内を塗りつぶすかどうか
	fillColor: '000000', // 塗りつぶす色
	fillOpacity: 0.2, // 色の透明度
	stroke: true, // 枠を線で囲むかどうか
	strokeColor: 'ff0000', // 囲む線の色
	strokeOpacity: 1, // 線の透明度
	strokeWidth: 1, // 線の太さ
	fade: true, // 表示or非表示にする際フェードさせるかどうか
	alwaysOn: false // 常時表示するかどうか。通常はマウスオーバーで表示
}

初期処理

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

上記を実行することで、usemap属性を持つimg要素の一部(area要素で指定)をハイライトするようにします。HTMLの例は以下の通り。

<img src="example.png" usemap="#example" alt="example">
<map name="example">
<area shape="rect" alt="四角形" coords="10,20,100,100">
<area shape="circle" alt="円形" coords="190,60,50">
<area shape="poly" alt="多角形" coords="300,10,260,100,320,90">
</map>

トラブルなど

maphilightの実行タイミング

onloadのタイミングでmaphilight()を実行しましたが、jQueryがDOMを探せていないみたいでした。

$.(function(){$('img[usemap]').maphilight();});

で対処。これはmaphilightとは別の話になりそう。

coordsのエラー

area要素にcoords属性を指定しますが、プラグインはその内容をチェックしていません。coords=",,,"などとするとエラーになります。

応用

画像に説明を付加

プロパティのalwaysOnをtrueにして、以下を実行すると画像にポップアップやら説明を表示したりできます。

$('area').each( function(i,node){
       var node = $(node);
       // ポップアップのトリガーを仕込むといいかも。何か良いスクリプトがあったら教えてください。
       node.bind("mouseover",function(){return showTips();});
       node.bind("mouseout",function(){return hideTips()});
       // クリックするとそのareaタグのaltをアラートとして表示
       node.click(function(){alert(node.attr("alt"));return false;});
});

イメージマップをSVGファイルから生成？

SVGファイルからイメージマップを生成するsvg2imagemap.pyというスクリプトが付属しています。これが使えるとイメージマップ生成がだいぶ楽になるんじゃないかなーと思うのですが、SVGなどに詳しくないので使い方もよくわかっていません。今回は画像をクリックしてその座標をalertするスクリプトを作り、せかせかとareaタグを作りました。あまり使い物にならないのでこのスクリプトはまたいつか機会があれば・・・。

jomalog