21.07.2021, 13:46
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
Сергей Ракипов,
смотрите может это то что вы хотели ...
#22
|
|
21.07.2021, 13:47
|
|
Профессор
|
|
Регистрация: 01.06.2010
Сообщений: 673
|
|
рони,
Не понимаю как вот это просчитывается
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);
}
|
|
21.07.2021, 13:48
|
|
Профессор
|
|
Регистрация: 01.06.2010
Сообщений: 673
|
|
Сообщение от рони
|
Сергей Ракипов,
смотрите может это то что вы хотели ...
#22
|
Вроде да, сейчас буду разбираться |
|
13.08.2021, 12:51
|
|
Профессор
|
|
Регистрация: 01.06.2010
Сообщений: 673
|
|
Не хватает знаний понять почему происходит конфликт. Все работает, подсветка, перемещение, а масштабирование не работает.
И ошибок не видно.
<!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>
Последний раз редактировалось Сергей Ракипов, 13.08.2021 в 17:40.
|
|
13.08.2021, 13:34
|
|
Профессор
|
|
Регистрация: 01.06.2010
Сообщений: 673
|
|
|
Сообщение от Rise
|
|
Сергей Ракипов, может какую-нибудь библиотеку найти где всё это есть или библиотеки нельзя?
|
Я далек от этого, я еще немного JS понимаю а с библиотеками не сталкивался |
|
13.08.2021, 14:20
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
|
Сообщение от Сергей Ракипов
|
|
а масштабирование не работает.
|
между картинкой и блоком навигации вы разместили ещё один элемент, поэтому строка 165.
будет let nav = el.nextElementSibling .nextElementSibling; |
|
13.08.2021, 17:41
|
|
Профессор
|
|
Регистрация: 01.06.2010
Сообщений: 673
|
|
|
рони,
понял, исправил, а как сделать что бы масштаб советовал ареа мап?
|
|
13.08.2021, 17:51
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
|
Сообщение от Сергей Ракипов
|
|
как сделать
|
не подскажу... |
|
15.08.2021, 10:21
|
|
Профессор
|
|
Регистрация: 01.06.2010
Сообщений: 673
|
|
Не могу найти синтаксическую ошибку
В скрипте
Добавляю этот скрипт и подсветка перестает работать
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>
|
|
15.08.2021, 10:34
|
|
Профессор
|
|
Регистрация: 01.06.2010
Сообщений: 673
|
|
|
Сообщение от рони
|
между картинкой и блоком навигации вы разместили ещё один элемент, поэтому строка 165.
будет let nav = el.nextElementSibling.nextElementSibling;
|
Не понимаю тут работает а у меня но компьютере нет, я просто скопировал и вставил, это какая то мистика
Сейчас тут попробовал опять не работает
<!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>
Последний раз редактировалось Сергей Ракипов, 15.08.2021 в 10:37.
|
|
|
|
