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