Читающему: Здравствуй!
Вобщем задача нетривиальная надо сверстать схему этажа.
там в прикрепленном плане видно что она с изгибами значительными было реализовано с помощью png на 100 слое в котором прозрачная "дыра"
все комнаты внутри на 50 слое и все изгибы перекрываются верхней пнг .
внешнего вида удалось добиться. но суть в том что надо при наведении подсвечивать определенные комнаты, а при клике выводить всплывающие подсказки. так собственно проблема в том что все события мыши перехватываются с верхнего элемента тоесть конкретного блока ховер уже отловить не получается ибо мишь над лежащем на нем пнг с дыркой.
Собственно суть вопроса такова: Как сделать так чтобы работали ховеры под картинкой?
может можно указателю мыши задать слой или еще какие нибудь более кривые решения.
а если все в корне делается мной неправильно то наставьте на путь истинный.
Спасибо за ответ!
1. Kuroch - 09 Сентября, 2013 - 16:54:47 - перейти к сообщению
2. IllusionMH - 09 Сентября, 2013 - 17:54:55 - перейти к сообщению
Kuroch, могу предложить вот такую штуку http://davidlynch[dot]org/projects/maphilight/docs/ (но придется очень аккуратно изгибы проходить)
либо реализовать все это в SVG
либо реализовать все это в SVG
3. Kuroch - 10 Сентября, 2013 - 06:52:05 - перейти к сообщению
IllusionMH пишет:
Kuroch, могу предложить вот такую штуку http://davidlynch[dot]org/projects/maphilight/docs/ (но придется очень аккуратно изгибы проходить)
либо реализовать все это в SVG
либо реализовать все это в SVG
Большое спасибо за ваш наискорейший ответ. будем пытать свг.. там еще такой нюанс . данные той схемы должны меняться динамически через cms но думаю это тоже как то можно решить например дописью какого-нибудь javascript который бы доделывал динамическую с точки зрения данных часть этой карты
4. IllusionMH - 10 Сентября, 2013 - 11:43:30 - перейти к сообщению
Kuroch, в сторону поддержки браузерами SVG стоит глянуть, там почти тоже что и у канвы. Если грузить SVG из редактора, то можно будет сразу задать некоторым объектам имена. А потом работать почти как с обычным DOM
5. Kuroch - 10 Сентября, 2013 - 14:55:02 - перейти к сообщению
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