Хочу реализовать "всплывающие подсказки" как на сайте 7ozer.com

@LLEEVV2020 · Регистрация: 09.10.2013

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

Хочу реализовать "всплывающие подсказки" как на сайте http://www.7ozer.com/content/poselok/genplan.html

Подскажите идеями.

Добавлено через 1 час 24 минуты
Там при наведения на дома всплывает подсказка, точнее всплывает описание. Если бы только это было в тексте вывести подсказку, то там всё просто - несколько строчек на css. Но тут в картинке выводятся, вот это меня и вставит тупик. Ну разбью я картинку в Fireworks, будут у меня "кусочки" area. А дальше что? что можно написать на яваскрипте , чтоб такие описания всплывали?

@kalabuni · 20.03.2014, 22:11

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
42
43
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=windows-1251">
<style>
.myTt {position: absolute; display: none;
       width: 124px; height: 34px;
       text-align: center; line-height: 34px; font-weight: bold;
       border: 1px solid #ccc; background: yellow}
 
#myPic {width: 400px; height: 400px; margin: 12%}
</style>
<script>
onload = function ()
{
for (var j = 0; j < 3; j++)
   {
   with (document.getElementById ('a' + j))
      addEventListener ('mouseover', function () {document.getElementById ('t' + this.id).style.display = 'block'}),
      addEventListener ('mouseout' , function () {document.getElementById ('t' + this.id).style.display = 'none'});
   var obj = document.getElementById ('myPic'), l = -62, t = -34; while (obj.offsetParent)
      l += obj.offsetLeft, t += obj.offsetTop, obj = obj.offsetParent;
   var obj = document.getElementById ('a' + j); with (document.getElementById ('ta' + j).style)
      top  = (t + obj.coords.split (',') [1] * 1 - 10) + 'px',
      left = (l + obj.coords.split (',') [0] * 1 + (obj.coords.split (',') [2] * 1 - obj.coords.split (',') [0] * 1) / 2) + 'px';
   }
}
</script>
</head>
<body>
<map name="myMap">
<area id="a0" shape="poly" coords="0,0,200,0,200,200,0,200">
<area id="a1" shape="poly" coords="201,0,400,0,400,200,201,201">
<area id="a2" shape="poly" coords="0,201,400,201,400,400,0,400">
</map>
 
<img id="myPic" src="https://www.cyberforum.ru/attachment.php?attachmentid=379027&stc=1&thumb=1&d=1395339131" usemap="#myMap">
 
<div class="myTt" id="ta0" style="color: red"  >Êðàñíûé</div>
<div class="myTt" id="ta1" style="color: blue" >Ñèíèé  </div>
<div class="myTt" id="ta2" style="color: green">Çåë¸íûé</div>
</body>
</html>

@kalabuni · 20.03.2014, 22:28

если что непонятно, спрашивайте

@LLEEVV2020 · 21.03.2014, 07:56 **[ТС]**

kalabuni, огромнейшее спасибо!! пока вопросов нет

@LLEEVV2020 · 22.03.2014, 21:53 **[ТС]**

kalabuni, при наведении курсором мыши на подсказку - она мигает. Как от мигания избавиться?

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">
 
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
<script>
onload = function ()
{
for (var j = 0; j < 3; j++)
   {
   with (document.getElementById ('a' + j)){
          addEventListener ('mouseover', function () {document.getElementById ('t' + this.id).style.display = 'block'}),
          addEventListener ('mouseout' , function () {document.getElementById ('t' + this.id).style.display = 'none'});
      }
       var obj = document.getElementById ('myPic'), l = -62, t = -34; 
       while (obj.offsetParent)
          l += obj.offsetLeft, t += obj.offsetTop, obj = obj.offsetParent;
       var obj = document.getElementById ('a' + j); 
       with (document.getElementById ('ta' + j).style){
          top  = (t + obj.coords.split (',') [1] * 1 - 10) + 'px',
          left = (l + obj.coords.split (',') [0] * 1 + (obj.coords.split (',') [2] * 1 - obj.coords.split (',') [0] * 1) / 2) + 'px';
      }
   }
}
</script>
</head>
<body>
    <map name="myMap">
    <area id="a0" shape="poly" coords="0,0,200,0,200,200,0,200">
    <area id="a1" shape="poly" coords="201,0,400,0,400,200,201,201">
    <area id="a2" shape="poly" coords="0,201,400,201,400,400,0,400">
    </map>
     
    <img id="myPic" src="dd.JPG" usemap="#myMap">
     
    <div class="myTt" id="ta0" style="color: red"  >Красный <br /> Красный <br /> Красный</div>
    <div class="myTt" id="ta1" style="color: blue" >Синий <br />Синий <br />Синий </div>
    <div class="myTt" id="ta2" style="color: green">Зелёный <br /> Зелёный <br />Зелёный</div>
</body>
</html>

скачать:index.rar

@kalabuni · 22.03.2014, 22:57

ну вот, а написали - "вопросов нет"

мои тултипы находились вне соответствующих областей <AREA> (выше их на плоскости экрана)
ваши тултипы находятся над соответствующими им областями <AREA> (перекрывают их на плоскости экрана)

поэтому и мигает, ибо происходит то, что я совсем недавно описывал в другой теме https://www.cyberforum.ru/post5928230.html

вы явно не задумывались над тем, зачем я написал в стилевом блоке height: 34px и line-height: 34px, а в скрипте t = -34 ?

вы же убрали height: 34px, а всё остальное зачем-то оставили

неправильный у вас подход: в программировании необходимо понимать - зачем и почему написан каждый символ в программе
------------

в общем, если вам нужна именно такая конфигурация, чтобы тултипы перекрывали соответствующую область <AREA> и чтобы не мигало, надо переписать скрипт, используя свойство event.relatedTarget - и об этом я здесь тоже писал в теме https://www.cyberforum.ru/post4616523.html

если не справитесь сами, свистните, напишу

@LLEEVV2020 · 23.03.2014, 01:06 **[ТС]**

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

ну вот, а написали - "вопросов нет"

я написал : "пока вопросов нет"

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

вы же убрали height: 34px, а всё остальное зачем-то оставили

исправил

Подскажите дальше

JavaScript
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
...
onload = function ()
{
for (var j = 0; j < 3; j++)
   {
   with (document.getElementById ('a' + j)){
          addEventListener ('mouseover', mFover),
          addEventListener ('mouseout' , mFout);
      }
       var obj = document.getElementById ('myPic'), l = -62, t = 0; 
       while (obj.offsetParent)
          l += obj.offsetLeft, t += obj.offsetTop, obj = obj.offsetParent;
       var obj = document.getElementById ('a' + j); 
       with (document.getElementById ('ta' + j).style){
          top  = (t + obj.coords.split (',') [1] * 1 - 10) + 'px',
          left = (l + obj.coords.split (',') [0] * 1 + (obj.coords.split (',') [2] * 1 - obj.coords.split (',') [0] * 1) / 2) + 'px';
      }
   }
}
function mFover (event)
{
    document.getElementById ('t' + this.id).style.display = 'block';
}
 
function mFout (event)
{
    document.getElementById ('t' + this.id).style.display = 'none';
    
}
...

Скачать: index.rar

@kalabuni · 23.03.2014, 02:14

опять не поняли вы ничего

-- блоку с одной строкой текста устанавливают одинаковое значение свойств стиля height и line-height с единственной целью - чтобы отцентрировать эту строку посередине блока по вертикали;

-- в скрипте я назначил переменной t значение, равное высоте тултипа для того, чтобы нижний край тултипа был на одной линии с соответствующей областью <AREA>; более того, позже я ещё 10 пикселей отнимаю, чтобы между нижней границей тултипа и верхней границей области был зазор в 10 пикселей

вы же, не задумываясь, убрали t = -34, но 10 пикселей далее в формуле опять зачем-то оставили
т.е. вы оба раза положение тултипа относительно соответствующей области <AREA> сделали "от балды"

итак, я сделал так, как показано на рисунке ниже
нарисуйте, как именно нужно вам

@LLEEVV2020 · 23.03.2014, 08:22 **[ТС]**

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

блоку с одной строкой текста устанавливают одинаковое значение свойств стиля height и line-height с единственной целью - чтобы отцентрировать эту строку посередине блока по вертикали;

там мне хочется, чтоб была не одна строка текста - а три.

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

итак, я сделал так, как показано на рисунке ниже
нарисуйте, как именно нужно вам

Хочу реализовать "всплывающие подсказки" как на сайте 7ozer.com

JavaScript
1
2
3
4
5
...
with (document.getElementById ('ta' + j).style){
          top  = (t + obj.coords.split (',') [1] * 1 ) + 'px',
          left = (l + obj.coords.split (',') [0] * 1 + (obj.coords.split (',') [2] * 1 - obj.coords.split (',') [0] * 1) / 2) + 'px';
...

@LLEEVV2020 · 23.03.2014, 08:34 **[ТС]**

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

в общем, если вам нужна именно такая конфигурация, чтобы тултипы перекрывали соответствующую область <AREA> и чтобы не мигало, надо переписать скрипт, используя свойство event.relatedTarget - и об этом я здесь тоже писал в теме relatedTarget
если не справитесь сами, свистните, напишу

в общем я не справился.

помогите пожалуйста дальше

@LLEEVV2020 · 23.03.2014, 09:26 **[ТС]**

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

опять не поняли вы ничего

так если например, фигуры имеют разные размеры?

в примере ниже, сложно "подравнять под одну гребёнку".

JavaScript
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>12345</title>
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script>
onload = function ()
{
for (var j = 0; j < 55; j++)
   {
   with (document.getElementById ('a' + j)){
          addEventListener ('mouseover', function () {document.getElementById ('t' + this.id).style.display = 'block'}),
          addEventListener ('mouseout' , function () {document.getElementById ('t' + this.id).style.display = 'none'});
      }
       var obj = document.getElementById ('myPic'), l = -62, t = 0; 
       while (obj.offsetParent)
          l += obj.offsetLeft, t += obj.offsetTop, obj = obj.offsetParent;
       var obj = document.getElementById ('a' + j); 
       with (document.getElementById ('ta' + j).style){
          top  = (t + obj.coords.split (',') [1] * 1 ) + 'px',
          left = (l + obj.coords.split (',') [0] * 1 + (obj.coords.split (',') [2] * 1 - obj.coords.split (',') [0] * 1) / 2) + 'px';
      }
   }
}
</script>
</head>
<body bgcolor="#ffffff">
 
 
 
<map name="myMap" >
<area id="a0" shape="poly" coords="440,1207,416,1093,488,1071,440,1207" title="" alt="" />
<area id="a1" shape="poly" coords="400,1038,511,1005,490,1067,410,1088,400,1038" title="" alt="" />
<area id="a2" shape="poly" coords="268,944,329,933,349,1022,293,1030,268,944" title="" alt="" />
<area id="a3" shape="poly" coords="242,844,303,828,281,740,221,754,242,844" title="" alt="" />
<area id="a4" shape="poly" coords="196,658,255,641,281,735,221,750,196,658" title="" alt="" />
<area id="a5" shape="poly" coords="513,334,582,315,598,369,534,425,513,334" title="" alt="" />
<area id="a6" shape="poly" coords="444,393,518,375,530,429,469,487,444,393" title="" alt="" />
<area id="a7" shape="poly" coords="577,577,633,495,611,412,546,473,577,577" title="" alt="" />
<area id="a8" shape="poly" coords="476,536,543,479,565,561,492,592,476,536" title="" alt="" />
<area id="a9" shape="poly" coords="523,733,492,596,564,566,570,580,523,733" title="" alt="" />
<area id="a10" shape="poly" coords="338,1214,318,1133,377,1122,399,1202,344,1216,338,1214" title="" alt="" />
<area id="a11" shape="poly" coords="295,1035,352,1026,377,1116,321,1129,295,1035" title="" alt="" />
<area id="a12" shape="poly" coords="386,980,518,946,520,978,509,1002,399,1035,386,980" title="" alt="" />
<area id="a13" shape="poly" coords="373,923,518,883,516,940,385,975,373,923" title="" alt="" />
<area id="a14" shape="poly" coords="246,848,305,833,330,928,270,938,246,848" title="" alt="" />
<area id="a15" shape="poly" coords="436,839,500,824,517,877,449,895,436,839" title="" alt="" />
<area id="a16" shape="poly" coords="355,855,430,835,445,894,370,920,355,855" title="" alt="" />
<area id="a17" shape="poly" coords="424,796,490,781,506,819,434,835,424,796" title="" alt="" />
<area id="a18" shape="poly" coords="342,808,415,789,423,832,355,853,342,808" title="" alt="" />
<area id="a19" shape="poly" coords="413,752,480,734,492,777,421,792,413,752" title="" alt="" />
<area id="a20" shape="poly" coords="331,762,404,742,414,783,341,803,331,762" title="" alt="" />
<area id="a21" shape="poly" coords="399,704,468,685,478,729,410,747,399,704" title="" alt="" />
<area id="a22" shape="poly" coords="319,715,392,694,403,736,331,758,319,715" title="" alt="" />
<area id="a23" shape="poly" coords="398,698,387,657,455,637,468,680,398,698" title="" alt="" />
<area id="a24" shape="poly" coords="377,623,439,566,456,632,384,652,377,623" title="" alt="" />
<area id="a25" shape="poly" coords="311,683,374,627,391,690,316,713,311,683" title="" alt="" />
<area id="a26" shape="poly" coords="197,654,170,561,230,547,254,637,197,654" title="" alt="" />
<area id="a27" shape="poly" coords="145,456,195,410,230,546,171,560,145,456" title="" alt="" />
<area id="a28" shape="poly" coords="275,546,347,524,365,581,299,637,275,546" title="" alt="" />
<area id="a29" shape="poly" coords="343,481,415,463,433,523,364,578,343,481" title="" alt="" />
<area id="a30" shape="poly" coords="259,488,334,470,348,524,272,542,259,488" title="" alt="" />
<area id="a31" shape="poly" coords="326,422,399,405,412,460,339,481,326,422" title="" alt="" />
<area id="a32" shape="poly" coords="244,432,318,413,335,466,255,485,244,432" title="" alt="" />
<area id="a33" shape="poly" coords="310,367,384,351,399,402,327,420,310,367" title="" alt="" />
<area id="a34" shape="poly" coords="230,373,292,311,318,408,249,429,230,373" title="" alt="" />
<area id="a35" shape="poly" coords="295,311,361,252,387,346,312,365,295,311" title="" alt="" />
<area id="a36" shape="poly" coords="431,333,443,388,514,371,500,318,431,333" title="" alt="" />
<area id="a37" shape="poly" coords="498,272,568,255,583,313,510,329,498,272" title="" alt="" />
<area id="a38" shape="poly" coords="417,281,429,331,503,315,489,257,417,281" title="" alt="" />
<area id="a39" shape="poly" coords="401,226,467,168,489,254,416,276,401,226" title="" alt="" />
<area id="a40" shape="poly" coords="570,253,558,197,482,221,494,268,570,253" title="" alt="" />
<area id="a41" shape="poly" coords="481,218,467,166,536,107,558,195,481,218" title="" alt="" />
<area id="a42" shape="poly" coords="660,459,666,306,688,246,615,263,660,459" title="" alt="" />
<area id="a43" shape="poly" coords="600,205,712,179,688,246,614,261,600,205" title="" alt="" />
<area id="a44" shape="poly" coords="632,92,719,86,717,172,710,178,658,188,632,92" title="" alt="" />
<area id="a45" shape="poly" coords="572,98,629,94,655,193,599,203,572,98" title="" alt="" />
<area id="a46" shape="poly" coords="599,59,708,46,689,22,652,1,593,4,599,59" title="" alt="" />
<area id="a47" shape="poly" coords="479,20,485,16,589,4,596,58,519,66,479,20" title="" alt="" />
<area id="a48" shape="poly" coords="461,116,516,66,477,22,419,76,461,116" title="" alt="" />
<area id="a49" shape="poly" coords="363,122,417,75,457,118,403,168,363,122" title="" alt="" />
<area id="a50" shape="poly" coords="303,179,361,127,401,170,343,221,303,179" title="" alt="" />
<area id="a51" shape="poly" coords="303,258,345,223,299,182,285,196,244,202,303,258" title="" alt="" />
<area id="a52" shape="poly" coords="254,300,300,261,241,201,208,208,188,225,254,300" title="" alt="" />
<area id="a53" shape="poly" coords="190,227,251,299,209,340,144,272,190,227" title="" alt="" />
<area id="a54" shape="poly" coords="132,406,109,305,144,272,208,342,132,406" title="" alt="" />
</map>
<img  src="12345.jpg" width="799" height="1335" id="myPic" usemap="#myMap" alt="" />
    <div class="myTt orange green" id="ta0" >Зелёный</div>
    <div class="myTt orange green" id="ta1">Зелёный </div>
    <div class="myTt orange green" id="ta2">Зелёный</div>
    <div class="myTt orange green" id="ta3">Зелёный</div>
    <div class="myTt orange green" id="ta4">Зелёный</div>
    <div class="myTt orange green" id="ta5">Зелёный</div>
    <div class="myTt orange green" id="ta6">Зелёный</div>
    <div class="myTt orange" id="ta7">Оражнжевый</div>
    <div class="myTt orange" id="ta8">Оражнжевый</div>
    <div class="myTt orange" id="ta9">Оражнжевый</div>
    <div class="myTt orange" id="ta10">Оражнжевый</div>
    <div class="myTt orange" id="ta11">Оражнжевый</div>
    <div class="myTt orange" id="ta12">Оражнжевый</div>
    <div class="myTt orange" id="ta13">Оражнжевый</div>
    <div class="myTt orange" id="ta14">Оражнжевый</div>
    <div class="myTt orange" id="ta15">Оражнжевый</div>
    <div class="myTt orange" id="ta16">Оражнжевый</div>
    <div class="myTt orange" id="ta17">Оражнжевый</div>
    <div class="myTt orange" id="ta18">Оражнжевый</div>
    <div class="myTt orange" id="ta19">Оражнжевый</div>
    <div class="myTt orange" id="ta20">Оражнжевый</div>
    <div class="myTt orange" id="ta21">Оражнжевый</div>
    <div class="myTt orange" id="ta22">Оражнжевый</div>
    <div class="myTt orange" id="ta23">Оражнжевый</div>
    <div class="myTt orange" id="ta24">Оражнжевый</div>
    <div class="myTt orange" id="ta25">Оражнжевый</div>
    <div class="myTt orange" id="ta26">Оражнжевый</div>
    <div class="myTt orange" id="ta27">Оражнжевый</div>
    <div class="myTt orange" id="ta28">Оражнжевый</div>
    <div class="myTt orange" id="ta29">Оражнжевый</div>
    <div class="myTt orange" id="ta30">Оражнжевый</div>
    <div class="myTt orange" id="ta31">Оражнжевый</div>
    <div class="myTt orange" id="ta32">Оражнжевый</div>
    <div class="myTt orange" id="ta33">Оражнжевый</div>
    <div class="myTt orange" id="ta34">Оражнжевый</div>
    <div class="myTt orange" id="ta35" class="orange">Оражнжевый</div>
    <div class="myTt orange" id="ta36" class="orange">Оражнжевый</div>
    <div class="myTt orange" id="ta37" class="orange">Оражнжевый</div>
    <div class="myTt orange" id="ta38" class="orange">Оражнжевый</div>
    <div class="myTt orange" id="ta39" class="orange">Оражнжевый</div>
    <div class="myTt orange" id="ta40" class="orange">Оражнжевый</div>
    <div class="myTt orange" id="ta41" class="orange">Оражнжевый</div>
    <div class="myTt orange" id="ta42" class="orange">Оражнжевый</div>
    <div class="myTt orange" id="ta43" class="orange">Оражнжевый</div>
    <div class="myTt orange" id="ta44" class="orange">Оражнжевый</div>
    <div class="myTt orange" id="ta45" class="orange">Оражнжевый</div>
    <div class="myTt orange" id="ta46" class="orange">Оражнжевый</div>
    <div class="myTt orange" id="ta47" class="orange">Оражнжевый</div>
    <div class="myTt orange" id="ta48" class="orange">Оражнжевый</div>
    <div class="myTt orange" id="ta49" class="orange">Оражнжевый</div>
    <div class="myTt orange" id="ta50" class="orange">Оражнжевый</div>
    <div class="myTt orange" id="ta51" class="orange">Оражнжевый</div>
    <div class="myTt orange" id="ta52" class="orange">Оражнжевый</div>
    <div class="myTt orange" id="ta53" class="orange">Оражнжевый</div>
    <div class="myTt orange" id="ta54" class="orange">Оражнжевый</div>
</body>
</html>

как вы видете, одни подсказки отображаются снизу, вверху и т.д.
Скачать: index.rar

@LLEEVV2020 · 23.03.2014, 12:43 **[ТС]**

опять забыл исправить css файл.
Вот:

CSS
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
...
.myTt {
    position: absolute; 
    display: none;
    width: 124px; 
    /*height: 34px;*/
    text-align: center; 
    line-height: 34px; 
    font-weight: bold;
    border: 1px solid #ccc; 
    /*background: yellow;*/
}
 
#myPic {
    /*width: 400px; 
    height: 400px;*/
    margin: 1% 12%;
}
 
.orange {
    background-color: rgba(227,137,1,.8);
    color: #000000;
}
.green{
    background-color: rgba(75,147,13,.8);
}

@kalabuni · 23.03.2014, 16:57

мне опять за вас придумывать?

предлагаю: при сложной конфигурации областей <AREA> размещать тултипы так, чтобы:
-- нижний край тултипа находился на 10 пикселей выше верхней точки соответствующей области <AREA>
-- вертикальная срединная линия тултипа проходила через горизонтальную середину соответствующей области <AREA>

см. рисунок

или же вам надо, чтобы с области можно было "заехать" мышью на тултип, чтобы там что-то скопировать (или на что-то нажать)?

опишите, в конце-концов, нужные вам требования к позиции тултипа относительно соответствующей области <AREA>

@LLEEVV2020 · 23.03.2014, 17:26 **[ТС]**

Огромнейшее вам спасибо за терпение.

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

или же вам надо, чтобы с области можно было "заехать" мышью на тултип, чтобы там что-то скопировать (или на что-то нажать)?

Да, нужно чтоб можно было скопировать. а то мигание напрягает.

(Принципы кнопку тоже можно в будущем пределать)

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

опишите, в конце-концов, нужные вам требования к позиции тултипа относительно соответствующей области <AREA>

А сделайте как вы считаете правильным. Надеюсь на вашу компетентонсть. Повторюсь, мне нужно только, чтоб текст можно было скопировать с подсказки и чтоб она не мигала

@kalabuni · 23.03.2014, 20:48

исхожу из того, что высота любого тултипа будет меньше минимум на 11 пикселей, чем высота соответствующей области <AREA>
рисунок прилагаю
код тоже:

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=windows-1251">
<style>
.myTt {position: absolute; display: block; z-index: 123;
       padding: 10px; text-align: center; border: 1px solid #ccc; background: yellow}
/* высоту и ширину тултипов вовсе не регламентируем, габариты каждого определятся его содержанием */
/* т.е. обязательна только первая строка - position, display и z-index; всё остальное - как вам нужно */
 
#myPic {width: 400px; height: 400px; margin: 12%}
</style>
<script>
onload = function ()
{
for (var j = 0; j < 3; j++)
   {
   var area = document.getElementById ('a' + j), crds = area.coords.split (','),
       pic = document.getElementById ('myPic'), l = t = 0;
   area.addEventListener ('mouseover', function (ev)
      {
      var tt = document.getElementById ('t' + this.id);
      if (ev.relatedTarget != tt) tt.style.display = 'block';
      tt.addEventListener ('mouseout' , function (ev)
         {
         var area = document.getElementById (this.id.substr (1)),
             cond = (ev.relatedTarget != area);
         for (var k = 0, chs = this.children, K = chs.length; k < K; k++)
            cond = cond && (ev.relatedTarget == chs [k]);
         if (cond) this.style.display = 'block';
         });
      });
   area.addEventListener ('mouseout' , function (ev)
      {
      var tt = document.getElementById ('t' + this.id);
      if (ev.relatedTarget != tt) tt.style.display = 'none';
      tt.addEventListener ('mouseout' , function (ev)
         {
         var area = document.getElementById (this.id.substr (1)),
             cond = (ev.relatedTarget != area);
         for (var k = 0, chs = this.children, K = chs.length; k < K; k++)
            cond = cond && (ev.relatedTarget == chs [k]);
         if (cond) this.style.display = 'none';
         });
      });
   while (pic.offsetParent) l += pic.offsetLeft, t += pic.offsetTop, pic = pic.offsetParent;
   for (var minY = minX = Number.POSITIVE_INFINITY, maxX = k = 0, K = crds.length; k < K; k++)
      if (k % 2) minY = Math.min (minY, crds [k]);
      else minX = Math.min (minX, crds [k]), maxX = Math.max (maxX, crds [k]);
   var tt = document.getElementById ('ta' + j); with (tt.style)
      display = 'block',
                         top  = (t + minY + 10) + 'px',
                         left = (l + (maxX - minX) / 2 + minX - tt.offsetWidth / 2) + 'px',
      display = 'none';
   }
}
</script>
</head>
<body>
<map name="myMap">
<area id="a0" shape="poly" coords="0,0,200,0,200,200,0,200">
<area id="a1" shape="poly" coords="201,0,400,0,400,200,201,201">
<area id="a2" shape="poly" coords="0,201,400,201,400,400,0,400">
</map>
 
<img id="myPic" src="https://www.cyberforum.ru/attachments/379027d1395339131" usemap="#myMap">
 
<div class="myTt" id="ta0" style="color: red"  >Êðàñíûé â îäíó ñòðîêó è î÷åíü äëèííûé, ÷òîáû "çàåõàë" íà ñèíèé</div>
<div class="myTt" id="ta1" style="color: blue" >Ñèíèé<br>â äâå ñòðîêè</div>
<div class="myTt" id="ta2" style="color: green">Çåë¸íûé â òðè ñòðîêè<br>ñ <b><i>òåãàìè</i> <u>âíóòðè</u></b><br>è ñ <input type="button" value="êíîïêîé"></div>
</body>
</html>

@LLEEVV2020 · 23.03.2014, 21:08 **[ТС]**

Я когда открыл в браузере, то просто онемел от шока!!!! Это просто шедевр!!! просто нет слов.
Вы сенсей яваскрипта 28-ого уровня!!! Огромный благодар души. Всё сделали по красоте!!!

@LLEEVV2020 · 26.03.2014, 15:34 **[ТС]**

kalabuni, при быстром движении курсора по диагонале снизу вверх нижняя всплывающая подсказка не исчезает.

При медленном движении - всё впорядке.

(примечание к рисунку:
1) розовые стрелки - это движение курсора мыши
2)белая стрелка - это сам курсор мыши)
Это происходит только в том случае если курсор идёт снизу вверх. Когда идёт сверху вниз - всё впорядке

