При размещении нескольких картинок с гиперссылками - ссылки пересекаются

Сообщение **heavy** » 15 дек 2018, 15:48

Доброго дня всем!
Попробовал сегодня накидать страничку сайта - но при размещении неквадратных картинок - их поля пересекаются и, когда назначаешь гиперссылки на эти картинки, то преимущество имеет картинка выше слоем.
Но требуется , чтобы обе картинки отрабатывали нажатие по всему своему периметру с переходом на собственные гиперссылки.
Картинки приложил. Красная и зеленая рамки -поля картинок. Желтое поле -пересекающееся у обеих картинок
заранее спасибо!

Сообщение **Alex1972** » 15 дек 2018, 23:42

Это через шейпы делается.
Тут есть расширение с Shape. Но как-то непонятно работает.
Воспользуйтесь статьёй для задания стилей типа Трапеций, треугольников и тд,очень здорово и понятно описано применение.А главное-красиво выходит :)

Сообщение **spoon** » 16 дек 2018, 08:40

В билдере есть расширение, разные фигуры можно заливать текстом, наверное картинками тоже можно, надо смотреть.

Сообщение **heavy** » 16 дек 2018, 09:42

To Alex1972 Сорри за отсутствие цитаты - но с айпада не работают инструменты форума(
Статья про шейпы сложновато для нуба. Мне бы просто какой то инструмент, чтобы привязать определенную ссылку на произвольно нарисованную форму.

Отправлено спустя 1 минуту 16 секунд:
То spoon - как расширение то называется?

Сообщение **spoon** » 16 дек 2018, 09:55

Попробуй по поиску искать, я тоже это расширение искал создавал тему, пробуй через поиск на сайте.

Сообщение **Alex1972** » 17 дек 2018, 00:14

Shaped text, но это не то.Всё равно прямоугольная область занимается и это "фигура из текста".

heavy писал(а): на произвольно нарисованную форму.

Не совсем так. Форма фигуры это в любом случае -прямоугольник.Только с прозрачными фрагментами.
А Вы хотите,что бы мышка "чувствовала" именно край видимой фигуры,а не прямоугольника

Вот ещё статья.Попроще.

Отправлено спустя 2 часа 14 минут 30 секунд:
<meta charset="utf-8">
<title>Безымянная страница</title>
<meta name="generator" content="WYSIWYG Web Builder 14 - http://www.wysiwygwebbuilder.com">

</head>
<body>
<img src="images/1.png" width="640" height="300" alt="навигация в трапеции" usemap="#navigation"> // к нафигашену можно стили прописать или за-ccsить в файле
<map name="navigation">
<area shape="poly" coords="40,20,40,320,250,310,580,100,580,20" href="./страница1.html" alt="страница1">
</map>

</body>
</html>
Красным обведена область всего изображения.
Синяя фигура-область срабатывания ссылки
40,20 координаты верхний левый угол X1,Y1
40,320 координаты нижний левый угол X2,Y2 и тд

трап.jpg

area_poly.png

И вторую фигуру таким же методом обрабатываешь.Но... в сетках,флексах- не знаю как,будут-ли работать координаты

Сообщение **Alex1972** » 17 дек 2018, 13:31

Вот пример-
При нажатии в квадрате на синий треугольник-переходите на страницу blue
При нажатии в квадрате на красный треугольник-переходите на страницу red

Pictures.rar

dvatreug.png

Отправлено спустя 1 час 25 минут 46 секунд:
Онлайн калькулятор координат(coords) для poly

Сообщение **heavy** » 17 дек 2018, 16:22

Alex1972, круто. спасибо.
Но мне для этого надо въезжать в написание кода. А я пока только в визуалке пробую сайт быстро сделать.
На этот раз вышел из положения по-колхозному - наложил несколько прозрачных прямоугольников с гиперссылками поверх своих кнопок.
По Вашему мануалу в следующий раз попробую.
И еще не понятно - когда страница должна подстраиваться под разрешение монитора юзера - координаты не будут слетать?
Еще раз -большая благодарность!

Сообщение **Alex1972** » 17 дек 2018, 16:46

heavy писал(а): наложил несколько прозрачных прямоугольников с гиперссылками поверх своих кнопок...
...подстраиваться под разрешение монитора юзера - координаты не будут слетать?

Это как раз один из вариантов "обработка неровных изображений по-быстрому".Замостить изображение некрупными прямоугольниками.
Но это влечет за собой массивность и трудно-читабельность кода.
Про разрешения я писал-не в курсе.Вроде как координаты устанавливаются относительно слоя,в котором объект.От левого верхнего угла.И вроде должны отработать нормально.А вот если картинка сжимается-растягивается,то наверное поплывут..