13.08.2021, 10:53
|
|
Профессор
|
|
Регистрация: 01.06.2010
Сообщений: 651
|
|
ksa,
Не сработало
<!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>
<style>
.box{
width: 600px;
margin: 0 auto;
}
.kvadrat{
}
</style>
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="https://raw.githubusercontent.com/jamietre/ImageMapster/e08cd7ec24ffa9e6cbe628a98e8f14cac226a258/dist/jquery.imagemapster.js"></script>
<script>
$(function(){
$('#61160930693a6').mapster({
scaleMap: true,
fill: true,
fillColor: '2CA7DC',
fillOpacity: 0.75
});
})
</script>
</head>
<body>
<div class="box">
<img src="https://rakipov.ru/files/sample2.jpg" usemap="#61160930693a6" alt="">
</div>
<map name="61160930693a6" id="61160930693a6">
<area shape="poly" href="https://yandex.ru/" coords="407,500,407,593,500,593,593,593,593,500,593,407,500,407,407,407" target="_blank" class="kvadrat">
<area shape="poly" href="/#1" coords="207,500,207,593,300,593,393,593,393,500,393,407,300,407,207,407" class="mapster" >
<area shape="poly" href="/#2" coords="7,500,7,593,100,593,193,593,193,500,193,407,100,407,7,407">
<area shape="poly" href="/#3" coords="407,302,407,395,500,395,593,395,593,302,593,209,500,209,407,209">
<area shape="poly" href="/#4" coords="7,302,7,395,100,395,193,395,193,302,193,209,100,209,7,209">
<area shape="poly" href="/#5" coords="207,300,207,393,300,393,393,393,393,300,393,207,300,207,207,207">
<area shape="poly" href="/#6" coords="407,100,407,193,500,193,593,193,593,100,593,7,500,7,407,7">
<area shape="poly" href="/#7" coords="207,100,207,193,300,193,393,193,393,100,393,7,300,7,207,7">
<area shape="poly" href="/#8" coords="7,100,7,193,100,193,193,193,193,100,193,7,100,7,7,7">
</map>
</body>
</html>
|
|
13.08.2021, 10:54
|
|
Профессор
|
|
Регистрация: 01.06.2010
Сообщений: 651
|
|
[quote=ksa;539361]Это так же не помогло... 
TypeError: $(...).mapster is not a function
Т.ч. придется тебе читать документацию по той библиотеке. 
она на английском, http://www.outsharked.com/imagemapst...aspx?docs.html
и все я делаю правильно и читал другие ресурсы, пробовал по разному
Но не работает |
|
13.08.2021, 10:59
|
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,662
|
|
|
Сергей Ракипов, а зачем ты селектор "img[usemap]" поменял? У тебя изначально jquery не было и скрипты не в том порядке шли, а ты еще селектор трогаешь... дурачок что-ли?
Последний раз редактировалось Rise, 13.08.2021 в 11:02.
|
|
13.08.2021, 11:02
|
|
Профессор
|
|
Регистрация: 01.06.2010
Сообщений: 651
|
|
Сообщение от Rise
|
|
Сергей Ракипов, а зачем ты селектор "img[usemap]" поменял?
|
Я просто пробую что пишут другие, у меня и с ним не работало
Вот так тоже не работает
<!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>
<style>
.box{
width: 600px;
margin: 0 auto;
}
.kvadrat{
}
</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="https://yandex.ru/" coords="407,500,407,593,500,593,593,593,593,500,593,407,500,407,407,407" target="_blank" class="kvadrat">
<area shape="poly" href="/#1" coords="207,500,207,593,300,593,393,593,393,500,393,407,300,407,207,407" class="mapster" >
<area shape="poly" href="/#2" coords="7,500,7,593,100,593,193,593,193,500,193,407,100,407,7,407">
<area shape="poly" href="/#3" coords="407,302,407,395,500,395,593,395,593,302,593,209,500,209,407,209">
<area shape="poly" href="/#4" coords="7,302,7,395,100,395,193,395,193,302,193,209,100,209,7,209">
<area shape="poly" href="/#5" coords="207,300,207,393,300,393,393,393,393,300,393,207,300,207,207,207">
<area shape="poly" href="/#6" coords="407,100,407,193,500,193,593,193,593,100,593,7,500,7,407,7">
<area shape="poly" href="/#7" coords="207,100,207,193,300,193,393,193,393,100,393,7,300,7,207,7">
<area shape="poly" href="/#8" coords="7,100,7,193,100,193,193,193,193,100,193,7,100,7,7,7">
</map>
<script src="http://code.jquery.com/jquery-1.5.1.js"></script>
<script src="https://raw.githubusercontent.com/jamietre/ImageMapster/e08cd7ec24ffa9e6cbe628a98e8f14cac226a258/dist/jquery.imagemapster.js"></script>
<script>
$("img[#61160930693a6]").mapster({
scaleMap: true,
fill: true,
fillColor: '2CA7DC',
fillOpacity: 0.75
});
</script>
</body>
</html>
Последний раз редактировалось Сергей Ракипов, 13.08.2021 в 11:04.
|
|
13.08.2021, 11:05
|
 |
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,123
|
|
Сергей Ракипов, начитался я про твою фигнотень... 
https://github.com/jamietre/ImageMapster
Вот так без ошибок
<!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="http://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>
<style>
.box{
width: 600px;
margin: 0 auto;
}
.kvadrat{
}
</style>
<script>
$(function(){
$('#61160930693a6').mapster({
scaleMap: true,
fill: true,
fillColor: '2CA7DC',
fillOpacity: 0.75
});
})
</script>
</head>
<body>
<div class="box">
<img src="https://rakipov.ru/files/sample2.jpg" usemap="#61160930693a6" alt="">
</div>
<map name="61160930693a6" id="61160930693a6">
<area shape="poly" href="https://yandex.ru/" coords="407,500,407,593,500,593,593,593,593,500,593,407,500,407,407,407" target="_blank" class="kvadrat">
<area shape="poly" href="/#1" coords="207,500,207,593,300,593,393,593,393,500,393,407,300,407,207,407" class="mapster" >
<area shape="poly" href="/#2" coords="7,500,7,593,100,593,193,593,193,500,193,407,100,407,7,407">
<area shape="poly" href="/#3" coords="407,302,407,395,500,395,593,395,593,302,593,209,500,209,407,209">
<area shape="poly" href="/#4" coords="7,302,7,395,100,395,193,395,193,302,193,209,100,209,7,209">
<area shape="poly" href="/#5" coords="207,300,207,393,300,393,393,393,393,300,393,207,300,207,207,207">
<area shape="poly" href="/#6" coords="407,100,407,193,500,193,593,193,593,100,593,7,500,7,407,7">
<area shape="poly" href="/#7" coords="207,100,207,193,300,193,393,193,393,100,393,7,300,7,207,7">
<area shape="poly" href="/#8" coords="7,100,7,193,100,193,193,193,193,100,193,7,100,7,7,7">
</map>
</body>
</html>
|
|
13.08.2021, 11:06
|
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,662
|
|
|
Сергей Ракипов, тебе уже всё написали, смотри пост#13, хватит самодеятельностью заниматься.
|
|
13.08.2021, 11:12
|
|
Профессор
|
|
Регистрация: 01.06.2010
Сообщений: 651
|
|
|
ksa,
Ошибки нет, но и подсветки нет
|
|
13.08.2021, 11:13
|
|
Профессор
|
|
Регистрация: 01.06.2010
Сообщений: 651
|
|
|
Сообщение от Rise
|
|
Сергей Ракипов, тебе уже всё написали, смотри пост#13, хватит самодеятельностью заниматься.
|
Это не самодеятельность это поптыки найти решение, исходя из скудных знаний об JS |
|
13.08.2021, 11:16
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,123
|
|
|
Сообщение от Сергей Ракипов
|
|
Ошибки нет, но и подсветки нет
|
Дальше читать мне лень... |
|
13.08.2021, 11:18
|
|
Профессор
|
|
Регистрация: 01.06.2010
Сообщений: 651
|
|
Rise,
Ну вроде вот так должно работать а не работает
<!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="http://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>
<style>
.box{
width: 600px;
margin: 0 auto;
}
.kvadrat{
}
</style>
<script>
$("img[usemap]").mapster({
scaleMap: true,
fill: true,
fillColor: '2CA7DC',
fillOpacity: 0.75
});
</script>
</head>
<body>
<div class="box">
<img src="https://rakipov.ru/files/sample2.jpg" usemap="#61160930693a6" alt="">
</div>
<map name="61160930693a6" id="61160930693a6">
<area shape="poly" href="https://yandex.ru/" coords="407,500,407,593,500,593,593,593,593,500,593,407,500,407,407,407" target="_blank" class="kvadrat">
<area shape="poly" href="/#1" coords="207,500,207,593,300,593,393,593,393,500,393,407,300,407,207,407" class="mapster" >
<area shape="poly" href="/#2" coords="7,500,7,593,100,593,193,593,193,500,193,407,100,407,7,407">
<area shape="poly" href="/#3" coords="407,302,407,395,500,395,593,395,593,302,593,209,500,209,407,209">
<area shape="poly" href="/#4" coords="7,302,7,395,100,395,193,395,193,302,193,209,100,209,7,209">
<area shape="poly" href="/#5" coords="207,300,207,393,300,393,393,393,393,300,393,207,300,207,207,207">
<area shape="poly" href="/#6" coords="407,100,407,193,500,193,593,193,593,100,593,7,500,7,407,7">
<area shape="poly" href="/#7" coords="207,100,207,193,300,193,393,193,393,100,393,7,300,7,207,7">
<area shape="poly" href="/#8" coords="7,100,7,193,100,193,193,193,193,100,193,7,100,7,7,7">
</map>
</body>
</html>
|
|
|
|
