Мне нужно настроить
Основной блок должен занимать max-width 900 рх высота должна height 600 рх
Исходный размер картинки 1200рх ширина 800рх по высоте.
Картинка при перетаскивание не должна выходить за границы основного блока (что бы не было пустоты, прижаты к границам, см. вложение)
При нажатии Zoom Out картинка не должна выходить за границы основного блока (что бы не было пустоты, прижаты к границам, см. вложение)
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>index</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style type="text/css">
body {
background: #F5FCFF;
}
section {
text-align: center;
margin: 0 auto;
padding: 0px 20px 0px 20px;
}
.buttons {
margin: 40px 0 0;
display: flex;
justify-content: center;
}
button{
width: 96px;
margin: 0px 5px 0px 5px;
}
.blok_map{
margin: 0 auto;
position: relative;
border: 10px solid #7F7F7F;
max-width: 900px;
height: 600px;
}
.map{
}
.karta{
}
</style>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/es6-promise/dist/es6-promise.auto.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://rakipov.ru/files/panzoom.js"></script>
</head>
<body>
<section>
<div class="parent blok_map">
<div class="panzoom map" id="panzoom-element">
<img src="https://rakipov.ru/files/map.jpg" usemap="#619b0da354566" class="karta" width="1200" height="800" alt="">
</div>
</div>
</div>
<div class="buttons">
<button id="zoom-in">Zoom In</button>
<button id="zoom-out">Zoom Out</button>
<button id="reset">Reset</button>
</div>
<map id="map_ID" name="619b0da354566">
<area shape="poly" href="/#0" coords="385,734,385,753,422,753,459,753,459,734,459,715,422,715,385,715">
<area shape="poly" href="/#1" coords="78,703,78,764,154,764,230,764,230,703,230,642,214,642,198,643,197,689,197,736,153,736,109,736,109,690,109,643,104,643,99,642,88,642,78,641">
<area shape="poly" href="/#2" coords="839,634,838,636,838,702,839,768,854,768,870,768,870,701,870,633,855,633,839,633">
<area shape="poly" href="/#3" coords="726,634,725,636,725,702,726,768,741,768,757,768,757,701,757,633,742,633,726,633">
<area shape="poly" href="/#4" coords="610,634,609,636,609,702,610,768,625,768,641,768,641,701,641,633,626,633,610,633">
<area shape="poly" href="/#5" coords="462,605,451,616,475,640,499,665,499,715,499,766,514,766,529,766,529,707,529,649,501,621,474,593">
<area shape="poly" href="/#6" coords="338,621,310,649,310,707,311,766,326,766,341,766,341,715,341,665,365,641,389,617,377,605,366,593">
<area shape="poly" href="/#7" coords="404,553,387,570,404,586,421,603,437,586,454,570,437,553,421,536">
<area shape="poly" href="/#8" coords="937,561,937,596,963,596,989,596,990,595,990,594,1001,561,1012,527,1002,527,993,527,965,526,937,526">
<area shape="poly" href="/#9" coords="496,465,475,487,496,508,518,529,539,508,560,487,539,465,518,444">
<area shape="poly" href="/#10" coords="984,434,945,435,940,435,936,435,936,470,936,504,976,504,1017,504,1027,470,1038,436,1038,434,1038,433,1030,433,1023,433">
<area shape="poly" href="/#11" coords="776,502,777,574,840,574,903,574,903,514,903,453,902,453,901,453,889,458,877,463,876,504,876,545,846,545,815,545,815,501,815,457,831,457,848,457,848,452,849,447,849,439,849,431,813,431,776,431">
<area shape="poly" href="/#12" coords="581,429,580,431,580,460,581,489,611,489,641,489,641,459,641,429,611,428,581,428">
<area shape="poly" href="/#13" coords="136,356,111,382,111,383,111,384,184,454,257,525,258,525,259,525,284,499,309,473,309,472,309,471,235,401,162,331,161,330,161,330">
<area shape="poly" href="/#14" coords="879,313,878,313,878,329,878,344,938,344,998,344,998,346,999,347,999,353,999,359,1012,359,1025,359,1025,336,1025,313,952,312,879,312">
<area shape="poly" href="/#15" coords="531,324,531,343,580,343,629,343,629,324,629,304,580,304,531,304">
<area shape="poly" href="/#16" coords="777,331,777,360,798,360,819,360,819,331,819,303,798,302,777,302">
<area shape="poly" href="/#17" coords="669,303,668,305,668,332,669,360,689,360,710,360,710,331,710,302,690,302,669,302">
<area shape="poly" href="/#18" coords="878,206,879,222,938,222,997,222,998,223,999,225,999,231,999,237,1012,237,1025,237,1025,213,1025,190,952,190,878,190">
<area shape="poly" href="/#19" coords="531,206,531,225,580,225,629,225,629,206,629,186,580,186,531,186">
<area shape="poly" href="/#20" coords="672,198,672,224,690,224,707,224,707,198,707,172,689,171,672,171">
<area shape="poly" href="/#21" coords="784,204,784,237,802,237,820,237,820,218,820,198,817,198,814,198,814,184,814,171,799,170,784,170">
<area shape="poly" href="/#22" coords="283,176,283,194,327,194,372,194,412,235,453,276,453,323,453,369,472,369,490,369,490,315,490,262,439,210,387,159,335,158,283,158">
<area shape="poly" href="/#23" coords="1110,96,1099,105,1099,106,1099,107,1119,130,1139,152,1139,153,1139,154,1112,178,1086,202,1086,204,1086,205,1094,215,1103,226,1104,226,1105,226,1143,190,1181,154,1180,152,1179,150,1150,118,1121,86,1121,86,1120,86">
<area shape="poly" href="/#24" coords="531,87,531,106,580,106,629,106,629,87,629,67,580,67,531,67">
<area shape="poly" href="/#25" coords="980,89,980,117,1001,117,1021,117,1021,89,1021,61,1001,61,980,61">
<area shape="poly" href="/#26" coords="884,62,883,62,883,90,883,117,904,117,925,117,925,89,925,61,904,61,884,61">
<area shape="poly" href="/#27" coords="786,89,786,117,807,117,827,117,827,89,827,61,807,61,786,61">
<area shape="poly" href="/#28" coords="668,89,668,117,689,117,709,117,709,89,709,61,689,61,668,61">
<area shape="poly" href="/#29" coords="78,69,78,130,95,130,111,130,111,69,111,7,94,7,78,7">
</map>
</section>
<script src="https://cdn.jsdelivr.net/npm/imagemapster@1.5.4/dist/jquery.imagemapster.min.js"></script>
<script>
$("img[usemap]").mapster({
scaleMap: true,
fill: true,
fillColor: '2CA7DC',
fillOpacity: 0.75,
});
</script>
<script>
const elem = document.getElementById( 'panzoom-element' );
const zoomInButton = document.getElementById( 'zoom-in' );
const zoomOutButton = document.getElementById( 'zoom-out' );
const resetButton = document.getElementById( 'reset' );
const panzoom = Panzoom( elem );
const parent = elem.parentElement
// No function bind needed
parent.addEventListener( 'wheel', panzoom.zoomWithWheel );
zoomInButton.addEventListener( 'click', panzoom.zoomIn )
zoomOutButton.addEventListener( 'click', panzoom.zoomOut )
resetButton.addEventListener( 'click', panzoom.reset )
</script>
</body>
</html>
