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

@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+';'});
});

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .

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

	Увеличение/уменьшение изображения вместе с блоками 27.10.2011, 06:57. Показов 8933. Ответов 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