Увеличение/уменьшение изображения вместе с блоками

@vyrtime · Регистрация: 27.10.2011

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

В общем есть механизм зума - пример
Как сделать так, чтобы при увеличении изображения блоки, которые находятся на изображении, перемещались вместе с изображением? Причем необходим универсальный способ перемещения этих блоков, т.к. таких изображений с блоками порядка тысячи.

@Vorona · 27.10.2011, 10:11

с помощью позиционирования: родителю-блоку можно задать position: relative, а блокам внутри него - position:absolute и привязать к краям родителя на определенное расстояние с помощью top/right/bottom/left

HTML5
1
2
3
<div id="father">
   <div id="son"></div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
#father{
   position: relative;
   height: 500px;
   width: 900px;
}
#son{
   position: absolute;
   top: 20px;
   right: 100px;
}

как ни менять размер блока father, блок son будет на расстоянии 20 пикселей от верхней границы отца и 100 пикселей от его правой границы
в jquery так же есть функция position(), которая может возвращать координаты левой верхней точки элемента относительно родителя

@vyrtime · 27.10.2011, 15:19 **[ТС]**

блокам уже назначены значения left и top к краям родителя
попоробовал следовать вашему совету, но блоки всё равно не перемещаются
у меня такая структура:

HTML5
1
2
3
4
5
6
7
8
<div id='ImageArea'>
  <div id='1'>1</div>
  <div id='2'>2</div>
  <div id='3'>3</div>
  <div id='4'>4</div>
  <div id='5'>5</div>
  <img src='2.gif' id='Image'/>
</div>

причем функции зума действуют на изображение:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var zoom = 100;
function zoom_in()
{
    if ( zoom <= 140 )
    {
        $('#Image').animate({width: '+=250'}, 700);
        zoom += 20;
    }
}
 
function zoom_out()
{   
    if ( zoom >= 80 )
    {
        $('#Image').animate({width: '-=250'}, 700);
        zoom -= 20;
    }
}

при назначении увеличения блока ImageArea вместо Image изображение просто продвигается по горизонтали вправо(при увеличении), а если уменьшать блок то он начинает закрывать изображения белым фоном

как быть?

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

@Vorona · 27.10.2011, 15:57

во-первых, не начинайте название id блоков с цифр, думаю изображение должно быть родителем, ведь в/на нем находятся блоки-детки
попробуйте создать обычный, к примеру синий, блок и к нему привяжите цифры

HTML5
1
2
3
4
5
6
<div id="Image">
   <div id="a1">1</div>
   <div id="a2">2</div>
   <div id="a3">3</div>
   <div id="a4">4</div>
</div>

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
#Image{
   position: relative;
   background: url('2.gif') no-repeat;
   width: 900px;
   height: 500px;
}
 
#a1, #a2, #a3, #a4{
   position: absolute;
}
#a1{
   left: 50px;
   top: 100px;
}
#a2{
   right: 50px;
   top: 100px;
}
#a3{
   right: 50px;
   bottom: 100px;
}
#a4{
   left: 50px;
   bottom: 100px;
}

@vyrtime · 28.10.2011, 06:51 **[ТС]**

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

@forgergg · 28.10.2011, 15:37

Можно попробовать первоначальный вариант. При уменьшении размера картинки делать пересчет координат элементов поверх ее и соответственно масштабировать их: высоту, ширину, шрифт и пр., что у них внутри.
На хтмл врядли можно масштабировать элементы и их содержимое автоматически. Может использовать какие-то элементы из хтмл5, там вроде канвас есть.
Можно еще погуглить на предмет масштабирования фонового изображения элемента, но кажется там немного глухо все )
Еще можно написать это на флеше

Vovan-VE · 28.10.2011, 18:37

У картинки width и height оба в 100%. Подписи позиционируйте тоже в % относительно родителя. Картинка тоже внутри этого родителя. У этого же родителя width и height изначально установить явно в исходный размер картинки в пикселах. Всё. Остаётся только менять размер родителя - всё внутреннее борохло должно само ездить на своих местах.

@vyrtime · 31.10.2011, 10:32 **[ТС]**

