Форум программистов, компьютерный форум, киберфорум
jQuery
Форум программистов и сисадминов Киберфорум > Форум web-программистов > JavaScript > jQuery
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.74/19: Рейтинг темы: голосов - 19, средняя оценка - 4.74
1 / 1 / 0
Регистрация: 06.12.2009
Сообщений: 41

позиционирование внутри блока перетягиванием

01.12.2010, 01:18. Показов 4048. Ответов 4
Метки нет (Все метки)
Студворк — интернет-сервис помощи студентам
Всем доброго времени суток!
разбираюсь с javascript-ингом.

Имею страницу, внутри которой блок div подстраиваемый под ширину окна. Внутри DIV наборная таблица, генерируется скриптом на php, таблица значительно больше самого DIV. Таблица из ячеек 22х22px фон каждой ячейки картинка. Получаю что то вроде тайловой карты.

Задачи:
1 внутри дива накладывать несколько таблиц друг на друга.(таблицы одинакового размера)
2 перемещать изображение которое получается внутри дива перетягиванием мышью, как в googlemaps
3 получать координаты курсора в таблице (строка такая-то, ячейка такая-то)

Подскажите как это можно реализовать, вот код который сейчас у меня уже есть:

html:
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
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

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
 
<link type="text/css" rel="stylesheet" media="all" href="css/style.css">
<link type="text/css" rel="stylesheet" media="all" href="css/map.css">
 
<link type="text/css" href="css/smoothness/jquery-ui-1.7.3.custom.css" rel="stylesheet" />  
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.3.custom.min.js"></script>
 
<script type="text/javascript" src="js/javas.js"></script>
</head>
<style type="text/css">
            
        </style>
<body>
<div id="geeral" class="general">
<!--<img src="misc/mEar.jpg">-->
<table CELLPADDING=0 CELLSPACING=0 style="margin:0px; padding:0px;">
<tr>
<td class="mapt map1011"></td>
<td class="mapt map1011"></td>
<td class="mapt map1011"></td>
<td class="mapt map1011"></td>
<td class="mapt map1011"></td>
<td class="mapt map1011"></td>
 
<td class="mapt map1011"></td>
<td class="mapt map1011"></td>
<td class="mapt map1011"></td>
<td class="mapt map515"></td>
<td class="mapt map68"></td>
<td class="mapt map57"></td>
 
<td class="mapt map1011"></td>
<td class="mapt map1011"></td>
<td class="mapt map1011"></td>
<td class="mapt map1011"></td>
<td style="width:1000px">тестовое поле</td>
</tr>
<tr>
<td class="mapt map1011"></td>
<td class="mapt map1011"></td>
<td class="mapt map1011"></td>
<td class="mapt map1011"></td>
<td class="mapt map1011"></td>
<td class="mapt map1011"></td>
 
<td class="mapt map1011"></td>
<td class="mapt map1011"></td>
<td class="mapt map1011"></td>
 
<td class="mapt map65"></td>
<td class="mapt map1213"></td>
<td class="mapt map59"></td>
 
<td class="mapt map1011"></td>
<td class="mapt map1011"></td>
<td class="mapt map1011"></td>
<td class="mapt map1011"></td>
<td style="width:1000px">тестовое поле</td>
</tr>
<tr>
<td class="mapt map1011"></td>
<td class="mapt map1011"></td>
<td class="mapt map1011"></td>
<td class="mapt map1011"></td>
<td class="mapt map1011"></td>
<td class="mapt map1011"></td>
 
<td class="mapt map1011"></td>
<td class="mapt map1011"></td>
<td class="mapt map1011"></td>
 
<td class="mapt map51"></td>
 
<td class="mapt map53"></td>
 
<td class="mapt map415"></td>
 
<td class="mapt map1011"></td>
<td class="mapt map1011"></td>
<td class="mapt map1011"></td>
<td class="mapt map1011"></td>
<td style="width:1000px">тестовое поле</td>
</tr>
 
</table>
 
        
 
</div>
 
</body>
</html>
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
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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236

body{
margin: 15px 15px;
background-image: url(../misc/fon.png);
}
.general{
width:100%;
height:100%; 
font-family:'MS Sans Serif', 'Arial', 'Verdana', 'sans-serif'; 
font-size: 8pt;
overflow: auto;
border: 1px solid #ccc;
background: #eee;
}
.mapt { width: 32px; height: 32px; background-image: url(../img/surface/map1.png); }
 
 
.map1-1 { background-position: 0px 0px; }
.map1-2 { background-position: -32px 0px; }
.map1-3  { background-position: -64px 0px; }                
.map1-4  { background-position: -96px 0px; }                
.map1-5  { background-position: -128px 0px; }               
.map1-6  { background-position: -160px 0px; }               
.map1-7  { background-position: -192px 0px; }               
.map1-8  { background-position: -224px 0px; }               
.map1-9  { background-position: -256px 0px; }               
.map1-10  { background-position: -288px 0px; }              
.map1-11  { background-position: -320px 0px; }              
.map1-12  { background-position: -352px 0px; }              
.map1-13  { background-position: -384px 0px; }              
.map1-14  { background-position: -416px 0px; }              
.map1-15  { background-position: -448px 0px; }              
.map1-16  { background-position: -480px 0px; }              
 
