jQueryプラグイン「ImageMapster」というものがあります。
http://www.outsharked.com/imagemapster/
イメージマップをJQueryで実現するのですが、なにせ情報が少ない！
とはいえ、どうしても使いたかったので、読めない英語サイトを漁りましたよ。
今回、複雑なことはしないのですが、前もって取得しておいた座標値をもとに矩形を
表示する、というのを実現しました。
こちらは、矩形を表示する場合のスケルトンです。（半透明の赤い矩形を表示）
——————————————————————————————
<script type=”text/javascript” src=”js/jquery.imagemapster.js”></script>
<img id=”pic” src=”” alt=”” border=”1″ usemap=”#maparea” />
<map id=”maparea” name=”maparea”>
<area data-key=”area1″ id=”area1″ shape=”rect” coords=”座標値” href=”” alt=”” />
<area data-key=”area2″ id=”area2″ shape=”rect” coords=”座標値” href=”” alt=”” />
</map>
$(function () {
$(‘#pic’)
.mapster({
mapKey: ‘data-key’,
fillColor: ‘ff0000’,
fillOpacity: 0.2,
strokeColor: ‘ff0000’,
strokeOpacity: 1
})
.mapster(‘set’,true,’area1,area2′);
});
——————————————————————————————
黒い画像イメージ上にイメージマップを表示したところ
使いこなせば、面白いことができそうなプラグインです。
