PHP.SU

Программирование на PHP, MySQL и другие веб-технологии

PHP.SU Портал

Главная

Помощь

Поиск

Поиск Яндекс Вакансии

Пользователи

Здравствуйте, Гость

( Вход · Регистрация · Правила форума )

Забыли пароль?

Позиционирование слои и ховер

Форумы портала PHP.SU » Клиентская разработка » HTML, Дизайн & CSS (Модераторы: ALEN, armancho7777777)

Страниц (1): [1]

Описание: все будет в теле

Поиск в теме | Версия для печати

Kuroch	Отправлено: 09 Сентября, 2013 - 16:54:47
Новичок Покинул форум Сообщений всего: 43 Дата рег-ции: Авг. 2010 Помог: 0 раз(а)	Читающему: Здравствуй! Вобщем задача нетривиальная надо сверстать схему этажа. там в прикрепленном плане видно что она с изгибами значительными было реализовано с помощью png на 100 слое в котором прозрачная "дыра" все комнаты внутри на 50 слое и все изгибы перекрываются верхней пнг . внешнего вида удалось добиться. но суть в том что надо при наведении подсвечивать определенные комнаты, а при клике выводить всплывающие подсказки. так собственно проблема в том что все события мыши перехватываются с верхнего элемента тоесть конкретного блока ховер уже отловить не получается ибо мишь над лежащем на нем пнг с дыркой. Собственно суть вопроса такова: Как сделать так чтобы работали ховеры под картинкой? может можно указателю мыши задать слой или еще какие нибудь более кривые решения. а если все в корне делается мной неправильно то наставьте на путь истинный. Спасибо за ответ! Прикреплено изображение (Нажмите для увеличения)

IllusionMH	Отправлено: 09 Сентября, 2013 - 17:54:55
Активный участник Покинул форум Сообщений всего: 4254 Дата рег-ции: Февр. 2011 Откуда: .kh.ua Помог: 242 раз(а)	Kuroch, могу предложить вот такую штуку http://davidlynch[dot]org/projects/maphilight/docs/ (но придется очень аккуратно изгибы проходить) либо реализовать все это в SVG (Отредактировано автором: 09 Сентября, 2013 - 17:55:45)

Kuroch	Отправлено: 10 Сентября, 2013 - 06:52:05
Новичок Покинул форум Сообщений всего: 43 Дата рег-ции: Авг. 2010 Помог: 0 раз(а)	IllusionMH пишет: Kuroch, могу предложить вот такую штуку http://davidlynch[dot]org/projects/maphilight/docs/ (но придется очень аккуратно изгибы проходить) либо реализовать все это в SVG Большое спасибо за ваш наискорейший ответ. будем пытать свг.. там еще такой нюанс . данные той схемы должны меняться динамически через cms но думаю это тоже как то можно решить например дописью какого-нибудь javascript который бы доделывал динамическую с точки зрения данных часть этой карты

IllusionMH	Отправлено: 10 Сентября, 2013 - 11:43:30
Активный участник Покинул форум Сообщений всего: 4254 Дата рег-ции: Февр. 2011 Откуда: .kh.ua Помог: 242 раз(а)	Kuroch, в сторону поддержки браузерами SVG стоит глянуть, там почти тоже что и у канвы. Если грузить SVG из редактора, то можно будет сразу задать некоторым объектам имена. А потом работать почти как с обычным DOM

Kuroch	Отправлено: 10 Сентября, 2013 - 14:55:02
Новичок Покинул форум Сообщений всего: 43 Дата рег-ции: Авг. 2010 Помог: 0 раз(а)	IllusionMH пишет: Kuroch, в сторону поддержки браузерами SVG стоит глянуть, там почти тоже что и у канвы. Если грузить SVG из редактора, то можно будет сразу задать некоторым объектам имена. А потом работать почти как с обычным DOM да мы уже реализовали... вобщем сверху на эту рамку с дыркой накинули ссылок с релом содержащим див который находится снизу и подсвечивается. позиционирование даже скриптом удалось поставить CODE (javascript): скопировать код в буфер обмена <script type="text/javascript"> $(function(){ $(".forhover").each(function(){ var mysubdiv=$("#"+$(this).attr("rel")); $(this).css("height",mysubdiv.css("height")); $(this).css("width",mysubdiv.css("width")); $(this).css("left",mysubdiv.css("left")); $(this).css("top",mysubdiv.css("top")); $(this).css("z-index",(mysubdiv.css("z-index")*1+150)); }); $(".forhover").hover( function(){ $("#"+$(this).attr("rel")).fadeTo(100,0.8); }, function(){ $("#"+$(this).attr("rel")).fadeTo(100,1); } ); }); </script> временно посмотреть можно тут http://olimp69[dot]ru/plan

Поиск в теме | Версия для печати

Страниц (1): [1]

Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)

« HTML, Дизайн & CSS »

Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.