Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Почему не подключается (https://javascript.ru/forum/jquery/82957-pochemu-ne-podklyuchaetsya.html)

Сергей Ракипов 13.08.2021 09:02
Почему не подключается
 
Нашел решение которое должно подсвечивать выделенные области изображение.
Но оно почему то не подключается. 

<!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">
        
        <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>
        $("img[usemap]").mapster({
        scaleMap: true,
        fill: true,
        fillColor: '2CA7DC',
        fillOpacity: 0.75
        });
    </script>
    <script src="https://raw.githubusercontent.com/jamietre/ImageMapster/e08cd7ec24ffa9e6cbe628a98e8f14cac226a258/dist/jquery.imagemapster.js"></script>

</body>
</html>

ksa 13.08.2021 10:05
Цитата:
Сообщение от Сергей Ракипов
Но оно почему то не подключается.
У тебя твой скрипт вставлено "до" самого jquery...

Сергей Ракипов 13.08.2021 10:09
Цитата:
Сообщение от ksa (Сообщение 539351)
У тебя твой скрипт вставлено "до" самого jquery...
Все равно пишет что is not defined вот здесь
$("img[usemap]").mapster({

Сергей Ракипов 13.08.2021 10:15
Вот так попробовал тоже не работает 

<!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.6.1.min.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>

ksa 13.08.2021 10:21
Цитата:
Сообщение от Сергей Ракипов
Вот так попробовал тоже не работает
Читаю доку по этой штуке...
Цитата:
ImageMapster - это jQuery-плагин, который позволяет легко создавать карты-изображения. С помощью этого инструмента, любая карта-изображение может быть подсвечена или выбрана, а также картой можно управлять различными способами. ImageMapster - это 100% Javascript и он работает на всех основных браузерах, в том числе Internet Explorer 6, он не использует Flash, и не требует ничего кроме jQuery. Некоторые продвинутые эффекты требуют поддержки HTML5, но он все равно будет работать в старых браузерах.
Вот самого jQuery у тебя нет. Это так же нужно подключить "до" вызова твоего скрипта...

Сергей Ракипов 13.08.2021 10:33
ksa,
Как нету?!
вот же все есть

<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
43
<script src="https://raw.githubusercontent.com/jamietre/ImageMapster/e08cd7ec24ffa9e6cbe628a98e8f14cac226a258/dist/jquery.imagemapster.js"></script>

Сергей Ракипов 13.08.2021 10:39
Вот так еще попробовал и все равно не хочет работать 
<!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" 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>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="https://raw.githubusercontent.com/jamietre/ImageMapster/e08cd7ec24ffa9e6cbe628a98e8f14cac226a258/dist/jquery.imagemapster.js"></script>
    <script>
        $('#61160930693a6').mapster({
        scaleMap: true,
        fill: true,
        fillColor: '2CA7DC',
        fillOpacity: 0.75
        });
    </script>
</body>
</html>

ksa 13.08.2021 10:44
Цитата:
Сообщение от Сергей Ракипов
вот же все есть
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
Извини. Глазки уже не те... :-?

ksa 13.08.2021 10:47
Цитата:
Сообщение от Сергей Ракипов
Вот так еще попробовал и все равно не хочет работать
Возможно все эти скрипты просто не успевают подгрузиться...
Подключай их в head.

Свой скрипт "оберни" в
$(function(){
   // тут твой скрипт
})

ksa 13.08.2021 10:51
Это так же не помогло... :(
TypeError: $(...).mapster is not a function


Т.ч. придется тебе читать документацию по той библиотеке. :-? 

<!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 src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="https://raw.githubusercontent.com/jamietre/ImageMapster/e08cd7ec24ffa9e6cbe628a98e8f14cac226a258/dist/jquery.imagemapster.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 10:53
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
[quote=ksa;539361]Это так же не помогло... :(
TypeError: $(...).mapster is not a function


Т.ч. придется тебе читать документацию по той библиотеке. :-?
она на английском, http://www.outsharked.com/imagemapst...aspx?docs.html
и все я делаю правильно и читал другие ресурсы, пробовал по разному

Но не работает

Сергей Ракипов 13.08.2021 11:02
Цитата:
Сообщение от Rise (Сообщение 539364)
Сергей Ракипов, а зачем ты селектор "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>

ksa 13.08.2021 11:05
Сергей Ракипов, начитался я про твою фигнотень... :D
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:12
ksa,
Ошибки нет, но и подсветки нет

Сергей Ракипов 13.08.2021 11:13
Цитата:
Сообщение от Rise (Сообщение 539367)
Сергей Ракипов, тебе уже всё написали, смотри пост#13, хватит самодеятельностью заниматься.
Это не самодеятельность это поптыки найти решение, исходя из скудных знаний об JS

ksa 13.08.2021 11:16
Цитата:
Сообщение от Сергей Ракипов
Ошибки нет, но и подсветки нет
Дальше читать мне лень... :D

Сергей Ракипов 13.08.2021 11:18
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>

Сергей Ракипов 13.08.2021 11:19
Цитата:
Сообщение от ksa (Сообщение 539370)
Дальше читать мне лень... :D
Понимаю

Сергей Ракипов 13.08.2021 11:27
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;
        }
    </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">

        <area shape="poly" href="/#1" coords="207,500,207,593,300,593,393,593,393,500,393,407,300,407,207,407">
        
        <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="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>


</body>
</html>


Странно а тут почему то не работает.

рони 13.08.2021 12:11
Сергей Ракипов,
<!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>
    <script src="https://cdn.jsdelivr.net/npm/imagemapster@1.5.4/dist/jquery.imagemapster.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="https://yandex.ru/" coords="407,500,407,593,500,593,593,593,593,500,593,407,500,407,407,407" target="_blank">

        <area shape="poly" href="/#1" coords="207,500,207,593,300,593,393,593,393,500,393,407,300,407,207,407">

        <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>
        $("img[usemap]").mapster({
        scaleMap: true,
        fill: true,
        fillColor: '2CA7DC',
        fillOpacity: 0.75
        });
    </script>


</body>
</html>
Цитата:
Сообщение от Сергей Ракипов
Странно а тут почему то не работает.
https без s не сработает, и зачем дважды грузить одно и тоже?

Сергей Ракипов 13.08.2021 12:29
Цитата:
Сообщение от рони (Сообщение 539376)
Сергей Ракипов,

https без s не сработает, и зачем дважды грузить одно и тоже?
Увидел ошибку, спасибо.
Не знаю я всегда в конце как правило ищу ответ когда читаю форум.

Сергей Ракипов 13.08.2021 13:44
Нашел способ сделать всплывающую подсказку через title.

Но это не то что нужно. Нужно что бы полноценный div всплывал блок это вообще возможно? 

<!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>
    <script src="https://cdn.jsdelivr.net/npm/imagemapster@1.5.4/dist/jquery.imagemapster.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" target="_blank">

        <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://raw.githubusercontent.com/jamietre/ImageMapster/e08cd7ec24ffa9e6cbe628a98e8f14cac226a258/dist/jquery.imagemapster.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>

Сергей Ракипов 13.08.2021 14:07
Я даже пробую искать решение, но они всплывают не так где нужно, нет возможности применить <BR> и title дублирует подсказку всплывающую

рони 13.08.2021 14:24
Цитата:
Сообщение от рони
зачем дважды грузить одно и тоже?
выкиньте либо строку 10 либо 43, пост #26

Сергей Ракипов 13.08.2021 17:38
рони,
Понял
Мне вообще по сути нужны вот такие подсказки как вот в плагин ворд пресс
https://wordpress.org/plugins/interactive-geo-maps/

вот как это работает на сайте, кнопка посмотреть план целиком
https://7-prudov.ru/villages/darvin/


Часовой пояс GMT +3, время: 08:46.