|
рони,
Не понимаю как вот это просчитывается const zoom = _ => { el.scrollTo(0, 0); img.width = min_width + (max_width - min_width) * ratio / max_ratio; img.height = img.width * (max_height / max_width); } |
Цитата:
|
Не хватает знаний понять почему происходит конфликт. Все работает, подсветка, перемещение, а масштабирование не работает.
И ошибок не видно. <!doctype html> <html lang="ru"> <head> <meta charset="utf-8"> <title>index</title> <style> .blok { max-width: 1600px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; } .fertezj { width: 100%; height: 480px; cursor: crosshair; overflow: hidden; touch-action: none; padding: 0; margin: 0; } .fertezj img{ padding: 0; margin: 0; display: block; } .mashtab { display: flex; justify-content: center; align-items: center; margin: 10px 10px 10px 10px; } .plus { width: 50px; height: 50px; cursor: pointer; display: flex; justify-content: center; align-items: center; margin: 0px 20px 0px 0px; background-image: url(https://rakipov.ru/files/plus.svg); background-repeat: no-repeat; background-position: center; background-color:darkgray; } .minus { width: 50px; height: 50px; cursor: pointer; display: flex; justify-content: center; align-items: center; background-image: url(https://rakipov.ru/files/minus.svg); background-repeat: no-repeat; background-position: center; background-color:darkgray; } .minus.dis, .plus.dis { opacity: .2; } .linia{ opacity: 0; } </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://cdn.jsdelivr.net/npm/imagemapster@1.5.4/dist/jquery.imagemapster.min.js"></script> </head> <body> <div class="blok"> <div class="fertezj"><img src="https://rakipov.ru/files/kvadraty.jpg" usemap="#6116112a3ae24" alt="" ></div> <div class="mashtab_blok"> <div class="mashtab"> <div class="plus"><img src="izobrazhenie/linia.png" width="100%" class="linia" alt=""></div> <div class="minus"><img src="izobrazhenie/linia.png" width="100%" alt="" class="linia"></div> </div> </div> </div> <map name="6116112a3ae24"><area shape="poly" href="/#0" coords="2947,1752,2947,1959,3154,1959,3361,1959,3361,1752,3361,1545,3154,1545,2947,1545"><area shape="poly" href="/#1" coords="2183,1752,2183,1959,2390,1959,2597,1959,2597,1752,2597,1545,2390,1545,2183,1545"><area shape="poly" href="/#2" coords="1405,1752,1405,1959,1612,1959,1819,1959,1819,1752,1819,1545,1612,1545,1405,1545"><area shape="poly" href="/#3" coords="641,1752,641,1959,848,1959,1055,1959,1055,1752,1055,1545,848,1545,641,1545"><area shape="poly" href="/#4" coords="2947,1116,2947,1323,3154,1323,3361,1323,3361,1116,3361,909,3154,909,2947,909"><area shape="poly" href="/#5" coords="2183,1116,2183,1323,2390,1323,2597,1323,2597,1116,2597,909,2390,909,2183,909"><area shape="poly" href="/#6" coords="1405,1116,1405,1323,1612,1323,1819,1323,1819,1116,1819,909,1612,909,1405,909"><area shape="poly" href="/#7" coords="641,1116,641,1323,848,1323,1055,1323,1055,1116,1055,909,848,909,641,909"><area shape="poly" href="/#8" coords="2947,501,2947,708,3154,708,3361,708,3361,501,3361,294,3154,294,2947,294"><area shape="poly" href="/#9" coords="2183,501,2183,708,2390,708,2597,708,2597,501,2597,294,2390,294,2183,294"><area shape="poly" href="/#10" coords="1405,501,1405,708,1612,708,1819,708,1819,501,1819,294,1612,294,1405,294"><area shape="poly" href="/#11" coords="641,501,641,708,848,708,1055,708,1055,501,1055,294,848,294,641,294"></map> <script src="https://raw.githubusercontent.com/jamietre/ImageMapster/e08cd7ec24ffa9e6cbe628a98e8f14cac226a258/dist/jquery.imagemapster.js"></script> <script> $("img[usemap]").mapster({ scaleMap: true, fill: true, fillColor: '2CA7DC', fillOpacity: 0.75 }); </script> <script> document.addEventListener("DOMContentLoaded", function() { document.querySelectorAll('.fertezj').forEach(el => { let _startX, _startY, _scrollLeft, _scrollTop, max_width, max_height, min_width, min_height; const pointerHandler = (event) => { const { screenX, screenY } = event; if (event.type === "pointerdown") { document.addEventListener("pointermove", pointerHandler); document.addEventListener("pointerup", pointerHandler); _startX = screenX; _startY = screenY; _scrollLeft = el.scrollLeft; _scrollTop = el.scrollTop; } if (event.type === "pointerup") { document.removeEventListener("pointermove", pointerHandler); document.removeEventListener("pointerup", pointerHandler); } if (event.type === "pointermove") { const dx = (screenX - _startX); const dy = (screenY - _startY); el.scrollTo( _scrollLeft - dx, _scrollTop - dy ); } event.preventDefault(); } el.addEventListener("pointerdown", pointerHandler); let img = el.querySelector("img"); let ratio = max_ratio = 10; const zoom = _ => { console.log(el.scrollLeft) let _w = img.width, _h = img.height; img.width = min_width + (max_width - min_width) * ratio / max_ratio; img.height = img.width * (max_height / max_width); _w -= img.width; _h -= img.height; _w = el.scrollLeft - _w/2; _h = el.scrollTop - _h/2; el.scrollTo( _w, _h ); } const _load = _ => { max_width = img.naturalWidth; max_height = img.naturalHeight; min_width = el.clientWidth; el.style.height = Math.trunc(min_width * (max_height / max_width)) + "px"; min_height = el.clientHeight; el.scrollTo( (max_width - min_width) / 2, (max_height - min_height) / 2 ); } img.complete ? _load() : img.addEventListener("load", _load); let nav = el.nextElementSibling; nav.addEventListener("pointerdown", ({ target }) => { if (target = target.closest(".plus, .minus")) { ratio += target.classList.contains("plus") ? 1 : -1; ratio = Math.max(0, Math.min(ratio, max_ratio)); nav.querySelector(".plus").classList.toggle("dis", ratio === max_ratio); nav.querySelector(".minus").classList.toggle("dis", !ratio); zoom(); } }); }) }); </script> </body> </html> |
Сергей Ракипов, может какую-нибудь библиотеку найти где всё это есть или библиотеки нельзя?
|
Цитата:
|
Цитата:
будет let nav = el.nextElementSibling.nextElementSibling; |
рони,
понял, исправил, а как сделать что бы масштаб советовал ареа мап? |
Цитата:
|
Не могу найти синтаксическую ошибку
В скрипте Добавляю этот скрипт и подсветка перестает работать showToolTip: true, mapKey: 'id', areas: [ { key: "kvadrat_1", toolTip: $("#kvadrat_1").attr('title') }, { key: "kvadrat_2", toolTip: $("#kvadrat_2").attr('title') }, { key: "kvadrat_3", toolTip: $("#kvadrat_3").attr('title') }, { key: "kvadrat_4", toolTip: $("#kvadrat_4").attr('title') }, { key: "kvadrat_5", toolTip: $("#kvadrat_5").attr('title') }, { key: "kvadrat_5", toolTip: $("#kvadrat_6").attr('title') }, { key: "kvadrat_7", toolTip: $("#kvadrat_7").attr('title') }, { key: "kvadrat_8", toolTip: $("#kvadrat_8").attr('title') }, { key: "kvadrat_9", toolTip: $("#kvadrat_9").attr('title') }, ] <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <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> <style> .box{ width: 600px; margin: 0 auto; } </style> </head> <body> <div class="box"> <img src="https://rakipov.ru/files/sample2.jpg" usemap="#61160930693a6" alt=""> </div> <map name="61160930693a6"> <area shape="poly" href="kvadrat_1" title="это цветной квадрат 1" coords="407,500,407,593,500,593,593,593,593,500,593,407,500,407,407,407"> <area shape="poly" href="kvadrat_2" title="это цветной квадрат 2" coords="207,500,207,593,300,593,393,593,393,500,393,407,300,407,207,407"> <area shape="poly" href="kvadrat_3" title="это цветной квадрат 5" coords="7,500,7,593,100,593,193,593,193,500,193,407,100,407,7,407"> <area shape="poly" href="kvadrat_4" title="это цветной квадрат 4" coords="407,302,407,395,500,395,593,395,593,302,593,209,500,209,407,209"> <area shape="poly" href="kvadrat_5" title="это цветной квадрат 5" coords="7,302,7,395,100,395,193,395,193,302,193,209,100,209,7,209"> <area shape="poly" href="kvadrat_6" title="это цветной квадрат 6" coords="207,300,207,393,300,393,393,393,393,300,393,207,300,207,207,207"> <area shape="poly" href="kvadrat_7" title="это цветной квадрат 7" coords="407,100,407,193,500,193,593,193,593,100,593,7,500,7,407,7"> <area shape="poly" href="kvadrat_8" title="это цветной квадрат 8" coords="207,100,207,193,300,193,393,193,393,100,393,7,300,7,207,7"> <area shape="poly" href="kvadrat_9" title="это цветной квадрат 9" coords="7,100,7,193,100,193,193,193,193,100,193,7,100,7,7,7"> </map> <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, showToolTip: true, mapKey: 'id', areas: [ { key: "kvadrat_1", toolTip: $("#kvadrat_1").attr('title') }, { key: "kvadrat_2", toolTip: $("#kvadrat_2").attr('title') }, { key: "kvadrat_3", toolTip: $("#kvadrat_3").attr('title') }, { key: "kvadrat_4", toolTip: $("#kvadrat_4").attr('title') }, { key: "kvadrat_5", toolTip: $("#kvadrat_5").attr('title') }, { key: "kvadrat_5", toolTip: $("#kvadrat_6").attr('title') }, { key: "kvadrat_7", toolTip: $("#kvadrat_7").attr('title') }, { key: "kvadrat_8", toolTip: $("#kvadrat_8").attr('title') }, { key: "kvadrat_9", toolTip: $("#kvadrat_9").attr('title') }, ] }); </script> </body> </html> |
Цитата:
Сейчас тут попробовал опять не работает <!doctype html> <html lang="ru"> <head> <meta charset="utf-8"> <title>index</title> <style> .blok { max-width: 1600px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; } .fertezj { width: 100%; height: 480px; cursor: crosshair; overflow: hidden; touch-action: none; padding: 0; margin: 0; } .fertezj img{ padding: 0; margin: 0; display: block; } .mashtab { display: flex; justify-content: center; align-items: center; margin: 10px 10px 10px 10px; } .plus { width: 50px; height: 50px; cursor: pointer; display: flex; justify-content: center; align-items: center; margin: 0px 20px 0px 0px; background-image: url(https://rakipov.ru/files/plus.svg); background-repeat: no-repeat; background-position: center; background-color:darkgray; } .minus { width: 50px; height: 50px; cursor: pointer; display: flex; justify-content: center; align-items: center; background-image: url(https://rakipov.ru/files/minus.svg); background-repeat: no-repeat; background-position: center; background-color:darkgray; } .minus.dis, .plus.dis { opacity: .2; } .linia{ opacity: 0; } </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> </head> <body> <div class="blok"> <div class="fertezj"><img src="https://rakipov.ru/files/kvadraty.jpg" usemap="#6116112a3ae24" alt="" ></div> <div class="mashtab_blok"> <div class="mashtab"> <div class="plus"><img src="izobrazhenie/linia.png" width="100%" class="linia" alt=""></div> <div class="minus"><img src="izobrazhenie/linia.png" width="100%" alt="" class="linia"></div> </div> </div> </div> <map name="6116112a3ae24"> <area shape="poly" href="/#0" coords="2947,1752,2947,1959,3154,1959,3361,1959,3361,1752,3361,1545,3154,1545,2947,1545"> <area shape="poly" href="kvadrat_1" title="это красный квадрат" coords="2183,1752,2183,1959,2390,1959,2597,1959,2597,1752,2597,1545,2390,1545,2183,1545"> <area shape="poly" href="kvadrat_2" title="это синий квадрат" coords="1405,1752,1405,1959,1612,1959,1819,1959,1819,1752,1819,1545,1612,1545,1405,1545"> <area shape="poly" href="/#3" coords="641,1752,641,1959,848,1959,1055,1959,1055,1752,1055,1545,848,1545,641,1545"> <area shape="poly" href="/#4" coords="2947,1116,2947,1323,3154,1323,3361,1323,3361,1116,3361,909,3154,909,2947,909"> <area shape="poly" href="kvadrat_3" title="это желтый квадрат" coords="2183,1116,2183,1323,2390,1323,2597,1323,2597,1116,2597,909,2390,909,2183,909"> <area shape="poly" href="kvadrat_4" title="это зеленый квадрат" coords="1405,1116,1405,1323,1612,1323,1819,1323,1819,1116,1819,909,1612,909,1405,909"> <area shape="poly" href="/#7" coords="641,1116,641,1323,848,1323,1055,1323,1055,1116,1055,909,848,909,641,909"> <area shape="poly" href="/#8" coords="2947,501,2947,708,3154,708,3361,708,3361,501,3361,294,3154,294,2947,294"> <area shape="poly" href="/#9" coords="2183,501,2183,708,2390,708,2597,708,2597,501,2597,294,2390,294,2183,294"> <area shape="poly" href="/#10" coords="1405,501,1405,708,1612,708,1819,708,1819,501,1819,294,1612,294,1405,294"> <area shape="poly" href="/#11" coords="641,501,641,708,848,708,1055,708,1055,501,1055,294,848,294,641,294"> </map> <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> document.addEventListener("DOMContentLoaded", function() { document.querySelectorAll('.fertezj').forEach(el => { let _startX, _startY, _scrollLeft, _scrollTop, max_width, max_height, min_width, min_height; const pointerHandler = (event) => { const { screenX, screenY } = event; if (event.type === "pointerdown") { document.addEventListener("pointermove", pointerHandler); document.addEventListener("pointerup", pointerHandler); _startX = screenX; _startY = screenY; _scrollLeft = el.scrollLeft; _scrollTop = el.scrollTop; } if (event.type === "pointerup") { document.removeEventListener("pointermove", pointerHandler); document.removeEventListener("pointerup", pointerHandler); } if (event.type === "pointermove") { const dx = (screenX - _startX); const dy = (screenY - _startY); el.scrollTo( _scrollLeft - dx, _scrollTop - dy ); } event.preventDefault(); } el.addEventListener("pointerdown", pointerHandler); let img = el.querySelector("img"); let ratio = max_ratio = 10; const zoom = _ => { console.log(el.scrollLeft) let _w = img.width, _h = img.height; img.width = min_width + (max_width - min_width) * ratio / max_ratio; img.height = img.width * (max_height / max_width); _w -= img.width; _h -= img.height; _w = el.scrollLeft - _w/2; _h = el.scrollTop - _h/2; el.scrollTo( _w, _h ); } const _load = _ => { max_width = img.naturalWidth; max_height = img.naturalHeight; min_width = el.clientWidth; el.style.height = Math.trunc(min_width * (max_height / max_width)) + "px"; min_height = el.clientHeight; el.scrollTo( (max_width - min_width) / 2, (max_height - min_height) / 2 ); } img.complete ? _load() : img.addEventListener("load", _load); let nav = el.nextElementSibling; nav.addEventListener("pointerdown", ({ target }) => { if (target = target.closest(".plus, .minus")) { ratio += target.classList.contains("plus") ? 1 : -1; ratio = Math.max(0, Math.min(ratio, max_ratio)); nav.querySelector(".plus").classList.toggle("dis", ratio === max_ratio); nav.querySelector(".minus").classList.toggle("dis", !ratio); zoom(); } }); }) }); </script> </body> </html> |
Сергей Ракипов,
работает #51 |
Цитата:
|
Ну она работает через раз, вот сейчас работает. Я не знаю почему и меня не глючит она реально не работало.
|
Вот минут прошло и не работает
|
Я вижу что оно работает через раз, но не могу выявить причину. Я сделал цветные квадраты и видно что даже когда зум работает то он работе не так как задумано. То есть оно не зумится а просто перемещается.
<!doctype html> <html lang="ru"> <head> <meta charset="utf-8"> <title>index</title> <style> .blok { max-width: 1600px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; } .fertezj { width: 100%; height: 480px; cursor: crosshair; overflow: hidden; touch-action: none; padding: 0; margin: 0; border: 1px solid #000; } .fertezj img{ padding: 0; margin: 0; display: block; } .mashtab { display: flex; justify-content: center; align-items: center; margin: 10px 10px 10px 10px; } .plus { width: 50px; height: 50px; cursor: pointer; display: flex; justify-content: center; align-items: center; margin: 0px 20px 0px 0px; background-image: url(https://rakipov.ru/files/plus.svg); background-repeat: no-repeat; background-position: center; background-color:darkgray; } .minus { width: 50px; height: 50px; cursor: pointer; display: flex; justify-content: center; align-items: center; background-image: url(https://rakipov.ru/files/minus.svg); background-repeat: no-repeat; background-position: center; background-color:darkgray; } .minus.dis, .plus.dis { opacity: .2; } .linia{ opacity: 0; } </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> </head> <body> <div class="blok"> <div class="fertezj"><img src="https://rakipov.ru/files/kvadraty_2.jpg" usemap="#6116112a3ae24" alt="" ></div> <div class="mashtab_blok"> <div class="mashtab"> <div class="plus"><img src="izobrazhenie/linia.png" width="100%" class="linia" alt=""></div> <div class="minus"><img src="izobrazhenie/linia.png" width="100%" alt="" class="linia"></div> </div> </div> </div> <map name="6116112a3ae24"> <area shape="poly" href="/#0" coords="2947,1752,2947,1959,3154,1959,3361,1959,3361,1752,3361,1545,3154,1545,2947,1545"> <area shape="poly" href="kvadrat_1" title="это красный квадрат" coords="2183,1752,2183,1959,2390,1959,2597,1959,2597,1752,2597,1545,2390,1545,2183,1545"> <area shape="poly" href="kvadrat_2" title="это синий квадрат" coords="1405,1752,1405,1959,1612,1959,1819,1959,1819,1752,1819,1545,1612,1545,1405,1545"> <area shape="poly" href="/#3" coords="641,1752,641,1959,848,1959,1055,1959,1055,1752,1055,1545,848,1545,641,1545"> <area shape="poly" href="/#4" coords="2947,1116,2947,1323,3154,1323,3361,1323,3361,1116,3361,909,3154,909,2947,909"> <area shape="poly" href="kvadrat_3" title="это желтый квадрат" coords="2183,1116,2183,1323,2390,1323,2597,1323,2597,1116,2597,909,2390,909,2183,909"> <area shape="poly" href="kvadrat_4" title="это зеленый квадрат" coords="1405,1116,1405,1323,1612,1323,1819,1323,1819,1116,1819,909,1612,909,1405,909"> <area shape="poly" href="/#7" coords="641,1116,641,1323,848,1323,1055,1323,1055,1116,1055,909,848,909,641,909"> <area shape="poly" href="/#8" coords="2947,501,2947,708,3154,708,3361,708,3361,501,3361,294,3154,294,2947,294"> <area shape="poly" href="/#9" coords="2183,501,2183,708,2390,708,2597,708,2597,501,2597,294,2390,294,2183,294"> <area shape="poly" href="/#10" coords="1405,501,1405,708,1612,708,1819,708,1819,501,1819,294,1612,294,1405,294"> <area shape="poly" href="/#11" coords="641,501,641,708,848,708,1055,708,1055,501,1055,294,848,294,641,294"> </map> <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> document.addEventListener("DOMContentLoaded", function() { document.querySelectorAll('.fertezj').forEach(el => { let _startX, _startY, _scrollLeft, _scrollTop, max_width, max_height, min_width, min_height; const pointerHandler = (event) => { const { screenX, screenY } = event; if (event.type === "pointerdown") { document.addEventListener("pointermove", pointerHandler); document.addEventListener("pointerup", pointerHandler); _startX = screenX; _startY = screenY; _scrollLeft = el.scrollLeft; _scrollTop = el.scrollTop; } if (event.type === "pointerup") { document.removeEventListener("pointermove", pointerHandler); document.removeEventListener("pointerup", pointerHandler); } if (event.type === "pointermove") { const dx = (screenX - _startX); const dy = (screenY - _startY); el.scrollTo( _scrollLeft - dx, _scrollTop - dy ); } event.preventDefault(); } el.addEventListener("pointerdown", pointerHandler); let img = el.querySelector("img"); let ratio = max_ratio = 10; const zoom = _ => { console.log(el.scrollLeft) let _w = img.width, _h = img.height; img.width = min_width + (max_width - min_width) * ratio / max_ratio; img.height = img.width * (max_height / max_width); _w -= img.width; _h -= img.height; _w = el.scrollLeft - _w/2; _h = el.scrollTop - _h/2; el.scrollTo( _w, _h ); } const _load = _ => { max_width = img.naturalWidth; max_height = img.naturalHeight; min_width = el.clientWidth; el.style.height = Math.trunc(min_width * (max_height / max_width)) + "px"; min_height = el.clientHeight; el.scrollTo( (max_width - min_width) / 2, (max_height - min_height) / 2 ); } img.complete ? _load() : img.addEventListener("load", _load); let nav = el.nextElementSibling; nav.addEventListener("pointerdown", ({ target }) => { if (target = target.closest(".plus, .minus")) { ratio += target.classList.contains("plus") ? 1 : -1; ratio = Math.max(0, Math.min(ratio, max_ratio)); nav.querySelector(".plus").classList.toggle("dis", ratio === max_ratio); nav.querySelector(".minus").classList.toggle("dis", !ratio); zoom(); } }); }) }); </script> </body> </html> |
Часовой пояс GMT +3, время: 10:52. |