Как сверстать такую штуку?

Question

[indee1]

Как такое верстается?

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

Как подобное сверстать? Если можно то с примером.

Answer 1

[Давид]

Посмотри в сторону html5 тегов map и area. Применить их можно к примеру если необходимо выставить координаты местоположения на карте. Картой может выступить простое изображение. Вот пример семантики: www.wisdomweb.ru/HTML5d/html5_area.php

Или

www.w3schools.com/tags/tryit.asp?filename=tryhtml_...

Кроссбраузерно.

Точки выставляются в теге по атрибутам coords='3,8,72,75' то есть координаты, там ты задаешь их сам на каждую точку. Это конечно займет больше времени чем с position: absolute; в секции с position: relative; но это правильней + узнаешь для себя что-то новое. Полоску при наведении можно сделать картинкой и не мучаться. Просто навесь на линк свойство :hover где будет указан путь до правильно скроенной картинки с линией.

Хотя комментарий от Сергея тоже работает. Тут уже надо смотреть в сторону того будут ли проверять твой исходный код и конечно же желания сделать правильней) Удачи!

Comments

[indee1]

Есть ли ПО для определения координат?

[Давид]

Погуглил - ничего не нашел. Лучшее ПО в данном случае это инспектор браузера. На созданном полотне с точками в инспекторе поиграться со значениями. Это лучшее что приходит на ум.

[Сергей delphinpro]

map и area появились задолго до HTML5. Думаю не ошибусь, если скажу, что они были в html с самого начала.

[Давид]

Нет конечно, отсюда и вытекает кроссбраузерность этих тегов)

[indee1]

Минус в том что много работы "наугад"

[Давид]

indee1: С position: absolute; ситуация такая же - все наугад)

[Aves]

indee1: в GIMP есть Фильтры - Веб - Карта изображения...
Скорее всего и в фотошопе есть что-то похожее.

Answer 2

[Сергей]

Просто теги с position: absolute; где пнг картинка круляша Полоска до заголовка появляется при ховере на теге (тоже можно абсолютом задать от каждой точки своя полоска).
Клики на js обрабатывай.