Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.04.2012, 17:08
Интересующийся
Отправить личное сообщение для Natali_RnD Посмотреть профиль Найти все сообщения от Natali_RnD
 
Регистрация: 16.01.2012
Сообщений: 12

Как правильно сверстать интерфейс подбора рамок для фотографий
стала задача разработать интерфейс аналогичный вот этому http://www.mir-ramok.bel31.ru/bin-release/mirramok.html только без флеша и внутри должна находиться фотография,а не пустой белый квадрат. Получается у нас есть фото, вокруг него идет две рамки из текстуры(паспарту называется) и самая внешняя рамка это багет. Смысл интерфейса в том, что пользователь может менять как размеры всей конструкции так и отдельных её частей, может выбрать другую рамку или другую текстуру. Я изначально подумала что нужно сделать несколько вложенных перекрывающих друг друга блоков. Т.е. самый внутренний div это фото, он находится внутри текстурной рамки и самый верхний блок это багет. Пускай багет это слой1, текстурная рамка - слой2 и фото - слой3. По идее каждый следующий слой имеет возрастающий z-index, что обеспечивает перекрывание блоков. Тут встаёт вопрос как правильно спозиционировать блоки и заполнить изображением? слой1(багет) заполнить через background repeat скорее всего не получится, потому что это не однородная текстура, а рисунок рамки. как с ним быть, может быть можно собрать background из четырёх частей или нужно использовать готовый рисунок всей рамки в качестве фона? далее слой2(текстурная рамка) я подумала что её нужно делать через repeat и остаётся слой3(фото), которое тоже то ли надо в background поместить, то ли оставить в виде img. К тому же я вообще не знаю можно ли перекрывать по-разному заданные background'ы, они нормально друг на друга наложатся? Как сверстать так чтобы можно было: 1) увеличить/уменьшать размер всей конструкции в целом и ничего никуда не съезжало 2) изменять визуальную(т.е. ту часть которая видна) ширину слоя2 и слоя1?
Ответить с цитированием
  #2 (permalink)  
Старый 04.04.2012, 10:26
Профессор
Отправить личное сообщение для Маэстро Посмотреть профиль Найти все сообщения от Маэстро
 
Регистрация: 02.07.2010
Сообщений: 629

Это можно делать двумя способами:
1. Использовать таблицу <table> с несколькими рядами и столбцами.
2. Использовать несколько DIV_ов, наложенных один поверх другого.
И в первом и во втором случае придется использовать стиль position:absolute, задавать left/top/width/height и изменять их при воздействии пользователем. В <table> можно использовать position:relative.
Ответить с цитированием
  #3 (permalink)  
Старый 04.04.2012, 10:46
Аватар для Илья Кантор
Администратор
Отправить личное сообщение для Илья Кантор Посмотреть профиль Найти все сообщения от Илья Кантор
 
Регистрация: 25.05.2007
Сообщений: 1,224

Может, делать это не дивами, а просто перекрытыми изображениями?

Скажем, рамка хранится 800x600, а делается IMG 400x300 (или сколько нужно). Он отмасштабируется автоматически. На него сверху другой IMG. Другое дело - красиво ли это будет?

То есть, скажем, на рамке 5 завитушек. При увеличении ширины 6я завитушка не появится.
Ответить с цитированием
  #4 (permalink)  
Старый 04.04.2012, 10:58
Профессор
Отправить личное сообщение для Маэстро Посмотреть профиль Найти все сообщения от Маэстро
 
Регистрация: 02.07.2010
Сообщений: 629

Сообщение от Илья Кантор Посмотреть сообщение
Может, делать это не дивами, а просто перекрытыми изображениями?
Перекрытыми изображениями делать можно, но появятся проблемы:
1. В одном из контейнеров может отсутствовать картинка, а просто присутствовать какой-то цвет (девушки часто полюбляют всё размещать в нежно-розовом цвете).
2. При прямом использовании тегов <img> появляются всякие негативные эффекты в виде выделения картинок ("засинивания") и перетаскивания их мышью, что пытаются делать браузеры по-умолчанию. Если автор захочет добавить функции раздвижения рамок с помощью мыши, то все эти эффекты полезут наружу. Поэтому картинки лучше использовать в качестве фона контейнера background-image:url('...')
Ответить с цитированием
  #5 (permalink)  
Старый 04.04.2012, 11:12
Аватар для Илья Кантор
Администратор
Отправить личное сообщение для Илья Кантор Посмотреть профиль Найти все сообщения от Илья Кантор
 
Регистрация: 25.05.2007
Сообщений: 1,224

