Хочу реализовать "всплывающие подсказки" как на сайте 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 минут
Именно ваш пример безупречен, в нём нет залипания картинок. Но когда ваш код вставил в свой пример (в котором всплывающих подсказок много), то вот там и стало происходить залипание

Новые блоги и статьи Все статьи Все блоги /
Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .	Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .
Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .

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

Решение

Решение

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

	Хочу реализовать "всплывающие подсказки" как на сайте 7ozer.com 20.03.2014, 19:57. Показов 2531. Ответов 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