@kalabuni · 26.03.2014, 17:03

увы, это беда всех систем с обработкой onmouseover(out) - браузер обрабатывает эти события относительно медленно

попробуйте по вашей ссылке -- http://www.7ozer.com/content/poselok/genplan.html -- "проехать" курсором по карте и быстро выйти за её пределы, и увидите, что в 9-ти случаях из 10-ти последний тултип останется на карте

всё что здесь можно ускорить - я ускорил (позиции тултипов определяются один раз в начале, а не каждый раз при наведении мыши)
однако, вам понадобилась возможность "заезда" на тултип, а это - лишнее машинное время на обработку...

Добавлено через 16 минут
---------------

и чё, поверили?

замените 4 строки последнего кода на следующие:

-- строку #23 на if (ev.relatedTarget != tt) {if (self.OBJ) OBJ.style.display = 'none'; OBJ = tt; OBJ.style.display = 'block'}

-- строку #30 на if (cond) {if (self.OBJ) OBJ.style.display = 'none'; OBJ = document.getElementById (this.id.substr (1)); OBJ.style.display = 'block'}

-- строку #36 на if (ev.relatedTarget != tt) {OBJ.style.display = 'none'; OBJ = null}

-- строку #43 на if (cond) {OBJ.style.display = 'none'; OBJ = null}

