1
私のコードでは、マップ領域を持つdiv内に画像があり、URLから渡された変数に応じて、変数によって指定された領域で画像を最初に拡大します。私はインタラクティブなマップ機能のためにimagemapsterを使用していますが、そのJQueryプラグインにはサイズ変更機能がありますが、左上から画像のサイズを変更するだけです。私は、選択された領域の位置、すなわち初期領域ズームに画像をリサイズしたい。HTML最初に画像のサイズを変更して位置を変更します
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo</title>
<script src="jquery.min.js"></script>
<script src="imagemapster.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div style = "width:867px; height:1109px; border:0; overflow: auto; float:left;">
<img name="front" src="zoo.png" style="max-width:100%;" id="frontmap" usemap="#m_front" alt=""/>
</div>
<map name="m_front" id="m_front">
<area id = "1" shape="poly" coords="56,45,57,257,468,46" href="#" />
<area id = "2" shape="poly" coords="519,166,697,324,699,186" href="#" />
<area id = "3" shape="circle" coords="397,533,224" href="#" />
<area id = "4" shape="rect" coords="647,730,725,851" href="#" />
<area id = "5" shape="rect" coords="118,765,280,855" href="#" />
<area id = "6" shape="rect" coords="271,862,683,1031" href="#" />
</map>
<script>
var i = "1";
$(document).ready(function()
{
var image = $('#frontmap');
image.mapster
({
fillColor: '000000',
fillOpacity: 0.8,
staticState: false
});
});
</script>
</body>
</html>
私はCSSで解決策を探すためにしようとしたが、それらのほとんどは、私が望んでいたし、どちらかの画像を再配置や面積をトリミングするもの行いませんでした。画像を最初にズームして、私が望む領域にズームする方法についての提案は、divスライダーで見ることができます。