.map21 { background-position: 0px -32px; }
.map22 { background-position: -32px -32px; }
.map23  { background-position: -64px -32px; }               
.map24  { background-position: -96px -32px; }               
.map25  { background-position: -128px -32px; }              
.map26  { background-position: -160px -32px; }              
.map27  { background-position: -192px -32px; }              
.map28  { background-position: -224px -32px; }              
.map29  { background-position: -256px -32px; }              
.map210  { background-position: -288px -32px; }             
.map211  { background-position: -320px -32px; }             
.map212  { background-position: -352px -32px; }             
.map213  { background-position: -384px -32px; }             
.map214  { background-position: -416px -32px; }             
.map215  { background-position: -448px -32px; }             
.map216  { background-position: -480px -32px; }
 
.map31 { background-position: 0px -64px; }
.map32 { background-position: -32px -64px; }
.map33  { background-position: -64px -64px; }               
.map34  { background-position: -96px -64px; }               
.map35  { background-position: -128px -64px; }              
.map36  { background-position: -160px -64px; }              
.map37  { background-position: -192px -64px; }              
.map38  { background-position: -224px -64px; }              
.map39  { background-position: -256px -64px; }              
.map310  { background-position: -288px -64px; }             
.map311  { background-position: -320px -64px; }             
.map312  { background-position: -352px -64px; }             
.map313  { background-position: -384px -64px; }             
.map314  { background-position: -416px -64px; }             
.map315  { background-position: -448px -64px; }             
.map316  { background-position: -480px -64px; }
 
.map41 { background-position: 0px -96px; }
.map42 { background-position: -32px -96px; }
.map43  { background-position: -64px -96px; }               
.map44  { background-position: -96px -96px; }               
.map45  { background-position: -128px -96px; }              
.map46  { background-position: -160px -96px; }              
.map47  { background-position: -192px -96px; }              
.map48  { background-position: -224px -96px; }              
.map49  { background-position: -256px -96px; }              
.map410  { background-position: -288px -96px; }             
.map411  { background-position: -320px -96px; }             
.map412  { background-position: -352px -96px; }             
.map413  { background-position: -384px -96px; }             
.map414  { background-position: -416px -96px; }             
.map415  { background-position: -448px -96px; }             
.map416  { background-position: -480px -96px; }
 
.map51 { background-position: 0px -128px; }
.map52 { background-position: -32px -128px; }
.map53  { background-position: -64px -128px; }              
.map54  { background-position: -96px -128px; }              
.map55  { background-position: -128px -128px; }             
.map56  { background-position: -160px -128px; }             
.map57  { background-position: -192px -128px; }             
.map58  { background-position: -224px -128px; }             
.map59  { background-position: -256px -128px; }             
.map510  { background-position: -288px -128px; }                
.map511  { background-position: -320px -128px; }                
.map512  { background-position: -352px -128px; }                
.map513  { background-position: -384px -128px; }                
.map514  { background-position: -416px -128px; }                
.map515  { background-position: -448px -128px; }                
.map516  { background-position: -480px -128px; }
 
.map61 { background-position: 0px -160px; }
.map62 { background-position: -32px -160px; }
.map63  { background-position: -64px -160px; }              
.map64  { background-position: -96px -160px; }              
.map65  { background-position: -128px -160px; }             
.map66  { background-position: -160px -160px; }             
.map67  { background-position: -192px -160px; }             
.map68  { background-position: -224px -160px; }             
.map69  { background-position: -256px -160px; }             
.map610  { background-position: -288px -160px; }                
.map611  { background-position: -320px -160px; }                
.map612  { background-position: -352px -160px; }                
.map613  { background-position: -384px -160px; }                
.map614  { background-position: -416px -160px; }                
.map615  { background-position: -448px -160px; }                
.map616  { background-position: -480px -160px; }
 
.map71 { background-position: 0px -192px; }
.map72 { background-position: -32px -192px; }
.map73  { background-position: -64px -192px; }              
.map74  { background-position: -96px -192px; }              
.map75  { background-position: -128px -192px; }             
.map76  { background-position: -160px -192px; }             
.map77  { background-position: -192px -192px; }             
.map78  { background-position: -224px -192px; }             
.map79  { background-position: -256px -192px; }             
.map710  { background-position: -288px -192px; }                
.map711  { background-position: -320px -192px; }                
.map712  { background-position: -352px -192px; }                
.map713  { background-position: -384px -192px; }                
.map714  { background-position: -416px -192px; }                
.map715  { background-position: -448px -192px; }                
.map716  { background-position: -480px -192px; }
 
