Форум программистов
 
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.

Вернуться   Форум программистов > Web > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail


Донат для форума - использовать для поднятия настроения себе и модераторам

А ещё здесь можно купить рекламу за 15 тыс руб в месяц! ) пишите сюда - alarforum@yandex.ru

Ответ
 
Опции темы
Старый 17.06.2016, 15:44   #1
werwolf4
Новичок
 
Регистрация: 17.06.2016
Сообщений: 1
Репутация: 10
По умолчанию Адаптивная верстка и активное изображение

Всем привет.
Столкнулся с такой проблемой.
Есть план торгового центра, его необходимо сделать активным, т.е. при наведении на определенный объект должна всплывать подсказка с карточкой арендатора помещения.
Изначально попробовал реализовать это через карту изображения (map area), но этот вариант не подходит для сайта с адаптивной версткой. Изображение уменьшается а координаты областей остаются прежними.
Если кто то сталкивался с такой задачей подскажите варианты ее решения.
Заранее спасибо за помощь.
werwolf4 вне форума   Ответить с цитированием
Старый 17.06.2016, 16:55   #2
pompiduskus
юзер как все
Профессионал
 
Аватар для pompiduskus
 
Регистрация: 10.01.2012
Адрес: земля
Сообщений: 1,574
Репутация: 663

icq: 446.452.423
По умолчанию

Может брать кординаты относительные родителя ?

Если родитель 80% то, все кординаты у дочерних елементов (оригинальная ширина * 0.8)
Если родитель 40% то, все кординаты у дочерних елементов (оригинальная ширина * 0.4)

Как вариант.
__________________
<Дзен - Вся вселенная в тебе > | github.com/ch3ll0v3k | покер: cryptopoker.world
pompiduskus вне форума   Ответить с цитированием
Старый 17.06.2016, 22:45   #3
Naive
Раздолбайских Дел
Профессионал
 
Аватар для Naive
 
Регистрация: 22.05.2009
Адрес: Екатеринбург
Сообщений: 3,785
Репутация: 2322
По умолчанию

pompiduskus, годный вариант.
1. Еще можно юзануть флеш
2. JavaScript, если умеете задавать область и определять попадание курсора в нее
3. canvas с его активными областями
4. CSS сложной формы (http://www.gen-su.ru/ упрощенно, но как пример)
5. image-map и ресайз карты средствами transform, свой функционал внутри себя она сохранит в собственных пикселях.
6. SVG

пс. я бы выбрал 4 вариант, или если ахренеть какие сложные фигуры, то pomp-a.
__________________
Работаю. В этот раз за деньги.
Жду ваши искренние спасибы на яндекс-кошелек: 410011068154587
Naive вне форума   Ответить с цитированием
Ответ

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Адаптивная верстка на Бутстрапе Capz HTML и CSS 1 26.03.2015 10:50
Адаптивная верстка kostya67 HTML и CSS 3 01.02.2015 11:53
Адаптивная верстка сайта Андрей79 HTML и CSS 0 05.04.2014 18:16
как узнать, что окно активное/не активное beegl Общие вопросы Delphi 6 01.01.2013 22:48
Активное изображение. Necare HTML и CSS 6 21.03.2011 20:51


20:02.


Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.

Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru