Недопонимание того, как пользоваться плагином Maphilight

@Супер-грузин · Регистрация: 29.07.2013

Студворк — интернет-сервис помощи студентам

На всякий случай - вот здесь официальная документация с самим плагином и примерами: http://davidlynch.org/projects/maphilight/docs/

Здравствуйте! Я ОЧЕНЬ сильно извиняюсь, что всё-таки создаю тему, когда причина проблемы - исключительно недостаток моих знаний в jq, и я это понимаю. Это не от злобы, а от усталости. Усталости от поисков, от уже более двух недель предпринятия попыток самостоятельного освоения.
Я просмотрел все темы, связанные с этим плагином здесь, а также на просторах ру- и не только ру-нета.

Проблема заключается в том, что я последовательно изучаю jquery и js. Но мне до сих пор не хватает знаний и не понятно то, что для всех, кто описывает проблемы с этим плагином в интернете, является очевидным. Я искал примеры, много искал. Кое-что находил, пробовал у себя - не работало...

Поэтому у меня лишь одна просьба: пожалуйста, умоляю, приведите самый простой схематичный пример использования плагина вместе с простым документом.
Допустим, изменение любого стиля для единственного <area> в изображении:

HTML5
1
2
3
4
<img class="A" height="10" width="4" usemap="#map1" src="images/1.png">
<map name="map1">
<area shape="poly" id="B" href="#" coords="1,1, 3,4, 3,8, 1,8">
</map>

Вообще говоря, я пытался по-разному использовать mouseover. И вот так:

JavaScript
1
2
$(document).ready(function(){
    $("#B").mouseover(function(){$('#B').maphilight("strokeColor":"0000ff");});})

и так:

HTML5
1
<img class="A" height="10" onmouseover="$('this').maphilight("fillOpacity": 0)" width="4" usemap="#map1" src="images/1.png">

и так

HTML5
1
<area shape="poly" id="B" href="#" coords="1,1, 3,4, 3,8, 1,8" data-maphilight='{"strokeColor":"0000ff", "fillColor":"ff0000","fillOpacity":0.6}'>