@LLEEVV2020 · 26.03.2014, 17:43 **[ТС]**

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

и чё, поверили?

да. даже окутало грустью

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

замените 4 строки последнего кода на следующие:

Сейчас это и сделаю))

@LLEEVV2020 · 17.04.2014, 18:44 **[ТС]**

kalabuni
Мне этот код всё равно не помог.
Я решил отказаться от копирования текста из подсказки. Теперь нужно только чтоб не было залипания. Т. е. сейчас когда курсором мышки быстро двигаешь подсказка не исчезает.

Добавлено через 11 минут
Именно ваш пример безупречен, в нём нет залипания картинок. Но когда ваш код вставил в свой пример (в котором всплывающих подсказок много), то вот там и стало происходить залипание

Новые блоги и статьи Все статьи Все блоги /
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .

Хочу реализовать "всплывающие подсказки" как на сайте 7ozer.com

Решение

Решение

@LLEEVV2020 0 / 0 / 2 Регистрация: 09.10.2013 Сообщений: 58

	Хочу реализовать "всплывающие подсказки" как на сайте 7ozer.com 20.03.2014, 19:57. Показов 2479. Ответов 19 Метки нет (Все метки) Хочу реализовать "всплывающие подсказки" как на сайте http://www.7ozer.com/content/poselok/genplan.html Подскажите идеями. Добавлено через 1 час 24 минуты Там при наведения на дома всплывает подсказка, точнее всплывает описание. Если бы только это было в тексте вывести подсказку, то там всё просто - несколько строчек на css. Но тут в картинке выводятся, вот это меня и вставит тупик. Ну разбью я картинку в Fireworks, будут у меня "кусочки" area. А дальше что? что можно написать на яваскрипте , чтоб такие описания всплывали? 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	20.03.2014, 22:28
	если что непонятно, спрашивайте 0

