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

#javascript #html #css

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

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


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



    

Ответы

Ответ 1

В топике Как реализовать отрисовку произвольных регионов фигуры? было подобное обсуждение.
Там можно посмотреть с помощью каких инструментов можно нарисовать координаты и как
их применить например на 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;
}

  

    
Бресткая область. Площадь 32 700 км2,
население 1 471 000 чел.
    
Витебская область. Площадь 40 100 км2,
население 1 369 100 чел.
    
Гомельская область. Площадь 40 400 км2,
население 1 516 000 чел.
    
Гродненская область. Площадь 25 000 км2,
население 1 173 900 чел.
    
Минская область. Площадь 40 200 км2,
население 1 479 400 чел.
    
Могилевская область. Площадь 29 000
км2, население 1 208 600 чел.
  



Ответ 2

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