Но всё - беда. Очевидно, я творю какую-то неведомую белиберду от невежества(

@Padimanskas · 01.04.2014, 00:59

JavaScript
1
$('.A').maphilight({strokeColor: 'ffFF00'});

ё-моё!

Добавлено через 24 минуты
Я тут одну коровку нарисовал

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html>
<head>
 
  <meta charset="utf-8">
 
  <title>JS</title>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
  <script src="http://davidlynch.org/projects/maphilight/jquery.maphilight.min.js"></script>
</head>
<body>
<img id="Image-Maps-Com-image-maps-2014-03-31-160814" src="http://www.vd-vd.ru/sites/default/files/storage/teaser/30a5bccec606cd58f9ac6060e71fd770.jpg" border="0" width="435" height="300" orgWidth="435" orgHeight="300" usemap="#image-maps-2014-03-31-160814" alt="" />
<map name="image-maps-2014-03-31-160814" id="ImageMapsCom-image-maps-2014-03-31-160814">
<area shape="rect" coords="433,298,435,300" alt="Image Map" style="outline:none;" title="Image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_0" />
<area id="neck" alt="neck" title="neck" href="http://www.image-maps.com/" shape="poly" coords="80,84,100,67,97,105,120,153,142,188,149,204,131,197,118,192,107,178,97,169,81,125,83,108" style="outline:none;" target="_self"     />
<area id="l" alt="l" title="l" href="http://www.image-maps.com/" shape="poly" coords="106,62,104,102,120,138,156,139,184,129,191,101,184,61,145,55" style="outline:none;" target="_self"     />
<area id="sp" alt="sp" title="sp" href="http://www.image-maps.com/" shape="poly" coords="189,62,196,94,189,127,238,127,232,99,234,61" style="outline:none;" target="_self"     />
<area id="f" alt="f" title="f" href="http://www.image-maps.com/" shape="poly" coords="238,60,238,107,244,124,260,123,277,123,285,59" style="outline:none;" target="_self"     />
<area id="hh" alt="hh" title="hh" href="http://www.image-maps.com/" shape="poly" coords="122,142,153,145,183,135,173,186,158,192,148,190,140,166" style="outline:none;" target="_self"     />
<area id="cc" alt="cc" title="cc" href="http://www.image-maps.com/" shape="poly" coords="189,133,178,181,206,174,237,173,243,153,240,132" style="outline:none;" target="_self"     />
<area id="nn" alt="nn" title="nn" href="http://www.image-maps.com/" shape="poly" coords="245,131,249,149,243,173,265,183,329,158,310,140,283,129" style="outline:none;" target="_self"     />
<area id="kk" alt="kk" title="kk" href="http://www.image-maps.com/" shape="poly" coords="290,56,285,116,282,124,310,132,321,113,325,98,325,85,334,57" style="outline:none;" target="_self"     />
<area id="jk" alt="jk" title="jk" href="http://www.image-maps.com/" shape="poly" coords="330,93,324,116,314,136,335,161,342,177,353,179,366,170,369,158,380,133,380,93" style="outline:none;" target="_self"     />
<area id="ssd" alt="ssd" title="ssd" href="http://www.image-maps.com/" shape="poly" coords="339,57,330,88,357,86,381,87,386,82,382,72,371,61" style="outline:none;" target="_self"     />
<area id="ffg" alt="ffg" title="ffg" href="http://www.image-maps.com/" shape="poly" coords="383,92,387,87,389,141,392,158,392,167,397,177,397,204,394,206,392,202,388,204,388,193,385,187,387,179,386,174,386,166,388,163,386,162,386,152,386,139" style="outline:none;" target="_self"     />
<area id="er" alt="er" title="er" href="http://www.image-maps.com/" shape="poly" coords="52,44,60,59,57,79,51,80,42,51,40,52,39,76,35,86,32,93,22,106,12,118,2,132,2,141,3,146,9,150,17,156,30,155,49,162,57,162,65,165,79,128,77,84,70,82,72,70,71,62,64,52" style="outline:none;" target="_self"     />
<area id="ed" alt="ed" title="ed" href="http://www.image-maps.com/" shape="poly" coords="151,196,156,216,167,214,172,191,161,196" style="outline:none;" target="_self"     />
<area id="dfg" alt="dfg" title="dfg" href="http://www.image-maps.com/" shape="poly" coords="345,183,357,182,368,174,375,190,373,202,357,205,354,197" style="outline:none;" target="_self"     />
<area id="hn" alt="hn" title="hn" href="http://www.image-maps.com/" shape="poly" coords="314,169,319,198,317,220,306,238,298,247,297,252,310,253,321,235,332,213,340,200,340,193,340,182,336,176,332,164" style="outline:none;" target="_self"     />
<area id="ws" alt="ws" title="ws" href="http://www.image-maps.com/" shape="poly" coords="356,210,365,211,372,208,369,253,361,255,355,252,358,239,358,228,359,221" style="outline:none;" target="_self"     />
<area id="vb" alt="vb" title="vb" href="http://www.image-maps.com/" shape="poly" coords="177,190,196,182,195,195,197,211,204,237,204,249,188,250,191,241,189,221,181,210" style="outline:none;" target="_self"     />
<area id="as" alt="as" title="as" href="http://www.image-maps.com/" shape="poly" coords="150,251,166,254,170,249,168,235,168,219,155,220,155,231,154,239,154,246" style="outline:none;" target="_self"     />
<area id="aa" alt="aa" title="aa" href="http://www.image-maps.com/" shape="poly" coords="72,164,81,163,91,166,81,137" style="outline:none;" target="_self"     />
</map>
  <script>
    $('#Image-Maps-Com-image-maps-2014-03-31-160814').maphilight({strokeColor: 'ffFF00', shadow: true, shadowX: 7,
    shadowY: 7, fill: true,
    fillColor: 'FFFFFF'});
  </script>
</body>
</html>

Вот плугин для рисования

http://www.image-maps.com/

@Супер-грузин · 01.04.2014, 22:37 **[ТС]**

Сообщение от Padimanskas

JavaScript
1
$('.A').maphilight({strokeColor: 'ffFF00'});

ё-моё!

Будь я проклят

Ого, какой сервис маппинга клёвый... И за примерчик спасибо! Нет, не так... спасибище!

Добавлено через 9 часов 39 минут

Сообщение от Padimanskas

Я тут одну коровку нарисовал

А корова-то бесподобна

Вспомнился эпизод

@Супер-грузин · 16.04.2014, 11:46 **[ТС]**

Такое вышло дело... плагин оказался с недостаточным функционалом, чтобы решить поставленную задачу. =(
Нужно было по mousveover'у и по клику накрывать картинку в нужных area'ях разными картинками, а у maphilight был только ограниченный набор стилей и обводок области, и он не позволял в областях заменять само изображение на другое.

Я обратился к другому плагину (кстати, созданному на основе maphilight) - Image Mapster. Постарался в точности повторить вот этот простенький пример на своём документе. Но работает почему-то только одна altImage - та, которая накрывает область по клику. А та, которая по наведению - ни-ни.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
$(document).ready(function()
{
$('#knopka1').mapster({
singleSelect : true,
render_highlight : { altImage : 'images/butto.png'},
mapKey: 'backg',
fill : true, altImage : 'images/buttoo.png',
fillOpacity : 1,
});
});
</script>

Т.е., вот этот код не выполняется:

JavaScript
1
render_highlight : { altImage : 'images/butto.png'},

Сопутствующая часть моего документа выглядит так:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!Doctype html>
<html>
<head>
<title>Всем угодишь</title>
<meta charset="UTF-8">
<script type="text/javascript" src="jquery/jquery-1.11.0.js"></script>
<script type="text/javascript" src="scripts/jquery.imagemapster.js"></script>
</head>
 
<body>
<img id="knopka1" usemap="#map1" height="280" width="241" border="0" orgWidth="241" orgHeight="280" src="images/Button11.png">
<map name="map1"> 
<area id="B" shape="rect" backg="one" coords="240,279, 241,280" alt="Image Map" style="outline:none;" title="Image Map" href="" />
<area id="A" shape="poly" backg="two" href="" coords="137,277, 212,189, 240,61, 227,1, 8,72, 2,93"> 
</map> 
</body>
</html>

Далее код JS плагина mapster, указанный выше. Посмотреть результат можно здесь: werewyrm.tk, там маппированная картинка - это кнопка, белый сектор круга.

Новые блоги и статьи Все статьи Все блоги /
сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .
Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .	Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и источниками (напряжения, ЭДС и тока). Найти токи и напряжения во всех элементах. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и. . .

Недопонимание того, как пользоваться плагином Maphilight

Решение