1) Цветом можно все залить, добавив розовый DIV с z-index, а поверх него картинку с рамкой. Розовый должен быть чуть меньше по размеру, чем рамка, чтобы розовый не вылезал наружу.

2) На самом внешнем контейнере onmousedown = return false, onselectstart = return false, ondragstart = return false

P.S. Масштабировать фон, кстати, тоже можно в CSS3, но пока не все браузеры это умеют
Ответить с цитированием
  #6 (permalink)  
Старый 04.04.2012, 11:18
Интересующийся
Отправить личное сообщение для Natali_RnD Посмотреть профиль Найти все сообщения от Natali_RnD
 
Регистрация: 16.01.2012
Сообщений: 12

попробую сделать через div'ы с position:absolute и background'ом в виде картинок или заливки цветом
Ответить с цитированием
  #7 (permalink)  
Старый 04.04.2012, 11:22
Профессор
Отправить личное сообщение для Маэстро Посмотреть профиль Найти все сообщения от Маэстро
 
Регистрация: 02.07.2010
Сообщений: 629

Сообщение от Илья Кантор Посмотреть сообщение
1) Цветом можно все залить, добавив розовый DIV с z-index, а поверх него картинку с рамкой. Розовый должен быть чуть меньше по размеру, чем рамка, чтобы розовый не вылезал наружу.

2) На самом внешнем контейнере onmousedown = return false, onselectstart = return false, ondragstart = return false
1. Я же и говорю, что контейнеры всё-равно надо будет использовать, но не 1, а несколько, т.к. вместо любой картинки может быть не картинка, а ординарный цвет.
2. Этого недостаточно. Некоторым браузерам не хватает onmousedown = return false, им надо еще скармливать e.stopPropagation и e.preventDefault... А Fire Fox вообще игнорирует всё это, пока ему не задашь его родное '-moz-user-select:none'.
Ответить с цитированием
  #8 (permalink)  
Старый 04.04.2012, 15:37
Интересующийся
Отправить личное сообщение для Natali_RnD Посмотреть профиль Найти все сообщения от Natali_RnD
 
Регистрация: 16.01.2012
Сообщений: 12

так получилось следующее http://learn.javascript.ru/play/tNZcYb
остаётся проблема с внешней рамкой, если допустим мне нужно увеличить ширину этой рамки в два раза, при этом размер внутренних блоков не должен меняться, я это сделать не могу, потому что картинка рамки тянется только вся и соответственно увеличивается расстояние внутри рамки, а это неправильно... как бы из этой картинки сделать замощённый блок(типа background repeat картинка), чтобы можно было просто увеличить блок и остальные относительно него подвинуть?
Ответить с цитированием
  #9 (permalink)  
Старый 04.04.2012, 16:14
Профессор
Отправить личное сообщение для Маэстро Посмотреть профиль Найти все сообщения от Маэстро
 
Регистрация: 02.07.2010
Сообщений: 629

"увеличить ширину этой рамки в два раза"
Наверное Вы имеете ввиду, что при этом "толщина багета" НЕ должна измениться? Речь не о масштабировании всего объекта? Тогда для показа багета надо использовать таблицу из 3х3 строк/столбцов, а картинку багета разрезать на 8 частей. По углам таблицы должны быть вставлены картинки фиксированно (background-repeat:no-repeat), а в остальных секциях фон должен повторяться (background-repeat:repeat-x или background-repeat:repeat-y). В этом случае координаты left и top всех других (внутренних) div и img останутся без изменений.
Если Вы вообще не хотите применять javascript и сделать объект "резиновым", то тогда все div_ы надо вставить во внутреннюю центральную секцию таблицы и задать им width:100%;height:100%
Ответить с цитированием
  #10 (permalink)  
Старый 04.04.2012, 16:25
Интересующийся
Отправить личное сообщение для Natali_RnD Посмотреть профиль Найти все сообщения от Natali_RnD
 
Регистрация: 16.01.2012
Сообщений: 12

Как раз должна изменить именно толщина багета визуальная, масштабирование всего объекта мне тоже нужно, но хочется сначала с отдельными частями разобраться. Попробуем с таблицей. Спасибо за идею
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как правильно задать ID в создаваемом элементе ? Indiana Events/DOM/Window 15 31.10.2010 15:15
Подскажите как правильно оформить код frolvict Общие вопросы Javascript 4 30.04.2010 09:51
Как правильно прописать свой код в .js Всеми_Любимый Элементы интерфейса 6 23.02.2010 20:34
Как правильно послать XML в POST запросе LowCoder AJAX и COMET 10 15.07.2009 22:20
Как правильно оформить Send() Алекс97 AJAX и COMET 20 30.10.2008 18:19