【JQuery】ImageMapster【影像地圖】
製作影像地圖需要先找一張圖片，接著透過Dreamweaver作區塊切割，最後利用JQuery元件，即可產生效果。
使用JQuery前，需要引用Jquery元件。
EX︰<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script type="text/javascript" src="jquery.imagemapster.js"></script>
HTML 頁面(參考)︰
<img id="tc" src="ABC.jpg" width="1086" height="482" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="poly" state="HI" coords="155,57,202,85,177,91,173,111,162,120,153,135,175,142,194,124,230,99,273,104,234,69,212,56,197,30,181,26" href="#" />
<area shape="poly" state="AK" coords="154,58,142,86,139,102,113,119,130,127,154,136,165,119,175,99,200,83" href="#" />
</map>
Javascript︰
<script type="text/javascript">
$(function(){
var img = $('#tc');
img.mapster({
fillOpacity: 0.2, //透明度
render_highlight: { //滑鼠移置區塊呈現效果
fillColor: '000000', //區塊填滿顏色
stroke: true, //是否出現框線
strokeColor: 'ff0000', //框線顏色
strokeOpacity: 1, //框線透明度
strokeWidth: 2 //框線寬度
},
render_select: { //選擇後,區塊呈現效果
fillColor: 'ff000c',
stroke: false
},
fadeInterval: 50,
mapKey: 'state', //對應map的key
showToolTip: true, //是否出現提示
areas: [
{ key: 'HI',
toolTip: 'Test Tool Tip'
},
{
key: 'AK',
toolTip: 'Test2 Tool Tip2'
},
]
});
});
</script>
執行畫面(滑鼠移過去)︰
執行畫面(點選後)︰
參考資源︰
使用 jQuery 提昇你 Image MAP 的品質
ImageMapster 官網
留言
張貼留言