6

Каким инструментарием стоит воспользоваться для верстки интерактивной карты с текстовыми подписями?

Формальные требования к вариантам:

  • при наведении на определенный регион, он должен подсветиться.

введите сюда описание изображения

11

2 ответа 2

4

В топике Как реализовать отрисовку произвольных регионов фигуры? было подобное обсуждение. Там можно посмотреть с помощью каких инструментов можно нарисовать координаты и как их применить например на 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;
}
<div id="map">
  <ul>
    <li id="brest"><a href="#brest"><span>Бресткая область. Площадь 32 700 км<sup>2</sup>, население 1 471 000 чел.</span></a></li>
    <li id="vitebsk"><a href="#vitebsk"><span>Витебская область. Площадь 40 100 км<sup>2</sup>, население 1 369 100 чел.</span></a></li>
    <li id="gomel"><a href="#gomel"><span>Гомельская область. Площадь 40 400 км<sup>2</sup>, население 1 516 000 чел.</span></a></li>
    <li id="grodno"><a href="#grodno"><span>Гродненская область. Площадь 25 000 км<sup>2</sup>, население 1 173 900 чел.</span></a></li>
    <li id="minsk"><a href="#minsk"><span>Минская область. Площадь 40 200 км<sup>2</sup>, население 1 479 400 чел.</span></a></li>
    <li id="mogilev"><a href="#mogilev"><span>Могилевская область. Площадь 29 000 км<sup>2</sup>, население 1 208 600 чел.</span></a></li>
  </ul>
</div>

0

лучше всего использовать map html есть много генераторов, в который нужно залить черно-белое изображение карты (где белое - границы, черное нужные области) вот пример http://ru.crazysquirrel.ru/tools/generators/map-area/ (нажмите ПОСМОТРЕТЬ ПРИМЕРЫ)

1
  • Так и сделал в конечном итоге. С помощью плагина ImageMapster. Код наверное нет смысла писать - всё подробно описано в документации
    – user212578
    14 апр 2017 в 20:11

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.