Vovan-VE, спасибо, такой метод работает, но что делать в случае если картинок тысячи и для каждой уже проставлены блоки с координатами в px, вот эти:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="1" title="" style="left: 15px; top: 661px; width: 20px; height: 20px; font-size: 20px; line-height: 20px;">1</div>
<div id="2" title="" style="left: 50px; top: 640px; width: 20px; height: 20px; font-size: 20px; line-height: 20px;">2</div>
<div id="3" title="" style="left: 90px; top: 616px; width: 20px; height: 20px; font-size: 20px; line-height: 20px;">3</div>
<div id="4" title="" style="left: 140px; top: 590px; width: 20px; height: 20px; font-size: 20px; line-height: 20px;">4</div>
<div id="5" title="" style="left: 178px; top: 566px; width: 20px; height: 20px; font-size: 20px; line-height: 20px;">5</div>
<div id="6" title="" style="left: 239px; top: 533px; width: 20px; height: 20px; font-size: 20px; line-height: 20px;">6</div>
<div id="7" title="" style="left: 265px; top: 516px; width: 20px; height: 20px; font-size: 20px; line-height: 20px;">7</div>
<div id="8" title="" style="left: 289px; top: 500px; width: 20px; height: 20px; font-size: 20px; line-height: 20px;">8</div>
<div class="" id="8" title="" style="left: 92px; top: 273px; width: 20px; height: 20px; font-size: 20px; line-height: 20px;">8</div>
<div id="9" title="" style="left: 91px; top: 446px; width: 20px; height: 20px; font-size: 20px; line-height: 20px;">9</div>
<div id="10" title="" style="left: 86px; top: 397px; width: 25px; height: 20px; font-size: 20px; line-height: 20px;">10</div>
<div id="11" title="" style="left: 84px; top: 364px; width: 25px; height: 20px; font-size: 20px; line-height: 20px;">11</div>
<div id="11" title="" style="left: 871px; top: 402px; width: 25px; height: 20px; font-size: 20px; line-height: 20px;">11</div>
<!--и т.д. -->
<img src=images/img_1071_1144_8.gif" alt="" name="Image" usemap="#Map" id="Image" style="cursor: move" title="" onload="this.alt='';init();" border="0" height="872" width="1052">
<map name="Map" id="Map">
</map>

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

Добавлено через 3 часа 14 минут
всё, всем большое спасибо, решил сам, пересчитав координаты - из px перевел в %
в общем так:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$('#ImageArea div').each(function() {
    var wIm = $('#Image').width();
    var hIm = $('#Image').height();
    var divPosition = $(this).position();
    var divLeft = divPosition.left;
    var divTop = divPosition.top;
    var divL = (divLeft/wIm)*100;
    var divT = (divTop/hIm)*100;
    var divW = $(this).css('width');
    var divH = $(this).css('height');
    var divLH = $(this).css('line-height');
    var divFS = $(this).css('font-size');
    $(this).css('left', '0%');
    $(this).css('top', '0%');
    $(this).attr({style: 'left:'+divL+'%; top:'+divT+'%; line-height: '+divLH+'; font-size: '+divFS+'; width: '+divW+'; height: '+divH+';'});
});

Новые блоги и статьи Все статьи Все блоги /
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 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

@vyrtime 0 / 0 / 0 Регистрация: 27.10.2011 Сообщений: 5

	Увеличение/уменьшение изображения вместе с блоками 27.10.2011, 06:57. Показов 8898. Ответов 7 Метки нет (Все метки) В общем есть механизм зума - пример Как сделать так, чтобы при увеличении изображения блоки, которые находятся на изображении, перемещались вместе с изображением? Причем необходим универсальный способ перемещения этих блоков, т.к. таких изображений с блоками порядка тысячи. 0

@vyrtime 0 / 0 / 0 Регистрация: 27.10.2011 Сообщений: 5
	28.10.2011, 06:51 [ТС]
	попробовал сделать, вот так получается если создать синий блок - тут а так если будем использовать изображение в качестве бэкграунда - тут функции увеличения и уменьшения применил к блоку родителю решение не подходит, поскольку блок родитель просто увеличивается и уменьшается по ширине 0

@forgergg 135 / 135 / 29 Регистрация: 18.10.2011 Сообщений: 306
	28.10.2011, 15:37
	Можно попробовать первоначальный вариант. При уменьшении размера картинки делать пересчет координат элементов поверх ее и соответственно масштабировать их: высоту, ширину, шрифт и пр., что у них внутри. На хтмл врядли можно масштабировать элементы и их содержимое автоматически. Может использовать какие-то элементы из хтмл5, там вроде канвас есть. Можно еще погуглить на предмет масштабирования фонового изображения элемента, но кажется там немного глухо все ) Еще можно написать это на флеше 1

Vovan-VE 13210 / 6599 / 1041 Регистрация: 10.01.2008 Сообщений: 15,069
	28.10.2011, 18:37
	У картинки width и height оба в 100%. Подписи позиционируйте тоже в % относительно родителя. Картинка тоже внутри этого родителя. У этого же родителя width и height изначально установить явно в исходный размер картинки в пикселах. Всё. Остаётся только менять размер родителя - всё внутреннее борохло должно само ездить на своих местах. 2