Страницы

Поиск по вопросам

понедельник, 15 октября 2018 г.

Верстка интерактивной карты

Каким инструментарием стоит воспользоваться для верстки интерактивной карты с текстовыми подписями?
Формальные требования к вариантам:
при наведении на определенный регион, он должен подсветиться.


Ответ

В топике Как реализовать отрисовку произвольных регионов фигуры? было подобное обсуждение. Там можно посмотреть с помощью каких инструментов можно нарисовать координаты и как их применить например на SVG.
Помимо этого, если не хочется связываться с SVG, то можно сделать это через html aтрибут coords, вычислив координаты как написано в теме по ссылке выше и применить какой-нибудь плагин для подсветки, например maphilight.js (https://github.com/kemayo/maphilight) или подобный.
Также для совсем простой карты можно даже js не использовать, хотя это будет сложновато вымерить:
body { color: #000; background: #fff; font-family: verdana, tahoma, sans-serif; } #map { border: 1px solid black; width: 401px; height: 328px; background: url(https://i.stack.imgur.com/XuHcv.gif) left bottom no-repeat; position: relative; } ul { list-style: none; margin: 0; padding: 0; } ul li { position: absolute; /* чтобы элементы li не "мешали" в IE6 */ } a:link, a:visited, a:hover { text-decoration: none; } a span { display: none; font: normal x-small/1.4em verdana, tahoma, sans-serif; width: 395px; color: #fff; background: #000; padding: 0 4px 2px 4px; } a:hover span { position: absolute; left: 0; top: 0; display: block; } #brest a { position: absolute; width: 176px; height: 133px; left: 7px; top: 185px; } #brest a:hover { background: url(https://i.stack.imgur.com/XuHcv.gif) -137px 0 no-repeat; display: block; } #brest a:hover span { margin-top: 144px; margin-left: -8px; } #vitebsk a { position: absolute; width: 205px; height: 129px; left: 129px; top: 0; } #vitebsk a:hover { background: url(https://i.stack.imgur.com/XuHcv.gif) -542px 0 no-repeat; display: block; } #vitebsk a:hover span { margin-top: 329px; margin-left: -130px; } #gomel a { position: absolute; width: 201px; height: 145px; left: 170px; top: 183px; } #gomel a:hover { background: url(https://i.stack.imgur.com/XuHcv.gif) -330px 0 no-repeat; display: block; } #gomel a:hover span { margin-top: 146px; margin-left: -171px; } #grodno a { position: absolute; width: 119px; height: 156px; left: 24px; top: 82px; } #grodno a:hover { background: url(https://i.stack.imgur.com/XuHcv.gif) 0 0 no-repeat; display: block; } #grodno a:hover span { margin-top: 247px; margin-left: -25px; } #minsk a { position: absolute; width: 156px; height: 185px; left: 116px; top: 84px; } #minsk a:hover { background: url(https://i.stack.imgur.com/XuHcv.gif) -987px 0 no-repeat; display: block; } #minsk a:hover span { margin-top: 245px; margin-left: -117px; } #mogilev a { position: absolute; width: 204px; height: 129px; left: 197px; top: 110px; } #mogilev a:hover { background: url(https://i.stack.imgur.com/XuHcv.gif) -762px 0 no-repeat; display: block; } #mogilev a:hover span { margin-top: 219px; margin-left: -198px; }


Комментариев нет:

Отправить комментарий