Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.78/9: Рейтинг темы: голосов - 9, средняя оценка - 4.78
3 / 3 / 0
Регистрация: 25.10.2013
Сообщений: 41
1

Близкостоящие полигоны(сложная верстка) или как применить MAP Area?

11.01.2014, 19:04. Просмотров 1822. Ответов 4
Метки нет (Все метки)

Здравствуйте, столкнулся с таким вот дизайном

Дело в том, что блоки многоугольников залезают друг на друга , пытаюсь решить эту проблему с помощью map area.
Добавил area для всех многоугольников, добавил к ним ссылки, вроде стало лучше, но проблема осталась. Блоки одних многоугольников залезают на другие, и просто не дают попасть по ссылки area(

Я пытался придать area z-index и через джаваскрит и через css , но свойство игнорируется напрочь...
div в которых находится img, хоть убей, всегда выше чем area многоугольников, на которые эти дивы заезжают...как решить данную проблему?
Может через JS надо прописать что, не могу придумать только что...



Хотелось бы решить именно через MAP

Если невозможно через map, то как?
0
Миниатюры
Близкостоящие полигоны(сложная верстка) или как применить MAP Area?  
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
11.01.2014, 19:04
Ответы с готовыми решениями:

Как для html map area в форме звезды сделать тень при наведение на area?
Как для html map area в форме звезды сделать тень при наведение на area?

Как убрать рамку с area и map
Есть сайт, на нём решил использовать map Но вот в чём незадача, в IE лезет рамка, пытался...

<area> и <map>! как часто используете?
О таких тегах как &lt;area&gt; и &lt;map&gt; знаю давно, но по неизвестным даже мне причинам я ими ни разу не...

Как можно в textarea применить ::first-line, или как к первой строки применить стиль, внутри данного элемента
Да и вообще, для этого можно ли еще что-либо вложить в данный элемент, кроме как текста? ...

4
Эксперт JSЭксперт HTML/CSS
2422 / 1101 / 309
Регистрация: 23.06.2011
Сообщений: 3,448
12.01.2014, 08:03 2
Хорошо бы код, и готовые картинки в архиве.
Ни кто не будет рисовать картинки и писать код с нуля, шансы на это исчезающе малы.

Вот недавно была похожая тема, смотрим тему и думаем головой.
Верстка сложного макета


P.S.
А одной картинкой можно сделать?
0
Администратор
11811 / 5122 / 257
Регистрация: 05.04.2011
Сообщений: 13,861
Записей в блоге: 2
12.01.2014, 09:53 3
newJS, одной картинкой, я думаю, не проблема. Но как тогда реализовать hover?

(У меня почти такой же проект на горизонте - там бэк при hover меняется - уже болит голова) Хотелось бы без яваскрипт выкрутиться)
0
Эксперт JSЭксперт HTML/CSS
2422 / 1101 / 309
Регистрация: 23.06.2011
Сообщений: 3,448
12.01.2014, 21:11 4
Лучший ответ Сообщение было отмечено как решение

Решение

Без скрипта hover не получится, а отдельные картинки перекрывают друг друга и от этого ни куда не денешься. наверно скрипт придется прицепить, совсем смешной, в несколько строк и одной большой картинкой.
0
0 / 0 / 0
Регистрация: 13.09.2015
Сообщений: 5
05.02.2016, 00:58 5
Есть решение для шестиугольников, в котором можно обойтись без JS. Для этого потребуется использовать для прямоугольных блоков свойство transform с наклонами, поворотами и перемещением по осям. Ну и обрезкой содержимого с помощью overflow:hiden;
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
05.02.2016, 00:58

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

фон <map><area ... >
Есть карта: &lt;img src=&quot;прозрачная.png&quot; usemap =&quot;#map&quot; width=&quot;600&quot; height=&quot;400&quot; alt=&quot;карта&quot;&gt; ...

Тег area в map
Здравствуйте, может кто знает... как задать area цвет... или это вообще невозможно?? Вот код где...

теги map и area. Создание всплывающей картинки
Написал код, который позволяет при наведении на area выводить всплывающую картинку. Не получается...

Появление div при наведении на area в map-е
Имеется карта map, на ней обозначены области area &lt;div class=&quot;map&quot; align=&quot;center&quot;&gt; &lt;img...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2020, vBulletin Solutions, Inc.