.map81 { background-position: 0px -224px; }
.map82 { background-position: -32px -224px; }
.map83  { background-position: -64px -224px; }              
.map84  { background-position: -96px -224px; }              
.map85  { background-position: -128px -224px; }             
.map86  { background-position: -160px -224px; }             
.map87  { background-position: -192px -224px; }             
.map88  { background-position: -224px -224px; }             
.map89  { background-position: -256px -224px; }             
.map810  { background-position: -288px -224px; }                
.map811  { background-position: -320px -224px; }                
.map812  { background-position: -352px -224px; }                
.map813  { background-position: -384px -224px; }                
.map814  { background-position: -416px -224px; }                
.map815  { background-position: -448px -224px; }                
.map816  { background-position: -480px -224px; }
 
.map91 { background-position: 0px -256px; }
.map92 { background-position: -32px -256px; }
.map93  { background-position: -64px -256px; }              
.map94  { background-position: -96px -256px; }              
.map95  { background-position: -128px -256px; }             
.map96  { background-position: -160px -256px; }             
.map97  { background-position: -192px -256px; }             
.map98  { background-position: -224px -256px; }             
.map99  { background-position: -256px -256px; }             
.map910  { background-position: -288px -256px; }                
.map911  { background-position: -320px -256px; }                
.map912  { background-position: -352px -256px; }                
.map913  { background-position: -384px -256px; }                
.map914  { background-position: -416px -256px; }                
.map915  { background-position: -448px -256px; }                
.map916  { background-position: -480px -256px; }
 
.map101 { background-position: 0px -288px; }
.map102 { background-position: -32px -288px; }
.map103  { background-position: -64px -288px; }             
.map104  { background-position: -96px -288px; }             
.map105  { background-position: -128px -288px; }                
.map106  { background-position: -160px -288px; }                
.map107  { background-position: -192px -288px; }                
.map108  { background-position: -224px -288px; }                
.map109  { background-position: -256px -288px; }                
.map1010  { background-position: -288px -288px; }               
.map1011  { background-position: -320px -288px; }               
.map1012  { background-position: -352px -288px; }               
.map1013  { background-position: -384px -288px; }               
.map1014  { background-position: -416px -288px; }               
.map1015  { background-position: -448px -288px; }               
.map1016  { background-position: -480px -288px; }
 
.map111 { background-position: 0px -320px; }
.map112 { background-position: -32px -320px; }
.map113  { background-position: -64px -320px; }             
.map114  { background-position: -96px -320px; }             
.map115  { background-position: -128px -320px; }                
.map116  { background-position: -160px -320px; }                
.map117  { background-position: -192px -320px; }                
.map118  { background-position: -224px -320px; }                
.map119  { background-position: -256px -320px; }                
.map1110  { background-position: -288px -320px; }               
.map1111  { background-position: -320px -320px; }               
.map1112  { background-position: -352px -320px; }               
.map1113  { background-position: -384px -320px; }               
.map1114  { background-position: -416px -320px; }               
.map1115  { background-position: -448px -320px; }               
.map1116  { background-position: -480px -320px; }
 
.map121 { background-position: 0px -352px; }
.map122 { background-position: -32px -352px; }
.map123  { background-position: -64px -352px; }             
.map124  { background-position: -96px -352px; }             
.map125  { background-position: -128px -352px; }                
.map126  { background-position: -160px -352px; }                
.map127  { background-position: -192px -352px; }                
.map128  { background-position: -224px -352px; }                
.map129  { background-position: -256px -352px; }                
.map1210  { background-position: -288px -352px; }               
.map1211  { background-position: -320px -352px; }               
.map1212  { background-position: -352px -352px; }               
.map1213  { background-position: -384px -352px; }               
.map1214  { background-position: -416px -352px; }               
.map1215  { background-position: -448px -352px; }               
.map1216  { background-position: -480px -352px; }
 
.map131 { background-position: 0px -384px; }
.map132 { background-position: -32px -384px; }
.map133  { background-position: -64px -384px; }             
.map134  { background-position: -96px -384px; }             
.map135  { background-position: -128px -384px; }                
.map136  { background-position: -160px -384px; }                
.map137  { background-position: -192px -384px; }                
.map138  { background-position: -224px -384px; }                
.map139  { background-position: -256px -384px; }                
.map1310  { background-position: -288px -384px; }               
.map1311  { background-position: -320px -384px; }               
.map1312  { background-position: -352px -384px; }               
.map1313  { background-position: -384px -384px; }               
.map1314  { background-position: -416px -384px; }               
.map1315  { background-position: -448px -384px; }               
.map1316  { background-position: -480px -384px; }
Собственно кода то и нет основного только разметка, просто не могу найти от чего оттолкнуться.
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
 01.12.2010, 01:18
Ответы с готовыми решениями:

Позиционирование блока
Помогите, пожалуйста.. Хочу спозиционировать блок с position:fixed так, чтобы он на разных мониторах был в нужном месте function...

