Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Ребят подскажите 
:(
    Опции темы
part_spb
Дата 18.2.2009, 04:45 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 16
Регистрация: 1.11.2007

Репутация: нет
Всего: нет



Может быть  не туда пишу но все же...
Подскажите каким способом реализовать  такую функцию как выделение части изображения и формирование подписи к ней(как это сделано на сайте вконтакте, при выделении пользователй на фотографиях), может быть есть каие готовые решения?
PM MAIL   Вверх
Dima 2015
Дата 18.2.2009, 06:38 (ссылка) |    (голосов:1) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 287
Регистрация: 16.3.2008
Где: SPb

Репутация: нет
Всего: 2



Нуу-с... задачка обширная на самом деле, состоит из нескольких этапов. Часть из них без сомнения относится к JS. А именно...

1. Процесс "помечания" фотографии. Очевидно это клиенсткая часть и делается на JS. Тыкаем на ссылочку "отметить", у нас на фотку накладывается слой с дивом, у которого можно перетаскиванием изменять размеры. Для простоты можно просто этому диву сделать видимую границу. Чтобы сделать как на вконтакте - с этим затемнением, это сложнее. Очень советую вооружиться фаербагом и посмотреть как у них там реализовано, там все хитро... там есть 2 изображения, одно - исходное, второе - затемненное. И есть тот саммый див, который суть отмечаемая область. Ну и все это дело так сгруппировано, что создается эффект затемнения с просветом там, где выделяемая область.

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

Дальше есть рядом диалогове окно, куда можно ввести лэйбл. Отмечаем, жмем отправить, отправляется форма с координатами и текстом метки. Ну на вконтакте туда еще список друзей подгружается, эт тоже отдельная тема.

2. Серверная часть. Данные из формы п.1 приходят на сервер и заносятся в базу. Примерно так - есть таблица photo_labels, у нее след. поля:
ид, фото, х1, у1, х2, у2, текст. Т.е. для каждой фотографии каждый акт выделения отражается как строчка в базе. Теперь надо понять, как это дело показывается пользователю. Когда он открывает фотографию, делается запрос в базу за информацией о метках на этой фотографии. На основе этой информации формируется хтмл- и js-код, осуществляющий подсветку помеченной области при наведении на нее.

3. Как сделать подсветку области фотографии при наведении. Это тоже вопрос по клиенсткой части, а именно тут придется курить js, html и css. Но в общих чертах так:

Из п.2 мы знаем что у нас есть информация о метках на фотографии - координаты и тексты этих меток. Предположим, что эта информация занесена в js-массивы. Мы вешаем на mousemove по фотографии ф-цию, которая считывает координаты курсора и смотрит, не оказался ли курсор внутри помеченной области. Как только оказался - происходит наложение на фотографию слоя с дивом, символизирующим отмеченную область, ну и всплывает текст метки, или там где-то что-то подсвечивается, это уже как душе угодно...

Вот, в целом я так себе представляю как это выглядит.
PM MAIL ICQ   Вверх
ksnk
Дата 18.2.2009, 09:07 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386





--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
part_spb
Дата 20.2.2009, 04:28 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 16
Регистрация: 1.11.2007

Репутация: нет
Всего: нет



всем спасибо за ответы.Буду пытаться  двигаться в этом направлении.
PM MAIL   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: для новичков | Следующая тема »


 




[ Время генерации скрипта: 0.0989 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.