@LLEEVV2020 0 / 0 / 2 Регистрация: 09.10.2013 Сообщений: 58
	21.03.2014, 07:56 [ТС]
	kalabuni, огромнейшее спасибо!! пока вопросов нет 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	22.03.2014, 22:57
	ну вот, а написали - "вопросов нет" мои тултипы находились вне соответствующих областей <AREA> (выше их на плоскости экрана) ваши тултипы находятся над соответствующими им областями <AREA> (перекрывают их на плоскости экрана) поэтому и мигает, ибо происходит то, что я совсем недавно описывал в другой теме https://www.cyberforum.ru/post5928230.html вы явно не задумывались над тем, зачем я написал в стилевом блоке height: 34px и line-height: 34px, а в скрипте t = -34 ? вы же убрали height: 34px, а всё остальное зачем-то оставили неправильный у вас подход: в программировании необходимо понимать - зачем и почему написан каждый символ в программе ------------ в общем, если вам нужна именно такая конфигурация, чтобы тултипы перекрывали соответствующую область <AREA> и чтобы не мигало, надо переписать скрипт, используя свойство event.relatedTarget - и об этом я здесь тоже писал в теме https://www.cyberforum.ru/post4616523.html если не справитесь сами, свистните, напишу 2

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	23.03.2014, 02:14
	опять не поняли вы ничего -- блоку с одной строкой текста устанавливают одинаковое значение свойств стиля height и line-height с единственной целью - чтобы отцентрировать эту строку посередине блока по вертикали; -- в скрипте я назначил переменной t значение, равное высоте тултипа для того, чтобы нижний край тултипа был на одной линии с соответствующей областью <AREA>; более того, позже я ещё 10 пикселей отнимаю, чтобы между нижней границей тултипа и верхней границей области был зазор в 10 пикселей вы же, не задумываясь, убрали t = -34, но 10 пикселей далее в формуле опять зачем-то оставили т.е. вы оба раза положение тултипа относительно соответствующей области <AREA> сделали "от балды" итак, я сделал так, как показано на рисунке ниже нарисуйте, как именно нужно вам Миниатюры 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	23.03.2014, 16:57
	мне опять за вас придумывать? предлагаю: при сложной конфигурации областей <AREA> размещать тултипы так, чтобы: -- нижний край тултипа находился на 10 пикселей выше верхней точки соответствующей области <AREA> -- вертикальная срединная линия тултипа проходила через горизонтальную середину соответствующей области <AREA> см. рисунок или же вам надо, чтобы с области можно было "заехать" мышью на тултип, чтобы там что-то скопировать (или на что-то нажать)? опишите, в конце-концов, нужные вам требования к позиции тултипа относительно соответствующей области <AREA> Миниатюры 1