Позиционирование блока
Всем привет. Помогите,пожалуйста решить такую проблему: У меня есть следующий блок(код ниже).т.е.в блоке с id=&quot;div009&quot;( с...

Позиционирование фиксированного блока
На странице есть фиксированный блок (соц. иконки), на планшетах наезжает на footer. Можно ли как-то остановить его на границе футера? ...

4
 Аватар для Vovan-VE
13210 / 6599 / 1041
Регистрация: 10.01.2008
Сообщений: 15,069
01.12.2010, 15:36
Для полноты картины явно не хватает содержимого из js/javas.js
0
1 / 1 / 0
Регистрация: 06.12.2009
Сообщений: 41
02.12.2010, 11:36  [ТС]
он пустой поэтому его содержание и не приводилось . Говорю же, незнаю с чего начать.
Думаю нужно измерить размеры таблицы внутри дива, и размеры дива в пикселях, и задать смещение с которым нужно вывести таблицу в див.

как измерить я понимаю
JavaScript
1
2
3
4
5
6
7
8

$(document).mousemove(function(){
var w_div = $('#geeral').width();
var h_div = $('#geeral').height();
 
var w_table = $('#id_table').width();//предпологается что id таблицы id_table
var h_table = $('#id_table').height();//предпологается что id таблицы id_table
 
});
размер каждой ячейки известен 32х32px
как сделать первоночальное смещение ну скажем нужно чтобы 41 ячейка 30 строки была в центре дива или в одном из его углов (с углами думаю проще будет)

И как организовать прокрутку таблицы внутри дива при помощи перетаскивания мыщью (как в googlemaps)
0
1 / 1 / 0
Регистрация: 06.12.2009
Сообщений: 41
03.12.2010, 02:17  [ТС]
В общем как позиционировать разобрался, не могу привязать к мыши. + бесит то что не могу задать цикл например такого плана
пока курсор над элементом таким то менять вот это и это
+ не могу сделать обработку зажатой клавиши на клавиатуре скажем нажал стрелку и пока не отпустил таблица внутри дива двигается.

Чтобы более понятно было набросал из того что было под рукой пример его собственно креплю к этому посту.

Плиз подскажите как сделать "прокрутку" таблицы внутри дива более удобной, но без скролов.

Да чуть не забыл эффекты на jquery жутко тормозят с большими блоками, это нормально?
Вложения
Тип файла: zip java_aw.zip (1,000.8 Кб, 7 просмотров)
0
1 / 1 / 0
Регистрация: 06.12.2009
Сообщений: 41
04.12.2010, 02:04  [ТС]
И так кое что получилось, но мне не нравиться.

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

вот код:
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
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

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="shortcut icon" href="/misc/favicon.ico" type="image/x-icon">
<title></title>
 
<link type="text/css" rel="stylesheet" media="all" href="css/style.css">
<link type="text/css" rel="stylesheet" media="all" href="css/map.css">
 
<link type="text/css" href="css/smoothness/jquery-ui-1.7.3.custom.css" rel="stylesheet" />  
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.3.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.timers.js"></script>
<script type="text/javascript" src="js/jquery.posytion.js"></script>
 
<script type="text/javascript" src="js/javas.js"></script>
</head>
<style type="text/css">
            
        </style>
<body>
<!--X: <input name="coordX" id="coordX" type="text"> | 
Y: <input name="coordy" id="coordy" type="text">|||| 
X_push: <input name="coordX_p" id="coordX_p" type="text"> | 
Y_push: <input name="coordy_p" id="coordy_p" type="text"> | 
fx: <input name="coordX_p" id="flagX" type="text"> | 
fy: <input name="coordy_p" id="flagy" type="text">
 
<img src="misc/mEar.jpg">
 <button id="left">«</button> <button id="right">»</button>-->
 
<div id = "test" style = "color: red" >
 
</div>
<div id="geeral" class="general">
<table CELLPADDING=0 CELLSPACING=0 id="table_map" class="my_map"  style="cursor : default; -moz-user-select: none; user-select: none;">
<tr>
<td class="mapt map313"><img src="img/rasporka.png"></td>
<td class="mapt map34"><img src="img/rasporka.png"></td>
<td class="mapt map34"><img src="img/rasporka.png"></td>
<td class="mapt map34"><img src="img/rasporka.png"></td>
<td class="mapt map33"><img src="img/rasporka.png"></td>
<td class="mapt map34"><img src="img/rasporka.png"></td>
<td class="mapt map35"><img src="img/rasporka.png"></td>
<td class="mapt map33"><img src="img/rasporka.png"></td>
<td class="mapt map34"><img src="img/rasporka.png"></td>
<td class="mapt map34"><img src="img/rasporka.png"></td>
<td class="mapt map35"><img src="img/rasporka.png"></td>
<td class="mapt map34"><img src="img/rasporka.png"></td>
<td class="mapt map34"><img src="img/rasporka.png"></td>
<td class="mapt map34"><img src="img/rasporka.png"></td>
<td class="mapt map34"><img src="img/rasporka.png"></td>
<td class="mapt map35"><img src="img/rasporka.png"></td>
<td class="mapt map34"><img src="img/rasporka.png"></td>
<td class="mapt map34"><img src="img/rasporka.png"></td>
<td class="mapt map33"><img src="img/rasporka.png"></td>
<td class="mapt map34"><img src="img/rasporka.png"></td>
<td class="mapt map34"><img src="img/rasporka.png"></td>
<td class="mapt map35"><img src="img/rasporka.png"></td>
<td class="mapt map34"><img src="img/rasporka.png"></td>
<td class="mapt map35"><img src="img/rasporka.png"></td>
<td class="mapt map33"><img src="img/rasporka.png"></td>
<td class="mapt map34"><img src="img/rasporka.png"></td>
<td class="mapt map33"><img src="img/rasporka.png"></td>
<td class="mapt map33"><img src="img/rasporka.png"></td>
<td class="mapt map34"><img src="img/rasporka.png"></td>
<td class="mapt map35"><img src="img/rasporka.png"></td>
<td class="mapt map33"><img src="img/rasporka.png"></td>
<td class="mapt map34"><img src="img/rasporka.png"></td>
<td class="mapt map35"><img src="img/rasporka.png"></td>
<td class="mapt map33"><img src="img/rasporka.png"></td>
<td class="mapt map34"><img src="img/rasporka.png"></td>
<td class="mapt map35"><img src="img/rasporka.png"></td>
<td class="mapt map34"><img src="img/rasporka.png"></td>
<td class="mapt map45"><img src="img/rasporka.png"></td>
<td class="mapt map1010"><img src="img/rasporka.png"></td>
</tr>
 
<tr>
<td class="mapt map410"><img src="img/rasporka.png"></td>
<td class="mapt map48"><img src="img/rasporka.png"></td>
<td class="mapt map47"><img src="img/rasporka.png"></td>
<td class="mapt map47"><img src="img/rasporka.png"></td>
<td class="mapt map47"><img src="img/rasporka.png"></td>
<td class="mapt map47"><img src="img/rasporka.png"></td>
<td class="mapt map47"><img src="img/rasporka.png"></td>
<td class="mapt map47"><img src="img/rasporka.png"></td>
<td class="mapt map47"><img src="img/rasporka.png"></td>
<td class="mapt map48"><img src="img/rasporka.png"></td>
<td class="mapt map47"><img src="img/rasporka.png"></td>
<td class="mapt map46"><img src="img/rasporka.png"></td>
<td class="mapt map47"><img src="img/rasporka.png"></td>
<td class="mapt map47"><img src="img/rasporka.png"></td>
<td class="mapt map47"><img src="img/rasporka.png"></td>
<td class="mapt map47"><img src="img/rasporka.png"></td>
<td class="mapt map47"><img src="img/rasporka.png"></td>
<td class="mapt map47"><img src="img/rasporka.png"></td>
<td class="mapt map47"><img src="img/rasporka.png"></td>
<td class="mapt map47"><img src="img/rasporka.png"></td>
<td class="mapt map47"><img src="img/rasporka.png"></td>
<td class="mapt map46"><img src="img/rasporka.png"></td>
<td class="mapt map47"><img src="img/rasporka.png"></td>
<td class="mapt map47"><img src="img/rasporka.png"></td>
<td class="mapt map47"><img src="img/rasporka.png"></td>
<td class="mapt map47"><img src="img/rasporka.png"></td>
<td class="mapt map46"><img src="img/rasporka.png"></td>
<td class="mapt map47"><img src="img/rasporka.png"></td>
<td class="mapt map47"><img src="img/rasporka.png"></td>
<td class="mapt map47"><img src="img/rasporka.png"></td>
<td class="mapt map47"><img src="img/rasporka.png"></td>
<td class="mapt map47"><img src="img/rasporka.png"></td>
<td class="mapt map47"><img src="img/rasporka.png"></td>
<td class="mapt map47"><img src="img/rasporka.png"></td>
<td class="mapt map47"><img src="img/rasporka.png"></td>
<td class="mapt map47"><img src="img/rasporka.png"></td>
<td class="mapt map47"><img src="img/rasporka.png"></td>
<td class="mapt map411"><img src="img/rasporka.png"></td>
<td class="mapt map1010"><img src="img/rasporka.png"></td>
</tr>
 
</table>    
 
</div>
 
</body>
</html>
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
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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241

body{
margin: 15px 15px;
background-image: url(../misc/fon.png);
}
.general{
width:100%;
height:100%; 
font-family:'MS Sans Serif', 'Arial', 'Verdana', 'sans-serif'; 
font-size: 8pt;
overflow: hidden;
border: 1px solid #ccc;
background: #eee;
position: relative;
}
.my_map{
position: absolute;
      
}
 
.mapt { width: 32px; height: 32px; background-image: url(../img/surface/summer.png); }
 
.map1-1 { background-position: 0px 0px; }
.map1-2 { background-position: -32px 0px; }
.map1-3  { background-position: -64px 0px; }                
.map1-4  { background-position: -96px 0px; }                
.map1-5  { background-position: -128px 0px; }               
.map1-6  { background-position: -160px 0px; }               
.map1-7  { background-position: -192px 0px; }               
.map1-8  { background-position: -224px 0px; }               
.map1-9  { background-position: -256px 0px; }               
.map1-10  { background-position: -288px 0px; }              
.map1-11  { background-position: -320px 0px; }              
.map1-12  { background-position: -352px 0px; }              
.map1-13  { background-position: -384px 0px; }              
.map1-14  { background-position: -416px 0px; }              
.map1-15  { background-position: -448px 0px; }              
.map1-16  { background-position: -480px 0px; }              
 
.map21 { background-position: 0px -32px; }
.map22 { background-position: -32px -32px; }
.map23  { background-position: -64px -32px; }               
.map24  { background-position: -96px -32px; }               
.map25  { background-position: -128px -32px; }              
.map26  { background-position: -160px -32px; }              
.map27  { background-position: -192px -32px; }              
.map28  { background-position: -224px -32px; }              
.map29  { background-position: -256px -32px; }              
.map210  { background-position: -288px -32px; }             
.map211  { background-position: -320px -32px; }             
.map212  { background-position: -352px -32px; }             
.map213  { background-position: -384px -32px; }             
.map214  { background-position: -416px -32px; }             
.map215  { background-position: -448px -32px; }             
.map216  { background-position: -480px -32px; }
 
.map31 { background-position: 0px -64px; }
.map32 { background-position: -32px -64px; }
.map33  { background-position: -64px -64px; }               
.map34  { background-position: -96px -64px; }               
.map35  { background-position: -128px -64px; }              
.map36  { background-position: -160px -64px; }              
.map37  { background-position: -192px -64px; }              
.map38  { background-position: -224px -64px; }              
.map39  { background-position: -256px -64px; }              
.map310  { background-position: -288px -64px; }             
.map311  { background-position: -320px -64px; }             
.map312  { background-position: -352px -64px; }             
.map313  { background-position: -384px -64px; }             
.map314  { background-position: -416px -64px; }             
.map315  { background-position: -448px -64px; }             
.map316  { background-position: -480px -64px; }
 
.map41 { background-position: 0px -96px; }
.map42 { background-position: -32px -96px; }
.map43  { background-position: -64px -96px; }               
.map44  { background-position: -96px -96px; }               
.map45  { background-position: -128px -96px; }              
.map46  { background-position: -160px -96px; }              
.map47  { background-position: -192px -96px; }              
.map48  { background-position: -224px -96px; }              
.map49  { background-position: -256px -96px; }              
.map410  { background-position: -288px -96px; }             
.map411  { background-position: -320px -96px; }             
.map412  { background-position: -352px -96px; }             
.map413  { background-position: -384px -96px; }             
.map414  { background-position: -416px -96px; }             
.map415  { background-position: -448px -96px; }             
.map416  { background-position: -480px -96px; }
 
.map51 { background-position: 0px -128px; }
.map52 { background-position: -32px -128px; }
.map53  { background-position: -64px -128px; }              
.map54  { background-position: -96px -128px; }              
.map55  { background-position: -128px -128px; }             
.map56  { background-position: -160px -128px; }             
.map57  { background-position: -192px -128px; }             
.map58  { background-position: -224px -128px; }             
.map59  { background-position: -256px -128px; }             
.map510  { background-position: -288px -128px; }                
.map511  { background-position: -320px -128px; }                
.map512  { background-position: -352px -128px; }                
.map513  { background-position: -384px -128px; }                
.map514  { background-position: -416px -128px; }                
.map515  { background-position: -448px -128px; }                
.map516  { background-position: -480px -128px; }
 
.map61 { background-position: 0px -160px; }
.map62 { background-position: -32px -160px; }
.map63  { background-position: -64px -160px; }              
.map64  { background-position: -96px -160px; }              
.map65  { background-position: -128px -160px; }             
.map66  { background-position: -160px -160px; }             
.map67  { background-position: -192px -160px; }             
.map68  { background-position: -224px -160px; }             
.map69  { background-position: -256px -160px; }             
.map610  { background-position: -288px -160px; }                
.map611  { background-position: -320px -160px; }                
.map612  { background-position: -352px -160px; }                
.map613  { background-position: -384px -160px; }                
.map614  { background-position: -416px -160px; }                
.map615  { background-position: -448px -160px; }                
.map616  { background-position: -480px -160px; }
 
.map71 { background-position: 0px -192px; }
.map72 { background-position: -32px -192px; }
.map73  { background-position: -64px -192px; }              
.map74  { background-position: -96px -192px; }              
.map75  { background-position: -128px -192px; }             
.map76  { background-position: -160px -192px; }             
.map77  { background-position: -192px -192px; }             
.map78  { background-position: -224px -192px; }             
.map79  { background-position: -256px -192px; }             
.map710  { background-position: -288px -192px; }                
.map711  { background-position: -320px -192px; }                
.map712  { background-position: -352px -192px; }                
.map713  { background-position: -384px -192px; }                
.map714  { background-position: -416px -192px; }                
.map715  { background-position: -448px -192px; }                
.map716  { background-position: -480px -192px; }
 
.map81 { background-position: 0px -224px; }
.map82 { background-position: -32px -224px; }
.map83  { background-position: -64px -224px; }              
.map84  { background-position: -96px -224px; }              
.map85  { background-position: -128px -224px; }             
.map86  { background-position: -160px -224px; }             
.map87  { background-position: -192px -224px; }             
.map88  { background-position: -224px -224px; }             
.map89  { background-position: -256px -224px; }             
.map810  { background-position: -288px -224px; }                
.map811  { background-position: -320px -224px; }                
.map812  { background-position: -352px -224px; }                
.map813  { background-position: -384px -224px; }                
.map814  { background-position: -416px -224px; }                
.map815  { background-position: -448px -224px; }                
.map816  { background-position: -480px -224px; }
 
.map91 { background-position: 0px -256px; }
.map92 { background-position: -32px -256px; }
.map93  { background-position: -64px -256px; }              
.map94  { background-position: -96px -256px; }              
.map95  { background-position: -128px -256px; }             
.map96  { background-position: -160px -256px; }             
.map97  { background-position: -192px -256px; }             
.map98  { background-position: -224px -256px; }             
.map99  { background-position: -256px -256px; }             
.map910  { background-position: -288px -256px; }                
.map911  { background-position: -320px -256px; }                
.map912  { background-position: -352px -256px; }                
.map913  { background-position: -384px -256px; }                
.map914  { background-position: -416px -256px; }                
.map915  { background-position: -448px -256px; }                
.map916  { background-position: -480px -256px; }
 
.map101 { background-position: 0px -288px; }
.map102 { background-position: -32px -288px; }
.map103  { background-position: -64px -288px; }             
.map104  { background-position: -96px -288px; }             
.map105  { background-position: -128px -288px; }                
.map106  { background-position: -160px -288px; }                
.map107  { background-position: -192px -288px; }                
.map108  { background-position: -224px -288px; }                
.map109  { background-position: -256px -288px; }                
.map1010  { background-position: -288px -288px; }               
.map1011  { background-position: -320px -288px; }               
.map1012  { background-position: -352px -288px; }               
.map1013  { background-position: -384px -288px; }               
.map1014  { background-position: -416px -288px; }               
.map1015  { background-position: -448px -288px; }               
.map1016  { background-position: -480px -288px; }
 
.map111 { background-position: 0px -320px; }
.map112 { background-position: -32px -320px; }
.map113  { background-position: -64px -320px; }             
.map114  { background-position: -96px -320px; }             
.map115  { background-position: -128px -320px; }                
.map116  { background-position: -160px -320px; }                
.map117  { background-position: -192px -320px; }                
.map118  { background-position: -224px -320px; }                
.map119  { background-position: -256px -320px; }                
.map1110  { background-position: -288px -320px; }               
.map1111  { background-position: -320px -320px; }               
.map1112  { background-position: -352px -320px; }               
.map1113  { background-position: -384px -320px; }               
.map1114  { background-position: -416px -320px; }               
.map1115  { background-position: -448px -320px; }               
.map1116  { background-position: -480px -320px; }
 
.map121 { background-position: 0px -352px; }
.map122 { background-position: -32px -352px; }
.map123  { background-position: -64px -352px; }             
.map124  { background-position: -96px -352px; }             
.map125  { background-position: -128px -352px; }                
.map126  { background-position: -160px -352px; }                
.map127  { background-position: -192px -352px; }                
.map128  { background-position: -224px -352px; }                
.map129  { background-position: -256px -352px; }                
.map1210  { background-position: -288px -352px; }               
.map1211  { background-position: -320px -352px; }               
.map1212  { background-position: -352px -352px; }               
.map1213  { background-position: -384px -352px; }               
.map1214  { background-position: -416px -352px; }               
.map1215  { background-position: -448px -352px; }               
.map1216  { background-position: -480px -352px; }
 
.map131 { background-position: 0px -384px; }
.map132 { background-position: -32px -384px; }
.map133  { background-position: -64px -384px; }             
.map134  { background-position: -96px -384px; }             
.map135  { background-position: -128px -384px; }                
.map136  { background-position: -160px -384px; }                
.map137  { background-position: -192px -384px; }                
.map138  { background-position: -224px -384px; }                
.map139  { background-position: -256px -384px; }                
.map1310  { background-position: -288px -384px; }               
.map1311  { background-position: -320px -384px; }               
.map1312  { background-position: -352px -384px; }               
.map1313  { background-position: -384px -384px; }               
.map1314  { background-position: -416px -384px; }               
.map1315  { background-position: -448px -384px; }               
.map1316  { background-position: -480px -384px; }
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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182

/**/
$( document ).ready(
    function(){
var flag = 0;
var flag2 = 0;
var test = getOffset(geeral);
 
//$( ".my_map" ).css('left',flag);
//$( ".my_map" ).css('top',flag2);
 
 
$(document).mousemove(function(e){
 
            window.mouse_x = e.pageX;
            window.mouse_y = e.pageY;
            var w = $('#geeral').width();
            var h = $('#geeral').height();
            //document.getElementById("flagX").value = flag_m;
            //document.getElementById("flagy").value = flag2_m;
            
            if((window.mouse_x) < (test.left+15))
                {
                $(".my_map").everyTime(500, 'timer11', function() {
                    
                    --flag;
                    --flag;
                    --flag;
                    --flag;
                    --flag;
                        $(this).css('left',flag);
                });
                }else{$(".my_map").stopTime('timer11');}
 
            if((window.mouse_x) > (w+test.left-15))
                {
                $(".my_map").everyTime(500, 'timer12', function() {
                    ++flag;
                    ++flag;
                    ++flag;
                    ++flag;
                    ++flag;
                        $(this).css('left',flag);
                });
                }else{$(".my_map").stopTime('timer12');}
 
 
            
            if((window.mouse_y) < (test.top+15))
                {
                $(".my_map").everyTime(500, 'timer13', function() {
                    --flag2;
                    --flag2;
                    --flag2;
                    --flag2;
                    --flag2;
                        $(this).css('top',flag2);
                });
                }else{$(".my_map").stopTime('timer13');}
 
            if((window.mouse_y) > (h+test.top-15))
                {
                $(".my_map").everyTime(500, 'timer14', function() {
                    ++flag2;
                    ++flag2;
                    ++flag2;
                    ++flag2;
                    ++flag2;
                        $(this).css('top',flag2);
                });
                }else{$(".my_map").stopTime('timer14');}
 
 
});
 
 
 
        $( document ).keydown(
            function( e ){
                if( e.keyCode == 37){
                 // Если была прижата клавиша "<-":
 
 
            $(".my_map").everyTime(10, 'timer1', function() {
            --flag;
            --flag;
            --flag;
            --flag;
            --flag;
                $(this).css('left',flag);
            });
                }
            }
        );
    
        $( document ).keyup(
            function( e ){
                if( e.keyCode == 37){
                 // Если была отжата клавиша "<-":
         $(".my_map").stopTime('timer1');
                }
            }
        );  
//////////////////////////////////////////////////////////
    $( document ).keydown(
     function( e ){
          if( e.keyCode == 40 ){
           // Если была прижата клавиша "вниз":
            $(".my_map").everyTime(10, 'timer2', function() {
            ++flag2;
            ++flag2;
            ++flag2;
            ++flag2;
            ++flag2;
                $(this).css('top',flag2);
            });
                }
            }
        );
 
    $( document ).keyup(
     function( e ){
          if( e.keyCode == 40 ){
           // Если была прижата клавиша "вниз":
            $(".my_map").stopTime('timer2');
                }
            }
        );
////////////////////////////////////////////////////////////////
 
 
        $( document ).keydown(
            function( e ){
                if( e.keyCode == 38){
                 // Если была прижата клавиша "вверх":
            $(".my_map").everyTime(10, 'timer3', function() {
            --flag2;
            --flag2;
            --flag2;
            --flag2;
            --flag2;
                $(this).css('top',flag2);
            });
                }
            }
        );
 
    $( document ).keyup(
     function( e ){
          if( e.keyCode == 38 ){
           // Если была прижата клавиша "вверх":
            $(".my_map").stopTime('timer3');
                }
            }
        );    
////////////////////////////
        $( document ).keydown(
            function( e ){
                if( e.keyCode == 39){
                 // Если была прижата клавиша "->":
            $(".my_map").everyTime(10, 'timer4', function() {
            ++flag; $(this).css('left',flag);
            ++flag; $(this).css('left',flag);
            ++flag; $(this).css('left',flag);
            ++flag; $(this).css('left',flag);
            ++flag;
                $(this).css('left',flag);
            });
                }
            }
        );
    
        $( document ).keyup(
            function( e ){
                if( e.keyCode == 39){
                 // Если была отжата клавиша "->":
         $(".my_map").stopTime('timer4');
                }
            }
        );  
/////////////////////////////
 
});
Кому интересно посмотреть на результат в действии, креплю рабочий пример (проверял только в Firefox, другие браузеры пока не принципиальны)
Вложения
Тип файла: zip java_aw1.zip (1,002.9 Кб, 25 просмотров)
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
 04.12.2010, 02:04
Помогаю со студенческими работами здесь

SlideToggle() отключить событие для блока внутри блока с .slideToggle()
У меня есть такой скрипт: $(&quot;.cl_item&quot;).click(function() { $(this).children(&quot;.cli_popup&quot;).slideToggle(); }); В...

Выделение текста внутри блока
Полазил по инету, посмотрел на форуме и нигде не нашел ничего про выделение текста внутри блока! Кто нибудь знает как же выделить текст...

Клик по элементу внутри блока ( получить блок )
Всем привет, возник вопрос как получить сам блок кликнув внутри его по элементу.. Пример: как известно this ведёт на сам элемент ,...

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

Позиционирование блока
Здравствуйте. Стоит задача позиционирования или прилипание блока при прокрутке. Есть два блоки, которые по высоте не помещаются в...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Новые блоги и статьи
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT
bedvit 28.01.2026
Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 28.01.2026
Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image
8Observer8 27.01.2026
Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
Влияние грибов на сукцессию
anaschu 26.01.2026
Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android
8Observer8 26.01.2026
Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д.
8Observer8 25.01.2026
Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf
8Observer8 25.01.2026
Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly
8Observer8 24.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Условия использования - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru