Недопонимание того, как пользоваться плагином 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, там маппированная картинка - это кнопка, белый сектор круга.

Новые блоги и статьи Все статьи Все блоги /
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а привычная функция main(). . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .
http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/

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

Решение