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

@БогданVB · Регистрация: 25.10.2013

Студворк — интернет-сервис помощи студентам

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

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

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

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

Если невозможно через map, то как?

@newJS · 12.01.2014, 08:03

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

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

P.S.
А одной картинкой можно сделать?

@Taatshi · 12.01.2014, 09:53

newJS, одной картинкой, я думаю, не проблема. Но как тогда реализовать hover?

(У меня почти такой же проект на горизонте - там бэк при hover меняется - уже болит голова) Хотелось бы без яваскрипт выкрутиться)

@newJS · 12.01.2014, 21:11

Без скрипта hover не получится, а отдельные картинки перекрывают друг друга и от этого ни куда не денешься. наверно скрипт придется прицепить, совсем смешной, в несколько строк и одной большой картинкой.

@dionus · 05.02.2016, 00:58

Есть решение для шестиугольников, в котором можно обойтись без JS. Для этого потребуется использовать для прямоугольных блоков свойство transform с наклонами, поворотами и перемещением по осям. Ну и обрезкой содержимого с помощью overflow:hiden;

Новые блоги и статьи Все статьи Все блоги /
Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .
Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .

@БогданVB 3 / 3 / 0 Регистрация: 25.10.2013 Сообщений: 41

	Близкостоящие полигоны(сложная верстка) или как применить MAP Area? 11.01.2014, 19:04. Показов 3000. Ответов 4 Метки нет (Все метки) Здравствуйте, столкнулся с таким вот дизайном Дело в том, что блоки многоугольников залезают друг на друга , пытаюсь решить эту проблему с помощью map area. Добавил area для всех многоугольников, добавил к ним ссылки, вроде стало лучше, но проблема осталась. Блоки одних многоугольников залезают на другие, и просто не дают попасть по ссылки area( Я пытался придать area z-index и через джаваскрит и через css , но свойство игнорируется напрочь... div в которых находится img, хоть убей, всегда выше чем area многоугольников, на которые эти дивы заезжают...как решить данную проблему? Может через JS надо прописать что, не могу придумать только что... Хотелось бы решить именно через MAP Если невозможно через map, то как? Миниатюры 0

@newJS 2436 / 1115 / 312 Регистрация: 23.06.2011 Сообщений: 3,529
	12.01.2014, 08:03
	Хорошо бы код, и готовые картинки в архиве. Ни кто не будет рисовать картинки и писать код с нуля, шансы на это исчезающе малы. Вот недавно была похожая тема, смотрим тему и думаем головой. Верстка сложного макета P.S. А одной картинкой можно сделать? 0

@Taatshi Почетный модератор 12274 / 5340 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	12.01.2014, 09:53
	newJS, одной картинкой, я думаю, не проблема. Но как тогда реализовать hover? (У меня почти такой же проект на горизонте - там бэк при hover меняется - уже болит голова) Хотелось бы без яваскрипт выкрутиться) 0

@newJS 2436 / 1115 / 312 Регистрация: 23.06.2011 Сообщений: 3,529
	12.01.2014, 21:11
	Сообщение было отмечено как решение Решение Без скрипта hover не получится, а отдельные картинки перекрывают друг друга и от этого ни куда не денешься. наверно скрипт придется прицепить, совсем смешной, в несколько строк и одной большой картинкой. 0

@dionus 0 / 0 / 0 Регистрация: 13.09.2015 Сообщений: 5
	05.02.2016, 00:58
	Есть решение для шестиугольников, в котором можно обойтись без JS. Для этого потребуется использовать для прямоугольных блоков свойство transform с наклонами, поворотами и перемещением по осям. Ну и обрезкой содержимого с помощью overflow:hiden; 0

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

Решение