Почему не подключается
Нашел решение которое должно подсвечивать выделенные области изображение.
Но оно почему то не подключается. <!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> |
Цитата:
|
Цитата:
$("img[usemap]").mapster({ |
Вот так попробовал тоже не работает
<!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,
Как нету?! вот же все есть <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> |
Вот так еще попробовал и все равно не хочет работать
<!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> |
Цитата:
|
Цитата:
Подключай их в head. Свой скрипт "оберни" в $(function(){ // тут твой скрипт }) |
Это так же не помогло... :(
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> |
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> |
[quote=ksa;539361]Это так же не помогло... :(
TypeError: $(...).mapster is not a function Т.ч. придется тебе читать документацию по той библиотеке. :-? она на английском, http://www.outsharked.com/imagemapst...aspx?docs.html и все я делаю правильно и читал другие ресурсы, пробовал по разному Но не работает |
Сергей Ракипов, а зачем ты селектор "img[usemap]" поменял? У тебя изначально jquery не было и скрипты не в том порядке шли, а ты еще селектор трогаешь... дурачок что-ли?
|
Цитата:
Вот так тоже не работает <!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> |
Сергей Ракипов, начитался я про твою фигнотень... :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, хватит самодеятельностью заниматься.
|
ksa,
Ошибки нет, но и подсветки нет |
Цитата:
|
Цитата:
|
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? Берешь свой код из поста#1 меняешь местами <script>-ы и сверху добавляешь jquery <script>.
|
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> Странно а тут почему то не работает. |
Сергей Ракипов,
<!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> Цитата:
|
Цитата:
Не знаю я всегда в конце как правило ищу ответ когда читаю форум. |
Нашел способ сделать всплывающую подсказку через 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> |
Я даже пробую искать решение, но они всплывают не так где нужно, нет возможности применить <BR> и title дублирует подсказку всплывающую
|
Цитата:
|
рони,
Понял Мне вообще по сути нужны вот такие подсказки как вот в плагин ворд пресс https://wordpress.org/plugins/interactive-geo-maps/ вот как это работает на сайте, кнопка посмотреть план целиком https://7-prudov.ru/villages/darvin/ |
Часовой пояс GMT +3, время: 19:00. |