@LLEEVV2020 0 / 0 / 2 Регистрация: 09.10.2013 Сообщений: 58
	23.03.2014, 21:08 [ТС]
	Я когда открыл в браузере, то просто онемел от шока!!!! Это просто шедевр!!! просто нет слов. Вы сенсей яваскрипта 28-ого уровня!!! Огромный благодар души. Всё сделали по красоте!!! 0

@LLEEVV2020 0 / 0 / 2 Регистрация: 09.10.2013 Сообщений: 58
	26.03.2014, 15:34 [ТС]
	kalabuni, при быстром движении курсора по диагонале снизу вверх нижняя всплывающая подсказка не исчезает. При медленном движении - всё впорядке. (примечание к рисунку: 1) розовые стрелки - это движение курсора мыши 2)белая стрелка - это сам курсор мыши) Это происходит только в том случае если курсор идёт снизу вверх. Когда идёт сверху вниз - всё впорядке 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	26.03.2014, 17:03
	Сообщение было отмечено LLEEVV2020 как решение Решение увы, это беда всех систем с обработкой onmouseover(out) - браузер обрабатывает эти события относительно медленно попробуйте по вашей ссылке -- http://www.7ozer.com/content/poselok/genplan.html -- "проехать" курсором по карте и быстро выйти за её пределы, и увидите, что в 9-ти случаях из 10-ти последний тултип останется на карте всё что здесь можно ускорить - я ускорил (позиции тултипов определяются один раз в начале, а не каждый раз при наведении мыши) однако, вам понадобилась возможность "заезда" на тултип, а это - лишнее машинное время на обработку... Добавлено через 16 минут --------------- и чё, поверили? замените 4 строки последнего кода на следующие: -- строку #23 на if (ev.relatedTarget != tt) {if (self.OBJ) OBJ.style.display = 'none'; OBJ = tt; OBJ.style.display = 'block'} -- строку #30 на if (cond) {if (self.OBJ) OBJ.style.display = 'none'; OBJ = document.getElementById (this.id.substr (1)); OBJ.style.display = 'block'} -- строку #36 на if (ev.relatedTarget != tt) {OBJ.style.display = 'none'; OBJ = null} -- строку #43 на if (cond) {OBJ.style.display = 'none'; OBJ = null} 1

@LLEEVV2020 0 / 0 / 2 Регистрация: 09.10.2013 Сообщений: 58
	17.04.2014, 18:44 [ТС]
	kalabuni Мне этот код всё равно не помог. Я решил отказаться от копирования текста из подсказки. Теперь нужно только чтоб не было залипания. Т. е. сейчас когда курсором мышки быстро двигаешь подсказка не исчезает. Добавлено через 11 минут Именно ваш пример безупречен, в нём нет залипания картинок. Но когда ваш код вставил в свой пример (в котором всплывающих подсказок много), то вот там и стало происходить залипание 0